Build a COMPLETE React Admin Dashboard App | React, Material UI, Data Grid, Light & Dark Mode

hey guys this is edrow today we are going to be building this entire react admin dashboard from scratch it will be a fully fledged complete app using Enterprise level industry standard packages what we're going to start off with is we're going to start by building these data tables using the amazing material UI data grid which is fully customizable has lots of options and you can customize it to whatever you want to do so if you take a look we have all these we have different axis levels where we can put we can customize different parts of the row and the data we can make checks as well we can go in we can have our own columns we can change the columns the users can go in find whatever columns they want they can filter it by let's say age 42 and now they can have items of filtration right there you can remove that you can change the density you can go and make it compact comfortable you can even export as well then we can go to invoice balances we can have the checks as well and you can put different pieces of data as well and you can do so much with this data grid table after that we're going to go to our profile form which is a fully fledged form and we're going to be using formic and yup validation to achieve this complex this is also going to have validation right out of the box it's going to make it so easy for us to change so anytime you touch it you go out you have required validation and then you also have email if you don't put the proper email you're going to have correct incorrect validation for invalid emails and the same thing with numbers if it's not correct it's going to tell you then we can go to our calendar app this is an amazing app as well this is going to be using full calendar and we are going to be able to add events you can add the event it'll pop up here you can move these events as well you can even delete the events go back and you can also check the week day and the list view as well and from here we can go to the FAQ page and this is the react accordion or material UI accordion that you can use so you can create any type of frequently asked questions page and then finally we're going to use a library called nivo which is an amazing chart library that you can customize to any kind of need and it buy out of the box looks very nice so we have a bar chart we have a pie chart line chart and a geography chart so these are incredible looking charts and I highly recommend these packages for this application finally we are going to be putting it all together and building a complete dashboard with charts and information using material UI and react I'll show you how to build this setup with the CSS grid and we are we also will be able to change from dark mode to light mode and vice versa and I'll show you how to structure your theme to easily modify and have ready to use colors and typographies this tutorial will be dedicated to both beginners who are looking to practice their project building skills or who want to place this into your portfolio for future employers and also this video is dedicated to more experienced developers who are looking to build a dashboard using Enterprise level industry standard packages as an industry expert and a front-end Tech lead I will be teaching you react and react context about best practices and how to architect a proper react file folder structure like a true professional now let's get started coding by opening up a new directory so I'm in vs code you can use whatever code editor you prefer but I highly recommend vs code if you go into the extension section you can install something called prettier which formats your code automatically in a very nice to easy Style so if you ever see any changes that are happening on screen when I'm saving it that's because prettier is automatically formatting the code and from here I'm going to go into my terminal and I'm going to write MPX create react app space I'm going to call it react admin so create react app automatically creates the boilerplate template that we need for react so it'll set up everything for us so let's wait till that finishes all right once that's installed I'm going to change into the directory of the folder we just created and I'm going to open that up into a new window here I'm going to install material UI so if you go to the material UI website they have a link over here but I'll type it in for you just in just in case you don't want to go to the website so I'm going to write npmi m e y slash material at emotion slash react at emotion slash Style and then from there we're going to install the data grid which is the table of material UI which is bundled separately so we have to add this one separately so at mui x dash data Dash grid and also we're going to add the icons that material UI have and this is also separate from the main package so mui slash icons slash material and then we're also going to act add react router so we're going to add react router Dom at six then we're also going to add a react react Pro sidebar so this is a package that allows us to create a sidebar easily and then also we're going to add formic which is the form library and yup as the validation Library and then finally and from there I'm going to be installing full calendar which is the package library for our calendar app then we're going to go to the full calendar docs website and they have quite a bit of packages that they have to install so I'm going to write that down all for you so at full calendar slash core at full calendar slash day grid for the day grid View at full calendar slash time grid for time at full calendar slash list for the list View and finally we're going to add the Nevo charts so if I go to the Nevo charts the way this works is that you go to Nevo you can add whatever charts you want to you're going to have to go in and add each one separately so you're going to have at Nevo core and at Nevo slash whatever chart that you want so here we're going to add a few of the libraries so we're going to do at Nevo slash core at Nevo slash pi at nivo line at nivo bar at nivo Geo so these are all the packages we are going to be installing and then once those are installed we're going to go to our source directory and we're going to be deleting some files so we're going to be deleting setup tests report web vitals logo SVG app.test.js and app.css delete all those then we're going to go to index.js we're going to be deleting the last tag we're deleting report web titles save that we're going to go and delete our header like so and delete app CSS and Logo information Imports and from here we're going to make a few changes we're going to change the uppercase a from class name to lowercase and we're going to go to index.js and we're going to import browser router from react router Dom this will allow us to use react router and set up routes and we're going to wrap our app around browser router from here we're going to go to our index.css file and we're going to go to Google fonts so this is a place where you can find a lot of Google fonts that are free to use and we're going to search up a font called Source Sans Pro this is a very nice sans-serif font that's an alternative to Roboto and open Sans but it's very convenient so we're going to go down we're going to add a regular 400 600 and the 700. and we're going to go to the at import to grab the URL and we're going to go back to our code and we're going to paste it and then we'll be able to access the fonts from there and also we're going to go HTML body root dot app and the class name that we haven't added yet dot content I'm going to set this height to a hundred percent width to a hundred percent and then we are going to add dot up and we're going to put display Flex position relative this will set up our CSS file page from here we're going to add a font family of source Sans Pro and Sans serif so our default font would be Source Sans Pro and then we're also going to edit some of the scroll bar because we're going to have to style the scroll bar for it to fit in the style of the website so we're going to do webkit scroll bar like so set the width of 10 pixel then we're going to set the track this will style the track and we're going to set a slash webkit scroll bar track like so I'm going to set that a background of e0 e0 e0 like so and we're going to go down we're going to set the handle it's going to be similar to what we did before except webkit slash scroll bar slash thumb and then we're going to set that background as 888 like so and finally the last thing is going to be handle on Hover when we hover over the scroll bar so I'm going to set Dash webkit scroll bar thumb and then hover like so background should be 555 like that so this will style the scroll bar so it doesn't feel out of place and then from here we're going to create a new folder we're going to call this data data like so and I'm going to create a mock data JS file and what you can do is I'm going to copy and paste this but in the description there is a link to the mock data section so you can copy and paste it as well and then we're also going to add one more data file mock geofutures.js so this is specifically for the geography geography chart which you can copy and paste and the reason why you need this this is a very long file but the reason why you need this is that Nevo charts requires you to set this up so you have the geography the world map basically to be loaded in for the chart and from there once we have our data set up the next thing we want to do is set up our file and folder architecture but before we do that let's talk about how you would organize your code and why you are doing this so the whole purpose of organizing a code base is very simple to easily access the files and folders that you're looking for at any given time without having a very complicated nested file folder structure that's difficult to navigate so there's a lot of issues with a very complicated code base sometimes you end up situations where you have folders within folders within folders and that makes it very difficult your life becomes very difficult to find what you're looking for and find what you're working on especially when you need to navigate to two files at the same time because they're connected in some kind of way so there's this idea called the Ducks pattern basically it's a fancy way of saying you should organize your code Base by features so in this case if you look other app we can organize it via dashboard right here this is the dashboard component this is the dashboard layout so you have all the files and the data relevant to this page in that folder so it's very easy to understand hey I'm looking to work on this this particular page you go to this folder that makes it very easy to live with there are other components that make it more complicated for example this sidebar and the app bar these two things exist throughout the entire application so that means these two components cannot be organized via a particular page but we can add like a folder called maybe like Global and they would be accessible through the global folder and you can find anything that's Global related into this folder what you want to avoid is when you have a bunch of components that you go hey this is a dashboard I'm going to create a folder I'm going to call this the stats component and then we're going to call this another one and you're going to start nesting and nesting all these files inside it it makes for a very difficult user experience or a developer experience especially and that is not something you want so you want to keep it simple you want to keep it what people call Flat as possible meaning less nested folder without it becoming an extremely long list so if you have like a hundred folders all right here as very flat that's also a problem because you can't find what you're looking for so you want to keep it as a balance between nested versus flat the very good medium to have both of those qualities so as an example for this one this website is very simple in terms of the way you would architect it but let's give an example so let's create a folder called components so this is kind of a misnomer but when you have a components folder this is a file folder where you're sharing components so any components that are being used in multiple locations for example this geography chart is going to be used in multiple locations right here and right here because they're in two different spots we create a components folder that will use both of those and then we'll also create a scenes folder now this is more straightforward this is based on the page that you're working on so let's create dashboard like so and in here we're going to create a file called index.jsx so this represents everything that's going to be on this page and then we'll also create a new folder called global and I mentioned as before we're going to add the app bar which is the top bar we're going to call it top bar instead because it's more explicit more understandable top bar jsx and then there's also this which will be the nav bar but we're going to call this the sidebar to make it more easily understood the difference between those two and then from here we would in the future we're not going to create it right now we would have a folder for each of these pages so that anytime I'm working on profile form I can go straight to this file or folder have this let's set up our components so const Side Bar equals Arrow function we're going to return div sidebar like so and we're just going to export default side bar and we're going to do the same thing we're going to copy and paste this into top bar select all of them and oh by the way the way I selected all of them I just highlighted sidebar and I pressed command d until I selected all of them and now I can edit all of them at once so we get top bar like that and now we go index we're going to call this we're going to copy it again and we're going to call this dashboard all of this we're going to close a lot of the tabs just because it's getting messy so we're going to create a new file and we're going to call this theme dot JS actually I want this to be in the source directory not scenes so theme is going to be the setup to get all the colors and the types of or the typography of the website and we're going to allow this to be light and dark mode so the first thing we're going to do is we're going to import create context from react we're also going to import use State and use memo and then we're also going to import create theme from material slash Styles like so so we'll be using these to establish our theme setup for the entire website so the first thing we're going to create is color design tokens so basically this will be all the colors that we're going to be using so there's going to be three colors that we want to use it's going to be this is just a great color and then we're also going to add primary dark blue color and then a green accent then we're going to add a red accent oh forgot the hash and then we're going to add a blue accent and then what we're going to do is I want you to go to the extension and we're going to find an extension called Tailwind Shades so what this will do is when we have just these colors it's very limited in terms of if sometimes you just want that same color except just a little bit lighter or a little bit darker so what this will do is allow us to create a lot of the shades of that particular color easily with the very one click option so if you look at this once you installed this we can say command K command G if you're on a Mac same thing with Ctrl K Ctrl G with PC or other computers so we can do command K command G and now what it's doing is going to create all the shades so this is a lighter version of this one this one this one so it gives you lots of different options just from the same color we're going to do it for each of these command kg command kg command k G so this will provide us with all the colors and the shades that we are going to be using and we're going to create a variable called export const tokens and what we're going to do is we're going to pass in the mode so this mode will represent light or dark mode so this will be a function and we're going to export an object from this so if I go here I'm going to cut this out all of this so I can click it okay and if the mode is equal to dark we are going to pass in as a ternary operator so if the mode is dark we're going to pass in this object that we just created otherwise we'll be creating the light one as well so as you can see we have these colors so this is going to be we're just going to type this gray change this black to primary change the screen to Green accent and then go to the next one call this red accent and then this one will be blue accent like so and there you go now you have a full color scheme of tokens that you can use depending on the mode so this will automatically allow us if the mode is dark we're going to be using these colors and then we'll set up the light one as well all right and then from there we're going to copy all of this to get our light mode so we're going to copy this and we're going to use a little bit of a trick we're basically going to invert all these colors the opposite direction so what we're going to do first is we're going to select this we're going to hit command P or control P depending on your PC type and then we're going to do sort line descending so it's just going to invert everything but it doesn't actually change much it doesn't change the code or what it's doing so sort lines descending we're going to do this for every single one sort lines descending command P sort line descending command p Sor lines descending now from here I'm going to go back to the top I'm going to change all of these manually it's a bit tedious and what we can do is we're going to hold option command and press down so we can select more all of them at once and then command shift left so it selects all of these so we're going to just copy this and we're going to go down and do the same thing over here command shift and then paste it so now we have everything inverted maybe there's a better way to do this but this is the best option that I thought of I kind of messed it up so the red accent we're going to paste that and shift down command shift left and paste it so now we have all the colors inverted oh I messed up the green accent so I want to get that and let me double check I got everything yeah and then there's actually one color that I find that didn't work very well and it's going to be primary right here 400. so what I'm going to do is I'm going to manually add a color instead of this one and I did this just by looking at the website so this one actually works better and now that we have our like colors set up we're going to go to the bottom and we're going to go and add the material UI theme settings so now we have our colors established now we just gotta set up material UI to use those colors so we're going to export const theme settings and like with the tokens we're going to add a mode as our function and we're going to go const colors equals tokens mode so basically what this is doing is it's giving us returning whatever colors or tokens depending on the mode so if it's light it's going to give us this object if it's dark it's going to give this one that's what this right here is doing and then we're also going to return an object and this will be the material UI settings that we want so we're going to have palette and inside that palette will be an object we're going to set mode to mode like so and like we did before we're going to have if the mode is equal to dark we're going to have a ternary and we will given an object and for this one will be the palette for dark mode so we're going to have primary and in the primary we have the main of colors dot primary 500. since 500 is the main colors that we're using and then SEC the next thing we're going to do is secondary oh I need to spell that correctly secondary main colors dot green accent has 500. and then we're going to have a neutral let me add a comma neutral and we're going to give it dark colors dot Gray 700 main colors dot Gray 500. and light colors dark gray 100. and then finally we're going to set the background and that's going to have a default color of colors.primary 500. so this will be the official setup for dark mode and then we also got a setup for light mode as well and I think I have oh yeah I messed it up so right here is going to be the second one and we're going to copy everything inside this for the light mode but we're going to change it up so I manually pick the colors that are looking good for the light mode so green accent 500 gray 700 500 those are fine and the background default this will be a manual color I found now that the colors worked well so this will be a very light gray generally do not want to use white because that's too bright so you want a little bit of Gray and that's a very neat trick to note that you generally don't want to use Pure White pure black most of the time unless it's for text and then let's save it and then we got typography as the next thing that we're going to set up and we're going to set up a font family of source Sans Pro Sans serif and Dot join so since we have text we're just going to join it this is an easy way to join the two font size is going to be 12. so this is the default font for material UI and then from here we're going to set up each one of the fonts so we're going to set font family for each one and we're going to copy and paste this because we're going to be using the same font for everything we're going to set the font size to 40. and we're going to do this for all the heading tags so H1 H2 H3 H4 H5 H6 we just need to add it now this is going to be 32 H3 is going to be 24. make sure you have the commas here H4 is going to be 20. H5 is going to be 16. H6 is going to be 14. and there you go these are our default find typography and whenever whenever we're using the material UI components such as the typography component if we use a variant of H1 it's going to give us this font size same with everything else and then finally we're going to do we're going to create a react context for the color mode from here we can do export const color mode context and we're going to create a context and pass in toggle color mode so this is a function that will allow us to change the color or like the function will allow us to provide this function throughout the entire app so that we can have a trigger for this and then we're going to have export const use mode actually let me make sure that m is capitalized and this is going to do a couple things so first we're going to set the mode mode set mode using use State and we're going to start with dark so this will be the state that's going to be storing the the condition or the state of the dark or light mode once we have that we're going to create export const use mode so this will do a number of things the first thing we want to do is set the state so we're going to set const mode set mode equals use State and we're going to pass it in dark so this will hold the state of whether it's dark or light and we're gonna create another function called color mode and we're going to set this use memo we're going to pass in the function an arrow function like so and we're going to give the toggle color mode that we established and we're going to have this set mode as previous Arrow function previous is equal to oops light we're going to set this to dark and if it's not equal to light we're going to set it to light so this is the actual functionality of the app or of the dark and light mode so it gives us those conditions and then finally we're going to set the theme using use memo and we're going to pass and create theme theme settings mode comma mode like this so what a little bit of a handful but basically what this is doing is creating the theme from Material UI and we're passing in the mode into our theme settings that we created so we're passing in the mode here so that gives us an object of the proper format depending on the dark or light mode that's what this is doing and then finally we're going to return theme and color mode for us to use so by doing all this this allows us to basically create a context so that we can have easy access to the condition of whether it's dark or light and allow us to provide a function that changes it as well and we will add that function of changing it to this button right here I know that was quite a bit but this will allow us to use the theme and use colors that we need and we can set them dynamically based on light or dark mode so there's a few things we still need to add is we're going to go to import or we're going to go to the app.js and we're going to import a few things we're going to import the color mode context and use mode from the file we just created and then we're going to import CSS Baseline and theme provider from at mui material and the Baseline is going to reset our CSS to the defaults that we'll probably need and theme provider is going to provide that the ability to pass in the themes into material UI and from here we're going to use our hook so we're going to do a const theme color mode equals use mode that we created so we have access to the theme and the color mode now and we're going to pass in two a return we are going to create friends and we're going to pass in color mode context.provider we're going to pass in the value of color mode so this is a way to set up our color context so now we have access it to it everywhere and then from here we're going to add the theme provider so that material UI has access to it as well and then wrap our app around it and then from there we're going to add the CSS Baseline like that so this will reset the CSS to defaults and we don't have to do much work because material UI provides this and then finally we're going to add one more thing we're going to add the main section and we're going to give this a class name of content the CSS class that we added before oh let's get rid of this semicolon and that's pretty much it for the setup for the theme the one thing we're missing is still this button on here light and dark mode but we'll get to that shortly and from here we're going to create the top bar the top bar is this section that involves the search and these four icons now if you want to take a look how we are setting up the CSS for this we can use a tool or extension called pesticide which is in Chrome and brave browser maybe Firefox but you can see the layout of this so basically there is a div around this entire area and we're going to have flexbox section this off into two sections this section and this section and we're going to do space between to represent that and from there we're going to go back to our code and we're going to place our top bar component inside the main component and we are going to make sure we import that as well so import top bar from Dash scenes slash Global slash top bar and then we're going to go to our top bar component and we are going to be importing a number of things here we're going to import quite a few things so we're going to start by importing box icon button use theme from at mui material we're going to import use context from react we're going to import color mode context from theme and tokens as well as you noticed when I'm typing sometimes the intellisense pops up it helps dictate where it's coming from so make sure to use that as well if you're possible so if you look at input base perfect mui material I go down I select it it types it for you so not only does it improve your speed of development but also it makes sure you don't have any bugs when it automatically does it for you then we're going to import a number of icons so light mode outlined like so so we're actually going to use the icon version like light mode outlined icon so this is slightly more performant than the other way it's just more code too right light mode outlined and these icons are coming from the mui material UI so you can go mui material icons and we go here and anytime you want an icon let's say I want an outline icon right here you can go in select this that copies it and you can just straight write this like that but what we're going to do is we're going to copy this and we're going to hand write all of them because I already have that set up there's six of these I'm going to change this to dark this one will be notifications this one will be settings this will be let me change to E this one will be person and this last one will be search so we're going to actually get rid of the outline for this one so search like that and from here we're going to use const theme and we're going to pass in use theme from Material UI so this grabs the theme this is basically done in react context but in material UI so they allow you to have access to the theme provided and what we're going to do is we're going to pass in colors tokens and theme dot palette mode so what this allows us to do is that anytime we want to use the color mode that's in material UI we can grab it from use theme and we can pass it into tokens theme that we've created so this tokens right here so anytime we use a color it's going to automatically determine which color we're going to want so if it's in dark mode gray 500 is going to represent this color but if it's in light mode gray 500 is going to represent well in this case this is the same thing but let's say primary 400 this will be a different color from Prime a400 right here so hopefully that makes sense and then from here const color mode is going to use context color mode context so we are going to be using this to allow us to toggle different states for the color mode all right and I'm going to wrap this and I'm going to add actually I'm going to just delete this and we're going to add box so if you're familiar with material UI the Box component is basically like a div component but it's very convenient because you can put CSS properties directly into the box component so I can put display Flex like so so instead of writing CSS separately we can write the CSS properties directly on this box component now there are some benefits and the downsides to this method so when you write CSS like this it is very convenient to write when you develop and having the CSS properties exactly on the component makes life way easier and it helps you improve your development efficiency by writing things like this and then you can have shorthands like P which is padding and we can set this to for example two now I'll say this I really like this I really like this setup there is one downside is when you have this and you have lots of CSS properties which does tap does tend to happen quite a bit you tend to have very long components when you have long components the option would be to break it out into more components but personally I think the benefit of having to write CSS or being able to write the CSS directly on the div or on the element that you're writing on helps it so much and I really like this so the Box component allows you to write the CSS properties directly but other components let's say we're going to do icon button which is something we'll use later this one you cannot write display Flex like like so it doesn't pop up it doesn't allow you to do that so instead for other components you use something called SX and then you write your CSS like this this is more of the preferred way of material UI but for box components specifically this allows you to write CSS properties directly on it as opposed to the typical way which is SX but personally I like when you have a box I like writing the CSS props directly because that is very nice for convenient especially when you do layouts right and then let's save this if you look here again if I go back as you can see we split this into two so we're going to create the search bar first so we're going to write this as a comment and we're going to create a box component and inside this box component we're going to have multiple properties display Flex background color and we're going to pass in colors so now we are using our theme so now I can pass in the colors primary of 400 so it gives us that shade as we need border radius of 3 3 pixels let me add quotations so let me fix that all right so as you can see with the colors we can just pass in the colors that we plan to use the reason why I don't like using the material UI theme is because in this case we have more shades sometimes I need more than just these main colors this allows you to specify much more shades if I ever need them and as you can see this is very convenient that you see this inbox and you have the CSS properties directly on it so anytime you come in you know this div is exactly the CSS properties as opposed to style components where you have a situation where you where you can extract it let's say styled box so now you have you put this style properties in here you put everything in here so it's very inconvenient in terms of both writing it and looking at it at times but I'll I'll do say sometimes it does look cleaner in terms of organization but it's up to you so the next thing we want to do is import in-base input base from Material UI and this is going to give us an input section for the search and we're going to give it MX at margin left of 2 that's what ml represents is a shorthand and flex of one and we're going to set a placeholder of search if I save this go back to our app that represents this guy right here and then we have icon button over here and we're going to pass in search icon over here and we're going to do type equals button like so SX equals P equals one now this is not going to have any actual functionality we're not going to get to that because there's a lot of other things we or need to implement and then from here we're going to have the icons section which represents the other half and I'm going to get rid of Icon button over here and we're going to create a box this is going to have a display of flex as well so this is going to have if you take a look this outer container is flex so you split this into two sections this itself also has a flex so these are four different items aligned to each other so you're gonna have to use display Flex as well over here so let me turn that off so if we go back go into our component and we're going to have icon buttons like so and we're gonna we're actually going to go and copy and paste we have four of them so one two three for and what we're going to do is we're going to grab each one of these let's actually start with notifications so we're going to do the same thing for settings so I'm just copying pasting the icons and we're going to do the same thing for light but the light mode is going to have some functionality so if I go here paste it we can have our light but we're going to pass in for Icon button and I'm on click so we're going to pass in color mode dot toggle color mode so this is the react context of the function that allows us to change from dark to light and depending on the mode actually theme dot palette dot mode and if it's dark we are going to want to show the dark mode icon so I have the light but let's change this one to dark and then as the other conditional if it's not dark we're going to set the light mode outline icon so we're going to paste it just like that and now we have our proper conditionals with that we have the top bar set up but before we go to the next part let's actually make sure everything is working so I'm going to open up the terminal and I'm going to hit Ctrl uh control apostrophe if you want to open up the terminal and from here I'm going to run npm run start in our terminal and this should open up Let's ignore that we're going to create a new tab we're going to go localhost and as you can see we have an error imported as input base so basically what happened was this should actually be input base instead of Slash material save it we have everything working perfect everything works well we have light mode and dark mode Perfect all right from here I'm going to just move this down and what I'm going to do is I'm going to import a bunch of components that are not made except from sidebar we're going to import a bunch of scenes so that we can set up the routes for these these components will be created at a later time in the video but I'm just going to have all this set up so it would be easy to look at so we're going to do import Side bar from slash scenes Global slash side bar and then from there I'm going to copy a bunch of these dashboard I'm going to move this and these will represent different pages of our website so we're going to start with team let's read the team page invoice let's actually select both of them and we can say invoices and we just change the lowercase and then we're going to change contacts I'm going to change this to bar then form line like so I'm going to continue copying a few more of these and this will be pi actually I made a mistake should I grab that that should be pi FAQ and this should be a lowercase and then geography so these are all the Imports that we have and then I'm going to go down to our routes and I'm just going to copy this route and we're going to set up all the routes that we're going to have for our entire website so we're going to have a route of team contacts I wish there is a faster way to do this but this is the best that I can think of and then invoices form then bar pi and then line and then FAQ Q components and I actually need two more there's going to be geography pass in geography and there's actually one I just missed in the Imports so this is going to be calendar and if I go up I need to import calendar calendar from scenes calendar like so and there you go these are all the routes so for now even those components don't exist I'm just going to comment this out I'm going to comment each one separately and the reason why I'm doing this is so that I can show you later on when I uncomment it when we need this so let's go over here we're going to comment all of these guys out we're gonna keep sidebar perfect and then from here we're going to close the terminal so you guys can see more of the space and I'm going to go back to the app file and I'm going to start adding routes so inside the main content file we're going to add a bunch of routes and I'm going to import routes from react router Dom again I'm using intellisense we don't have this imported so when I click it as you can see we have the import coming in very handy and I highly recommend you guys use that so we go back and we add routes like so so we add path like that and this one is going to represent an element of dashboard so dashboard is going to come from the component that we have created so instead of importing like that we're going to import dashboard not from icon's Material because that's not what we want from scenes slash dashboard like so so now this will set up our default route oh and our route isn't defined so that comes from react router dump so we want the route to be imported there and from here we're going to go inside our div but above the main element we're going to add sidebar like so and we're going to go into our sidebar component now and we're going to import a number of items so we're going to import use state then we're going to import Pro sidebar menu and menu item so react Pro sidebar is a nice little package that helps you build a side sidebar like this if you take a look at the demo and by the way this is this link is in the description below so react Pro sidebar has all of these components allows you to have sub menus you can put background image you can collapse it things like that so it makes it very easy so with this we can go down and we can also import one more thing from react Pro sidebar which is this styles file so we're going to grab this Styles link because we need this to import the styles from react Pro sidebar and then from there we're going to import a number of items from Material UI so box icon button and then typography use theme from at mui material and then we're going to import link let's use intellisense import link from react router dump so this allows us to have links when we click on the navigation items so it takes you to the page that's relevant to what you're clicking and then we're also going to import tokens from theme and finally we're going to import a bunch of icons so I'm going to go back to Top Bar I'm just going to copy one of these and I'm just gonna copy and paste quite a few of these because we're going to need a lot of icons so from here we're going to import home and then people contacts receipt person calendar today hope outline bar chart and I forgot to copy it over here par chart then we're going to do pie chart it seems like this one has outline outlined so it's double and then we go timeline menu and finally map it's a lot of icons but each navigation item requires an icon so if you take a look at the final build we have all these different icons for each of these that's why we're importing all of this and from here we're gonna set up some of the state that we need so first thing is we're going to set up the theme and the colors so we're going to use use steam like we did before const colors equals tokens theme dot palette not mode to give us the colors and then finally we're going to do is collapsed set is collapsed like so and we are going to use state and we're going to set that to false we're going to have another variable called selected and have set selected as the function and we're going to set use date to dashboard so is collapse is going to represent whether the sidebar will be collapsed or not and then selected will represent which item we have been selected or what page we are currently at so the first thing we want to do is we're going to wrap this with parentheses I'm going to delete this and go on the next line and we're going to put a box like so now what we're going to do here is we're going to add some CSS properties but this is going to override some of the elements that we have inside react Pro sidebar because we can't really directly edit these we can probably add another CSS class if you take a look on their documentation if you want the custom style you can write it before the import and maybe change some of the variables but what we're going to do is we're going to do something easier and we're going to select some of the CSS in here directly so what we're going to do is we're going to go end dot Pro sidebar inner and what we're going to do is we're going to set the background to colors.primary 400. and I'm going to put in an important tag so this will override the background we're going to do the same thing with the icon wrapper and we do not want an icon wrapper here so we're going to set the background color to transparent and we're going to set that as important to overwrite it now I usually don't like using important tags but because we're overriding a library we kind of have to the next item which is going to be Pro inner item and we're going to go and set padding and we're going to use a shorthand notation so it's 5 pixel at the top 35 pixel to the right 5 pixel to the bottom 20 pixels to the left and we're going to have that as important as well and then we're going to go and set and Dot Pro inner item hover as well and we're going to set the color and it's going to be eight six eight dfb and we're going to set that as important these are just colors I just kind of eyeballed once I got the colors because none of the colors that we set at this theme would work Pro menu item DOT active and we're going to set this as a color of number 6870 F A and I'm going to set that as important okay now the next thing we're going to build is going to be this profile image and the name and the subtitle so we're going to go after our menu item and we're going to say user and we are going to create section where it's if it's not collapsed we are going to be showing this box and we're going to create another box with the image so the image tag will exist here and then we're also going to create another box after that and this will be the typography of Ed row and the second one of VP fancy admin and with this we're going to style this so we're going to set margin bottom is going to be 25 pixel we're going to set the display of flex set it as justify content then we're going to set Center and we're going to set align items Center and inside the image tag we're going to have an alt tag of profile user we're going to set a width of 100 pixel along with the height of 100 pixel and then we're going to go to source and we are going to add an image called user.png I have not added this image yet but I will be adding it and we're going to get a pointer with a boiler radius of 50 percent all right so if I go my public I'm going to be adding the assets and the user.png so this image is available on the GitHub repo you can go find it I have a link below and that's what this source is linking to and from here we're going to also set this as text align so to Center our text then we're going to set a variant of H2 we're going to set color equals colors dot Gray 100. we're going to set a font weight of bold and we're going to style this with a SX tag I'm going to set this margin as 10 pixel 0 0 0. now I use a shorthand typically you could just do margin top and it seems like I have some kind of issue somewhere let's see ah okay so I have an equal sign here this should be a colon if we save it now everything works we'll close the terminal go back we're going to continue on the typography and we're going to see variant H5 and we're going to set this as color equals colors dot green accent and we're going to set that as 500. now let's take a look at our app and as you can see we have what we need all right that's good I also noticed in my final build I have this color right here as you can see this section behind the navbar and the search the colors are a little different so there was a color that I did manually change and I just forgot to so if you go to primary 400 right here we want to change this color let me add that to 1f to A40 so if we save that now we have the proper colors this aligns the perfect from here now we can take care of the menu items so if you go down below the user and above the menu we're going to create menu items so we're going to create a box and we're going to give it a padding left of is collapsed we're going to give it undefined if it's uncollapsed but give it 10 percent of padding on the left if it is if it's not collapsed and now what we're going to do is we're going to create a separate component for each item because there's a lot that will be needed so we're going to go up and we're going to create a separate component and we're just going to call this item and this item is going to take five different properties so we're going to have a title A 2 icon selected and set selected we're going to pass in theme equals use theme so we don't have to pass this again cons colors equals tokens theme dot palette that mode and what we're going to do is we're going to return menu item and we're going to pass in typography and also a link the reason why we are doing this is so that we don't have to rewrite this code multiple times and what we're going to do is we're going to pass an active is equal to if selected is equal to title so if currently if we have the title that's selected we're going to set that as active and that's what menu item requires from react Pro sidebar and then we're going to set a style of color s.gray 100 we're going to go next and we're going to say on click equals set selected and we're going to set that as the title if it gets clicked and we're going to set icon is equal to icon save that so it reformats and then we're going to put the title as the typography and we're going to say 2 is equal to 2. like that so what these menu items is really nice with rock Pro sidebar you can pass in react router Dom link into it that gives you the access to use react rather with the component that they've built so now if you go down you can pass in item oops let's fix this item like this and what we're going to do is we're going to be passing in a bunch of different things so title dashboard two is going to be to the main page and then icon is equal to home outlined icon and we're going to set selected is equal to selected and then set selected equals set selected now what we're going to do is we're going to copy this down multiple times until we have enough and we're going to be changing for each item so we're going to go down and say manage team and we're going to pass in team over here and change this to people outline.com we're going to go down we're going to go to contacts information and we're going to pass in contacts and we're going to do oops contacts outlined icon we're going to go to invoice invoices balances passed in invoices and pass in receipt we're going to go profile form slash form and we're going to say person we're going to go down we're going to add calendar slash calendar and write calendar today outline icon we're going to go FAQ page slash FAQ we're going to write help and then we're going to go bar chart bar chart outlined icon we're going to go pie chart slash pi Pi chart oh yeah if I can get that correctly pie chart outline outlined icon we're going to get line chart slash line don't worry we're almost over and we're going to say timeline outline icon and we're going to pass in one more and this is going to be the geography chart and this is going to be geography and this is going to be map like so now if we save it we go back now we have a link to everything and as you can see the URLs are changing and updating as we go we just don't have anything in those locations yet perfect we're still missing these little tags so we're going to add that so let's go back and we're going to go to write below dashboard and right below dashboard we're going to add a typography tag and we're going to write data for the first one and we're going to add some custom or certain properties so we're going to say variant equals H6 color equals colors dot gray 300 and SX equals a margin of 15 pixel at the top zero on the right 5 pixel on the bottom 20 pixels on the left so that's our data then we're going to go down and under invoice balances we're going to add another one and this is going to be pages and then one more it's going to be charts so that should be right up right below FAQ page and we're gonna write charts for that section so now if we save it we go back now we have all our links perfect and from here we're going to go into our box and now we're actually going to use Pro sidebar so what this is actually doing is right here we set up the styling and we're selecting the pro Side Bar that's in the child component of the box and that's how we select it and change those colors and in our Pro sidebar we're going to write collapsed and we're going to set that to is collapsed and on the next slide we're going to set the menu and we're going to set icon shape to square so that'll give the menu icons a square and the first thing we want to do is inside our finished one we're going to add these items first so the logo and the menu hamburger so we're gonna go in their menu and we're going to write logo and menu icon and in here we're going to set menu item and we're going to set on click and we're going to set this as set is collapsed and we're gonna make the ace collapsed the not version so the opposite version so that when they click this this is going to uncollapse it and then from here I'm going to add a few more we're going to set an icon of if it is collapsed we're going to set the menu outlined icon otherwise we're not going to have a collapsed icon so basically when it is collapsed we're going to set the map menu outline icon otherwise we're going to set it undefined now this is not necessarily undefined because even if you collapse it you'll still see the icon but we're going to manually input that there in the following statements so the next thing we want to do is we're going to add a style like an inline style using the style property so we're going to set margin we're going to use shorthand properties so 10 pixels at the top 0 pixels on the right 20 pixels on the bottom zero pixels on the left and we're going to set color is going to be colors.gray 100. and then from here now we are going to show when it's not collapsed so if it's not collapsed and we are going to show this box so basically this inside of here is going to represent when we're not collapsed whereas this one shows the hamburger when it is collapsed so in a way we're kind of hacking through or making a workaround for how this works because we wanted to show adminis and this hamburger icon if it's not collapsed but when it is collapsed we're going to show the hamburger icon so that's why this is here but if it's not collapsed we're going to be showing the typography of adminus so we go typography like so and we're going to write administs and then we're also going to show an icon button and that's going to have a menu outlined icon now if you take a look you can see right here we haven't styled this yet but when you collapse it you still see the hamburger icon like that so now with this we're just going to do display Flex and we're going to do justify oops justify content and we're going to set that to space between and then we're going to do align items Center and we're going to set a margin left of 15 pixel remember ml represents a shorthand for margin left and there you go now it's aligned and go like this let me hover over it we get that and we're also going to change the text we're going to set this as variant H3 and set the color as colors dot Gray 100. if you remember variant H3 that represents a typography in the theme scroll down we have H3 and it's a font size of 24. and then the icon button we want this to have iclone click and now we're going to do we're going to copy this same thing over here and we're just going to replace that it's so that you can have an on click either way and with finishing the sidebar we're going to close all these tabs we're going to go and create a header component and this will represent this guy right here so we have a header dashboard that's representing for each page so let's just create a reusable component and that will exist in this components folder like I said this is a shared components that will be used everywhere or in multiple places so first we're going to import typography from Material UI I want to import box use theme I'm going to go to the next line and we're going to import tokens again from theme and we're going to go const header and you're going to return a box so and we're going to export default header now the header should take in two properties which is going to be the title and then we're going to have a subtitle as well and we're going to pass in the colors like I mentioned before con steam equals use theme and we're going to pass in colors equals tokens theme dot palette dot mode and then on this we're going to add a typography and we're going to add Title Here and in the following line we're going to do another typography and we're going to pass in subtitle so in this box we're going to set margin bottom of 30 pixel in the title tag we're going to do a variant of H2 color of colors Gray 100 we're going to set a font weight of Bolt and in SX of margin right 5 pixel actually margin bottom five pixel and then finally we're going to go to the subtitle we're going to say this is a variant of H5 and we're going to set color equals colors dot green accent 400. and right now there's nothing to display so we're going to go back and we're going to go to our dashboard component and inside our dashboard component we're going to add the header as well so dashboard we're going to set Heather like so and we're going to set a title of dashboard in all caps and subtitle uh welcome to your dashboard and above this I'm going to change this to something else and this is going to be a box component from Material UI this is going to have a margin of 20 pixel and inside this we're going to have one more box and we're going to say that the header will go into this box and we're going to say this is a display of flex the justify content of space between and we're going to do a line items and set that as Center now if you take a look and we have Heather is not defined oh that's because we did not import this so we want to import our header and our intellisense will help us with that so if you go back now you can see the header and subtitle over here now before we go on and building the dashboard I want to create the pages first because some of the charts are going to be used in the dashboard so it makes sense to build those charts first and the other pages so if I take a look at the other Pages we're going to start with the team so these are data grid tables and what I'm going to do is I'm going to go to the material UI react data grid page and this includes how you can use the data grid now there's a lot of documentation for this for a good reason it has so many different options a lot of customizability and this is Enterprise level so if you ever have questions people probably have answered it because there's a lot of users of material UI and especially their data grid the data grid the there is a paid version of data grid but most of the time majority I guarantee you most of the time you will not need the paid version you can use the free version and you'll still be most likely okay unless you need really extensive tables so if you take a look we have the data grid component we can do lots of different things so we're going to take it as one step at a time so the first thing we're going to do is we're going to create another scene let's close all of this let's close these we're going to create a team component so that represents the team page so we're going to create a scene folder and we're going to call this team and we're going to pass in index .jsx like so here and from here oh I gotta make sure I save this and then from here we're going to create all right we're actually importing a lot of different things so we're going to import box like usual we're going to import typography and then use theme and we're also going to import data grid from Material UI data grid we're going to import oh import tokens from the theme file and we're going to import mock data team from the data file so as I mentioned before when you write the theme you guys wanted to copy this and paste it over so the first one that we're going to use is mock data of this theme so we need some mock data to use the tables in real life or a real production app you're going to have all this data provided to you through API calls or through some other means but in this case we're just going to make up the data to make our lives easier so that's why we are importing this and then from here we're going to import some icons so instead of that we're going to pass this in like so I'm going to say icon and Slash admin panel settings outline like that we're going to copy this paste it two more times and we're going to say this is going to be a lock open outline icons and this one is going to be security and lastly we're also going to import Heather just like we have created here we're going to create the component team component and we're going to say export default team and we're going to say we're going to pass in const theme equals use theme like we did before with colors equals token theme Dot palette dot mode and we're going to return and we're going to go down and we're going to put a box with the header and we're going to pass in title equals team and the subtitle of managing the team members and we're going to surround this with the Box and we're gonna this is where we're gonna actually pass in data grid now data grid has a lot of key value properties that you can pass in but in this case we only need a few things so we're going to say we want rows is going to be equal to mock data team so usually the data goes into the rows section and there's also a columns property and this is going to pass in a variable that we will create so columns will represent what we're going to pass in that will identify the keys and properties that we'll be showing as the column name and which key to use and I'll show you what I mean by that so first off we're going to say columns is equal to actually not an object it's going to be an array so we're going to pass in one object that's going to have a field of ID and the header name is going to be Capital ID so what this is really referring to is going to be if you look in the mock data let's move this over you're going to have the field ID so it takes whatever is in the row grabs that ID as the one the information to essentially grab and the header name is going to represent the column title name of the table so the Heather name represents this for example the ID and the field represents the value that it's grabbing from so in this case the values are ID so that's what this is actually doing so let's go back we can add the next one as well so in this case we're going to say field is going to be name with a header name of capital name and let's actually bring this up let's bring this up so we can see better so if you take a look we have a field name of Heather name right here and we have the columns there so now there are a couple more settings that we want to use we're going to say Flex equals one so material UI provides you the ability to customize the column itself so in this case it's going to grow to one fraction of the size for in terms of flex so this was this one's going to grow this one won't grow depending on how many items there are because this is ID we want that to be small and then from here we're going to actually add a custom cell class name so this will allow us to customize our column cell later on when we add the classes so that's the name now we want to add age so we're going to copy and paste we're going to say age instead and instead of this being Flex because this is going to be a small column as well we're going to say this is going to be a number column we're going to set a header a line and we're going to set this to the left for some reason when you have the number it's going to align it to the right but we want it to be the left and we're going to have an align of left and this one we do not need a custom class name it's because the name we want to change the color of the name and then next we're going to have a field of phone we're going to move all this we're going to say phone because that represents here and we're going to give this a phone number and we're going to give this a flex of one I can spell that correctly we're going to do the same with email and we're going to pass an email over here and finally we're going to add one more field this one is going to be kind of special but we're going to I'll show you why the field is going to be axis and we're going to call the header name of axis level we are going to keep the header name as axis level the flex is going to be there and we're going to have a separate property called render cell now this is a really cool input meaning this we can customize the cell as we want so in this case I have customized this to my own liking and that's because I created my own component in there so I go into render cell and what we can do is we can destructure and grab the row so that represents a row name and then we're going to grab the axis property from there so it grabs the data from the access here so we're going to use that information to render what we want and we're going to return a box with our own custom styling so in this we're going to have a width of 60 percent margin of 0 Auto and by the way this is another shorthand so margin zero if you only put two this represents top and bottom and this represents left and right and I'll tell you these shorthands might be annoying at first because you have to remember them but they are very convenient once you get the hang of it and then we're going to add the padding of 5 pixel and we're going to do display Flex justify content and we're going to set that as Center and we're going to set the background color dependent the background color is going to be changing depending on their axis so if the axis is admin we are going to set colors to green accent of 600. otherwise we are going to say green accent of 700 if not and let me make sure I write that correctly and then we're also going to have a border radius of 4 pixel and inside this box because it's a container we want to show different icons depending on the axis level so access is going to be if it's an admin we are going to have the admin panel settings outline icon that we have added and we're going to do let me remove this so we have more space so depending on the different axis we're going to have different icons so if it's a manager axis we're going to do security and then if it's a user we're going to put a lock outlined lock open outlined icon and then finally we're going to add some text and we're going to put that as the axis text that we have we're going to set the color to Colors dot Gray 100. and we're going to set SX equal to margin left 5 pixel now if we take a look this is the completed up if I go here go manage team we actually don't see anything and that's because we need to set the Box property so right now we have most of it set up but we need to still Define the box and the height so right now we have a height of 100 percent and that's a problem with CSS we need to explicitly Define at some point in the parent component an actual pixel height definition so we'll be doing that in this particular box down here so before we do that we're going to add a margin of 20 pixel and in this box we are going to have a margin of 40 pixel zero zero zero at the top a height and we're going to use viewport height and we're going to set that at 75 viewport height which is a safe good bet and that and because we're not using percentages viewport height sets this explicit defined value that allows data grid to show and as you can see we have we have a beautiful table now The Styling is a little different now I want to change the styling so how do we do that so again similar to react Pro sidebar we're going to go and we're going to Define via SX over here and we can Define and grab particular properties as we need so the way you find these properties is pretty easy is that you go in let's clear this you go in you can grab and look and see what these class names are and if you can identify which one you are targeting then you can change those classes so if you go down here let's say this one column header draggable container but more importantly for example you would Target this class mui data grid Dash column header that's one CSS class that we can change but I'll show you I'll show you how we can choose it so if we go and Dot mui data grid root we can for example set this border as none if you take a look now the borders are gone which is what I want from here we're going to Target n dot mui data grid Dash cell and we're going to set border bottom to none and we're going to go down we're going to write and Dot name column dash dash cell I'm going to say color s.green accent 300 so this one in particular is actually the class name we defined over here that's why we can actually Target that one in specifically and then next we can go and dot mui data grid column Heathers and we're going to set this as background color s dot blue accent 700 and we're going to set a border bottom of none next we're going to go and Dot mui data grid virtual scroller and we're going to set that as border top of none actually sorry this is not correct we're going to set this as background color s dot primary 400. and on the following we're going to say and Dot m-u-y data grid footer container border top of none background color of colors a blue accent 700. background colors should have a Capital C and if you take a look now we have everything styled as you can see name these are highlighted into different colors axis level has different icons over here this this header is different color and the bottom the footer container has a different color as well so that's represented by this virtual scroller is the middle section so I change the background for this the column headers like I mentioned border cells of every other cell doesn't have a border on the bottom and so on and so forth so this is how you can use the data grid table to customize both The Styling and the data that you're putting in there's just so many options and they really really like this component when they came out with it and from here we're going to create the contacts page so we're going to create a contacts folder and we're going to pass in a file called index.jsx and in this one we're going to copy everything in the team file and we're going to copy and paste into the contacts and we're going to just make some adjustments here so we don't need any of these typography or use Steam we are actually going to pass in something called a grid toolbar for this one and I'll show you how we can add extra filters that makes the tables a little better and we're going to change mock data team to mock data contacts we don't need these icons for these ones so and we are going to pass in use theme for this one like so not from emotion but rather from mui material and from here we're going to go to mock data context so basically I pressed command click or control click and that takes us to this page so I'm going to close everything and I'm going to move this to the left side so we can see we have the mock data context and we can change the fields as needed so the first thing we're going to do is have ID Capital ID and we're going to set this to flex zero point 5 in this case then we're going to go down we're going to add register edit ID so we're going to add field Regis store r i d and we're going to pass in Heather name and this will be register ID capital and I'm going to pass a comma there and then we're going to keep name the same we're going to have age which is also the same phone number is going to be same email and then we're going to add address so actually I'm going to copy this repaste it and we're going to have address like so pass in capital address I'm going to do the same thing except with City City capitalize the C and then the ZIP code so we're going to change this zip code lowercase to Z and for this one we don't need the access so starts from here we're going to close that and then we're going to choose we're going to change the title so contacts capital and also the list of contacts for future reference we're going to keep everything basically the same except we're going to go down we're going to under the footer container we're going to add one more styling so we're going to and mui data grid toolbar container.mui button Dash text and we're going to add a color of colors.gray 100 and we're going to set that as important so this is going to be a toolbar that we're going to add that has a filter so I just added it so if you take a look on this page we have columns filters density and export so material UI allows you to use these columns filters density and you can place them in if you would like so the way to do that is part of what we the reason why we imported grid toolbar over here this is the purpose so we're going to put components like so and we're going to pass in toolbar and grid toolbar will go in that and now if you take a look at our current build we're going to go to contacts oh actually so we need to go to app.js and we need to uncomment the contacts out as well as uncomment it from the Imports and now we gotta look at we have some issue mock data team is not defined and that's because this should be mock data contacts and there you go now we have our table so this table means we can change the columns so if a user wants to see the table with less columns this is how you can do it you can show all hide all things like that now if you go to filters you can do the same except we're filtering depending on the property so this is very useful if the age is equal to 42 we can see which which rows have that h and so we can remove that I'm going to do all sorts of things with those and then the density we can change just the look of it comfortable and we can export things if needed so this is very very nice very very nice and material UI provides you access to it now if you wanted to you can customize this grid toolbar using some of the components that they already have and then you can make it your own as well so this is a very fantastic filter component and FYI I haven't showed you guys this yet but you can for each of these by default you can go and you can sort as well you can also filter just like you did before based on this you can hide show columns and do all of the good stuff with these three dots so you can sort based on that just note with the sort you can do three times the third time it'll be unsorted so FYI so right now it is ascending or actually yeah ascending descending and then after that this is just unsorted that's why you see that so it caught me off guard the first time and the last table we're going to add is going to be invoices so it's going to be pretty similar to what we have built before so we're going to have an invoice we're going to add a file and it's going to call invoices.jsx and in this invoice we're just going to copy and paste again actually this should be index to be consistent and we're going to paste everything over here and there's something I missed is that these components we have a team we want to change this to contacts to make better sense it doesn't do anything but it makes better sense same with this we're going to change this to invoices and then from here what we're going to do is we're going to go back up we're going to add typography like so and use theme we're going to remove that we're going to change this to mock data mock data invoices and in this one we're not going to add the toolbar so we're just going to remove that and we're going to go and we're going to look at Mock data invoices to see our new data set and align the columns again so the ID we don't need a flex for this one we can change we can we don't need the registrar ID we have the name we have phone we do not have age so we're going to remove that we have email and then we're going to have something called cost so I'm going to copy and paste this and this field is cost capitalize this C changes to flex one and then render cell will be params oops and we're going to give this a custom typography and pass in params.row dot cost so this grabs the value in the row in the data we're grabbing the row and we're going to grab the cost as well and we put the dollar sign in front and we're going to set this as color equals colors dot green accent 500. and the last thing we want to add is going to be date like so change this to Capital D we're going to remove these because we don't need it and that about sums that one up and then we just got to change the title so this will be invoices and then list of invoice balances and we're going to take a look and we don't have a toolbar for this one but we are going to add checkbox for this m u i check box root we're going to pass in color and we're going to add colors dot green accent 200 and we're going to pass in important Excel and for this one we don't need the components now we can add check box selection so if we do this we have one more thing to do which is uncomment the invoices on the app.js page we're going to take out and comment out comment in the invoices and we can probably see yeah and there you go we have a third table now we have a check box as well now we don't have any kind of action for these but what you can do is you can customize the footer you can have it so that you can use the selected items to do some kind of action so if you wanted to approve let's say this is a request or email that you want to approve for whatever reason then you can select it then material UI provides you the selected items and you can send whatever API call or whatever action you need to do on those three items and that's pretty much all of our data tables these are incredible the data grid is one of the most incredible tables I've used it's very flexible has a lot of option A lot of community support I highly recommend it and you can do a lot of great things without even paying for it so I highly recommend using this table alright the next thing that we're building is going to be this profile form on this page so this one is going to have some validation you don't have it this is an invalid email you have an invalid number if you just put letters like that things like that and if you haven't completed you have some errors then this is going to trigger all the validation so what we're going to do is we're going to be using formic which is a form Library that's very great for building forms pretty easily now I know a lot of people use react hook form which is the newest latest library and I do like react hook form but when it comes to component libraries and using width formic versus react hook form I find formic a better option and I'll show you why so when we go and use formic for example we have a text field so text field is the equivalent of an input in material UI with some styles so with formic you can just pass in the value directly or on change and then errors as well as the helper text directly into the text field component material from Material UI so this this is very nice but when you're using material UI with react hook form you get this thing where you have to place a controller to use it so when I put the controller we are going to have to put the text field in this render property so anytime you want to use a custom component you're going to pass have to pass it into the render function which which is fine right here but when you have like a big component and a very complex component this render and all of this code makes it very difficult to read and it makes a very long and verbose for the code so it makes a little bit difficult to logically deduce because you have to abstract the components out more so than just having this long not long but a decent sized text field component where you see all the values directly so you don't have to abstract it further however when you're using react hook form with something like tailwind.js because you use the base HTML elements I find react code form very nice for that situation because you can directly change it control the input tags directly onto the base elements like so so it makes it very nice when you use it for situations like this with having said that let's go back to our code we're going to create a new folder we're going to call this form and we're going to pass in a file called index.jsx and we're going to write some imports so right here we're going to have import we're going to import box material UI and we're going to import button and text field then we're going to input import formic we're going to import everything as yup from yep we're going to import use media query so this is so we can have a responsive layout if needed and we're going to pass in at muy material Slash use media query and then we're also going to import the header that we have created and then we're going to create a component const form we're going to export default form and we are going to return a box that give this a margin of 20 pixel as for what we're putting in we're going to add is non-mobile and we're going to pass and use media query and we're going to set this as Min with of 600 pixel so what this is doing is that if we hit a Min width of 600 pixel we are triggering this basic Boolean so use media query comes from Material UI and allows us to use media queries inside our JavaScript or react element itself so we don't have to write it in CSS and then from here we're going to have a function called handle form submit so this function is going to be the function that triggers once we have submitted our form and in this case we're not really going to do anything with the form we're not going to have anything that triggers anything so we're just going to have console log values like so we're just going to console log the values as it comes out and Insider box we're now going to add the header and we're going to say title is going to be create user and we're going to say subtitle is equal to create a new user profile and then from here we're going to pass in formic and we're going to add a few things so we're going to add on submit and we're going to pass in the function that we just created handle form submit and then we're going to add initial values and we're going to create an object of initial values so the initial values are going to consist of an object of the values that we want this form to start with but everything is going to be empty string because we don't want it to have anything so we're going to pass in first name I'm just going to copy this down and we're going to change it for each one so this is going to be last name I'm going to change this to email contact address one and address 2. the reason why we don't have a number for contact is it's easier to make it a string and then we can change it as we need and then finally one more thing that we need to add to the formic component is going to be the validation schema and we're going to create a schema called let's say user schema and we're going to create the user schema as well so we're going to go up here we're going to write const user schema and we're going to pass in yup dot object dot shape and we're going to pass in our values so this schema right here is going to define the validations validation Logic for each field that we're using Kenya provides a lot of easily accessible pre-made validation functions so the first thing is we're going to add first name and we're going to do yep dot string dot required and we're going to say this is required so what this is going to do is that first name if there is no input we're going to say this first name is going to be a required input and by doing this this will be the text that pops up if an error is triggered we're going to say the same thing for last name so we're actually going to copy and paste this for every single one for now so email contact address one address two so now we have our user schema foreign we're going to add a few more validation Logic for email and contact so the first thing we're going to add a phone reg X so regex is a JavaScript thing where you can check based on the string so you'll be able to check what the values are so now basically I'm just going to be copying this from stack Overflow so this is one of those things you could just go and copy from stack Overflow because a lot of people have set up these regex that's very complicated and set up for specific things like phone is very common so we're going to set the phone Rec X to be like that so we're going to go into our contact yup string and we're going to say in before the required part we're going to say matches and we're going to say it needs a phone reg XP and we're going to say phone number is not valid and we're going to set it like that so basically we're going to have two type of validation for contact now which is going to be if it's not valid if it doesn't match this correctly it's going to give you this error otherwise we are going to have required as the second error and also we're going to do email as well and email is very convenient for yep because they already have something called dot email and we're just going to pass an in valid email like so so that makes it very easy and convenient to validate emails now we're not going to deal with address and address 2. but if you need specific logic you can do that for those from Pure formic provides a number of pre-made values that come from the formic component itself so what we do it's a little bit of funky syntax but it makes sense so we have values errors touched handle blur handle change and handle submit and it all comes from this function that we're going to pass in so we go here and we're going to have an arrow function like so and in here we pass in form on submit equals handle submit so all of these values errors touched handle blur handle change handle submit all of them come from this form component and this Arrow function allows us to use these values inside our form component all right and then from here we're going to create a box component and inside this we're going to create a display of grid so we're going to be using CSS grid which is very very nice once you get the hang of it we're going to set a gap of 30 pixel meaning that gives us a space between each item without having to set margin right or margin left on each item and then we can set grid template columns and what we're going to do is we're going to set a repeat of 4 min max of zero and one fr o so that's kind of a handful so basically grid template columns allows us to split the grid into four sections and each of the section is going to have a minimum of zero so that means they can squash to zero but also a maximum of one fr which is a very specific unit dedicated solely for grids and these are fractional units so basically that means each of the columns can have one fraction of the space unless something pushes it to not be one fraction then it's going to be smaller than that so these are complicated to explain but a lot of times once you see it it makes a lot of sense and also so what we're going to do is we're going to pass an SX because we want to Target a specific div so we're going to say and div and we're going to pass in Grid column actually I messed up so the colon should be after the quotations and we're going to do a grid column and we're going to say if it's non-mobile we're going to not do anything we're going to say it's undefined we're not going to mess with the grid column if it is if it is non-mobile meaning if it is desktop we're gonna or if it's sorry if it is mobile then we're going to say this is going to be a span of four so that means when it means span of four that means it takes up the entire line so if I look over here that means this because we have we're splitting this into four sections four represents the entire line if I said span of two which is going to be equivalent to this this is going to be half of it so span 2 span 2. so now if I go into the box we're going to start by creating our text field now I'll show you how the grid Works after it'll make a lot more sense once I created so we create our text field and we're going to pass in a bunch of properties so text field we're going to set this as full width we're going to give it a variant of filled a type of text a label of first name actually sorry this should be non-camel case so first name like that on blur should be handle blur on change should be handle change value is going to be values.firstname should be first name camel case error should be touched so now what I'm doing is I'm doing a double negative here basically what this is kind of doing is forcing it to become a Boolean so we're going to say touched first name so touched if you don't know what touched means that means if you have touched that component or if drawn Focus so basically if you look here and I click out that means you touched it and that's why it gives you a required um acquired property so because these are not touched the error validation is not triggering because we are triggering the helper text so the required based on whether you've both touched it and it doesn't meet the error so in this case we haven't touched it and the error but the error is triggered we don't get a Helper text but if we do touch it so now the error is triggered as true and the touched is triggered as true so both of those are true then we show the helper text but if one of those becomes not true then we don't show the helper text and that's what's going to happen with this error so if I go here and say and errors that first name that's what this logic is doing so we have to make sure that the first name for both touched and errors is true for the error to show up that's what this error property is about and then we're going to say helper text which is going to be the same thing we're going to say touched DOT first name so it has to be touched and then we can show the errors of first name if there is if there is an error and then we're going to give this an SX of grid column and we're going to say a span of 2. so that represents the two width that we have mentioned prior and that's why it only takes up two by the way this is a completed app I'm not showing you what we have right now so if you go here we can see we have all these different properties and values over here so now there's a quite a bit but they're pretty self-explanatory so variant is the type of text field that we have type text is just a type so it can be a number as well if you wanted the label is what's displayed as the text title on blur represents the function that changes depending on when you touch it or not and when you touch out of it so that is the function that gets run when you touch out of it handle change represents when you change the text value represents the values of the field so values.firstname so it has to align with the value that you want it to change so in this case values.firstname that's what's being changed and then we have first name as the name so again this needs to align with this particular value so that's why you have the name and the error these have to align to the correct touched and errors so after all this this is pretty self-explanatory and what we can do is we're going to be just copying this over and over and then from here we could just take this text field we could just copy paste multiple times and we're just going to modify each one of these and this is going to be very simple to do so first name this should be last name the values should be last name as well this one should be last name actually to make it faster I should be selecting most of these and I can say last name like so this should be column span of two so that fills the first line and then the next one is going to be email so we're going to take first name change that to email we're going to change all of these first names right here we're going to say email for this one we're going to say span of four so it fills up the entire line next we're going to do contact number and we're going to say or we're going to get all the first names here and we're going to change this to contact so the label and the value is a little different in this case and again this should be a span of four the next one is going to be address one this is going to be address one as well and this should be span of four and the same thing with the next one which is going to be address 2 and change all these first names to address two we're going to change this to a span of four and then from here we don't need any more Fields so we're just going to get rid of those and then finally we need to go to app again we need to comment uncomment the form field and we're going to pass in and uncomment the import as well so now if we take a look at our current component or current application we're going to go to profile form and as you can see we have everything with validation so if I just write a bunch of letters we go here we get an invalid email so if I write a bunch of text it says phone number is not valid and if I don't have anything it's going to show required so this is the power of formic and yup makes it very simple for these type of forms and then finally we need to add a button so what we're going to do is we're going to create another box outside of the other box and we're going to say we're going to add a button component and we're going to say create new user so this one should be a display of flex justify content of end and the margin top of 20 pixel this will allow us to align the button to the far right and we're going to say button type is going to be submit we're going to set the color as secondary and we're going to say variant is equal to contained and now with that we can check our form so we can see if we touch out of it we get a required if we have some kind of text it's okay now if we go to it email we can just write some kind of random email but if it's not correct like that it will say invalid email but if iso.com that'll be fine if I have a number that's okay but if I add say like a letter it's going to say phone number is not valid and then we're going to say for the address this is okay so now if I hit create new user this will counterlock all the values as we have set in our handle form submit like here now that we've finished the form we're going to go on to the next section which is going to be the Calendar app so if we go to our completed app we'll see that we have a calendar that has lots of different options with meet month week day and list View and we can be able to add events like so and pass this in so what we're going to be using is something called full calendar which is a package that provides you a lot of this functionality out of the box with some configuration so if you take a look this is the docs you can see it in the description if you need to if you want to check the documentation now so we're going to go into our code we're going to create a new folder we're going to call this calendar we're going to create a new file index.jsx and we're going to be starting let's remove all these I'm going to start by importing a number of things so we're going to import use state from react we're going to import full calendar and we're going to pass in format date as well and this is all going to come from at full calendar slash react we're going to import day grid plugin actually let's go to the website and we could just copy all of this right here to make our lives easier so we're just going to copy it there's also going to be one more thing I want to import and it's going to call interaction plugin and it's going to be from the at full calendar slash interaction like so and then we're also going to import box component list item list item text typography use theme and we're going to get it from at mui slash material and we're going to import Heather like usual and we're going to import tokens from theme and then we're going to create the calendar component so we're going to say export default calendar and we're going to start by adding some State and hooks so const theme equals use theme like we did before so we can use colors so we're going to say cons colors equals tokens theme dot palette dot mode like we normally do and we're going to add one piece of state and we're going to call this current events so and we're going to have Set current events so what this is going to save is the array of events that we can put onto our calendar and then we're going to add a function called handle date click so this function will handle the situations when you click on some kind of date and that will trigger The Prompt of what type of event you want to create so we're going to click selected and we're going to say const title equals prompt so prompt is a native JavaScript function that will just trigger a standard browser alert pop-up and this is a shorthand for that and we can say please enter a new title for your event now typically for this you would create a model instead and create some kind of check that will open the modal right here instead but for now we're going to keep this simple and we're going to just use prompt so we don't have a decade-long course so we're going to have a calendar API and we're going to say selected Dot View dot calendar and we're going to say calendar API Dot unselect so making sure that once we click on the date we can unselect it immediately because we want to enter a new title for the event instead so we don't want to keep having it clicked so if the title exists so meaning if some user writes the title we can say calendar dot API or sorry calendar API dot add event and this will add the event into the calendar app so we're going to have ID and we're going to say selected dot date string and we're going to say give it a title for the ID we're going to give it the title that the user put we're going to say start is going to be the selected start string the end is going to be selected and string and then all day is going to represent selected Dot all day so again when you click on it full calendar provides you with the selected and the selected comes with a lot of properties that you can use and you can console log to see what it provides if you want and then from there we're going to add another function called const handle event click so this function will be triggered when you click on an event and in this case we're going to make it very simple and we're going to say window.confirm are you sure you want to delete the event and we are going to single quotes the pass and selected dot event dot title another cooked like that and we're going to say selected oops selected dot event dot remove so basically just to keep this calendar application very simple we are adding a function whenever you click an event it's going to check and give you a question are you sure you want to delete the event which will provide a yes or no and if you do want to delete it's going to remove now again you would create your own model for this kind of things if you're using it for production level app but we're trying to make it very simple so we're going to just use the native prompts and confirmation modals and then from here we're going to return a box component like so we're going to give it a margin of 20 pixel like usual and give it a header we're going to give it a title of calendar actually this should be capitalized and then we have a subtitle of full calendar Interactive page let me fix the text so and now we're going to create another box or a div let's actually save it so we have an auto formatted so we're going to have display of flex and we're going to say justify content of space between so if you take a look at the app right here we are splitting this into two sections this right here with the events and this right here with the actual calendar app so that's why we are using flux so we're going to go back to our code we're going to look and see in our box and we're going to write calendar sidebar so that represents the left side and we're going to have a box as well and we're going to say Flex of one oops one one twenty percent so now this is a shorthand so this represents grow shrink and the width or the percentage of space it wants to take so when you're using flexbox you generally want to use flex as opposed to a width percentage then we have background color and we're going to set this to colors.primary 400. and then we're going to set a padding of 15 pixel and we're going to set a border radius of 4. pixel I'm going to save that and we're going to add typography we're going to say variant of H5 and give it events as the title and then we're going to go and create a list component and we're going to map through and cycle through the current events that we have we don't have any current events right now but we will be creating them once we have our calendar component so inside this list we're going to say current events.map and we're going to grab the event from each item and we're going to create list item and inside each list item we're going to give it properties of key event dot ID SX equals background color dot colors colors dot green accent 500 and then from here we're going to add another property margin of 10 pixel on the top and bottom zero on the left and right because I'm using a shorthand border radius of 2 pixel and inside the list item we can pass in list item text and the list item text will take some properties such as primary which is going to be the event dot title and the secondary is going to include a typography that's going to have format date which is a function provided by full calendar it allows you to use the dates that they give you and it allows you to format them and you get event dot start we're passing event dot start into format date so we get the date and what we need to do is pass in an object that has the options and so this will be year and the year is going to be in numeric form month is going to be in short form and day is going to be numeric and the we need to fix the syntax over here so this should be after that list item text actually the list item text can be a self-closing tag so we could get rid of that and I think that should be good to take a look at our current app oh and then let's make sure we uncomment the Calendar app so I'm going to move this up right here let's move this up and have the Calendar app and let's check it out okay so we can't resolve full calendar in react so let's look back as you can see I have a few errors that I cannot resolve full calendar slash react and full calendar interaction so I forgot to install these packages as I realized so I'm going to open up my terminal create a new terminal over here let's open we're going to do npmi at full calendar slash react and at full calendar slash interaction so this should install the final two packages that we have missed prior okay once that's installed I'm going to close this terminal and okay so the text is a little messed up here I'm going to close this terminal go back and as you can see now the page is working for calendar we don't have anything and it's taking up the full length that's because we have Flex grow as one so it's taking up the entire space we just haven't created the other section so we're gonna have to create our full events to see what it's going to be supposed to look like so we're going to go back and we're going to go down and we're going to go down to the Box section right here and we're going to add calendar and here we're going to say box is going to give the flex of 1 1 100 percent give it a margin left of 15 pixel and now we can actually pass in our full calendar component so there's going to be a lot of properties in here but that also allows for a lot of flexibility we're going to set this height as 75 viewport height to make sure it takes up enough space and then we need to add the plugins as we have imported them so we're going to give it an array we're going to pass in day grid plugin time grid plugin interaction plugin list plugin and then we're going to go Heather toolbar so this sets up what the toolbar will look like at the top so this is going to take an object and we're going to say left is going to go priv next and we're going to set today and for the center section we're going to have title for the right section we're going to have day grid month time grid week time grid day and list month then we're going to go initial View and we're going to say day grid month sure the r is NOT capitalized so this will be what the default setting of the month will be we're going to say it is edible editable true we're going to say selectable which is also true select mirror which is true day Max events equals true so there's going to be a maximum of events per day we're going to say select is going to be the function that we have created so this is going to be handle date click so this is basically running the event handler when the date gets clicked and then we're going to say event click and we're going to say handle event click so this will be the one that handles the events as well and we can say events set and we're going to do events Set current events as the events so basically this one is going to be what is saving the events that we've created into this particular state right here we have created and to provide and full calendar provides this Handler so we can utilize this so we can get the events that the full calendar API is handling and so we're also going to pass in some initial events so it looks doesn't look Barren when we first go so we're just going to say ID one three four actually let's pass in the string one two three four we'll give it a title of all day event and give it a date of 2022 -019 or 0 9-14 and we're going to add one more event we're going to say this is four three two one title is going to be timed event we're going to say 2022 9 28. and with this we should have everything set up we don't seem to oh okay so I made a mistake initial events is unidentified because I messed misspelled it and so if we go here now we have the events and we have everything set up we have the month week day list that seems like there is an issue oh I know why so when you have the right you need to make sure because the space actually affects how it looks like so you want this to be no space so prove same with the previous and next they need to not have any kind of space so as you can see these are fully aligned we have weeks days list so anytime we add an event we get a prompt saying test we get that events to be added we can go into the week view or actually the list View and we can see the test so now if we move this test to our current week we can see the test item over here we can even add events at a particular time we can even highlight those times like that move it around and see what we have for the day as well so we can move it go over here open it up so now we have that event in the day and the same with the list so you can see all of these events and so yeah so you can customize everything in this plugin and I find full calendar especially useful because it provides a lot of the things that would take a very long time to build like something like this would take a long time to build if you want to build it from scratch but this provides a lot of customizability a lot of functionality like data grid there is a paid tier and I think you can avoid it for the most part but some cases you might need the pay tier but I think the free tier should be good enough for most use cases all right and then from the calendar on our completed app we're going to look at FAQ page now FAQ page will be pretty simple this is a standard accordion so if you take a look we can create this but sometimes we need a FAQ page so we're going to go back we're going to go into our scenes folder we're going to create a new folder we're going to call it FAQ create index.jsx in here and we're going to go into this file and we're going to start creating and importing the things we need so we're going to import blocks from Material UI as well as use theme we're going to import header we're going to import accordion from Material UI and this actually should be accordion like this and we're going to import accordion summary and this should be accordion summary as well and then we're going to import accordion details from at mui material slash accordion details we're going to import typography and we're going to import one icon and it's going to be the expand more icon that should be spelled there we go see if no it doesn't pop up so we're going to import it from at m-u-y slash icons materials slash expand more and then we're going to import tokens from theme then from here we're going to create a component called FAQ and we're going to say export default FAQ and we're going to import our theme or not import but we're going to create the use theme and we're going to create the colors as well and we're going to pass in tokens theme dot palette dot mode and we're going to return a box with margin of 20 pixel then we have a header of title FAQ with subtitle of frequently asked questions page and then from here we can just create our accordion now let's actually save it so we have it formatted so let's create our accordion foreign the idea is we're going to have accordion summary and then a cornea details so we're going to say accordion summary and we're going to give it expand icon of expand more icon again I spelled it incorrectly so we're going to do that we're gonna close that and we're going to pass in typography and give it a colors of colors dot green accent of 500 and we're going to do a variant of H5 and we're going to pass in in important question and then we're going to say accordion details so this will be the information inside the accordion or inside that particular question so we're going to say typography and we're going to give it some random text now you can put whatever text you want I have some alarm ipsum text like that and so this will be the first box so all we have to do with the accordion is we can just copy and paste it throughout so that'll be question one question two question three question four five and six let's go and go to the first one that should be important and we can say another important question and then you can say your favorite question some random question and the final question actually we don't need the last one so let's remove that and we want all of these to be expanded once we load the page so they're going to be all expanded so we're going to say default expanded so let's just go over here default expanded default expanded default expanded same here and we can now save it and that's pretty much it for that one so let's import this so we're going to go to our FAQ move that up import FAQ as well and we should be able to see it so this is our current application not the completed one so we could FAQ page and now we can see everything we have so we have an accordion this FYI where I'm getting this accordion is material UI and you can see that all the documentation is on this page so you can have different type of accordions if you want to Next Step are Nevo charts so if you go to the Neva website which is nevo.rocks these are a nice set of charts that you can use that are built on top of D3 and you can use them in react now what I really like about these type of charts is of course it looks good but you can visualize what the parameters do in real time on this website by just changing some of these values so if I go down and change the Border radius you can see that it makes some changes onto the charts itself so if I go down let's say I don't want labels now we don't have that we can say label skip width we can enable grid enable grid y we can disable them do anything we want and visualize it and once you change it it'll show in the code as well so all you have to do is once you have the chart that you want you can literally just copy the code that it gives you and it provides a very nice option okay so with this bar chart so now I configured some of the things I'm going to keep the y-axis and the grid and we're going to remove the label as we just did prior but we're going to go in and we're just going to copy this piece of code so we're just going to go down and we're going to copy this entire thing so we're going to go to our code and we're going to create a new file we're going to call it bar chart jsx and we're going to create it in the components folder and the reason why we're not putting the scenes folder as of yet is that bar chart is going to be used in two locations which is the main page which is on the dashboard and it's also going to be used in a separate page itself so it's being shared through multiple locations and that's why we're putting in the components folder so now I'm going to create a component called const bar chart and we're going to do export default bar chart like so and I'm going to return well I just import it or what I just copied and what I'm going to do is I'm going to make some imports as well because we're going to need it we're going to use use theme from Material UI and then we're going to import responsive bar from Nevo bar and then import tokens as well and finally we are going to import the mock bar data as data from the data file that we copied earlier so now this data gets passed into this data and where I got the original piece of data was from here on Nevo so you can just go down copy their example data if you wanted to but I have the data copied in here to keep it both neat and I made some modifications to some of the data so feel free if you want to change the data but I'm going to be using the example data so we don't waste more time just by tweaking the data itself and then from here I'm going to pass in a few things const theme equals use theme like so we're going to pass in colors as well as we normally do we're going to save that and if you take a look if we save this some of the theme will not be correctly themed with our app so if you take a look this is all white color this is the final app these are white colored on the back black round but if you take a look at these charts these are kind of darker colors so it wouldn't stand out so there's a way to change some of the theme and the coloring as well so the way we do that is that we go down to the theme section and we go and it says please have a look at the dedicated guide and you open that up and you can see that this is how you're going to be able to change some of the theme objects so if you take a look at the steam object you can modify whatever params that you need for each element in question to change the colors so I'm not going to copy and paste this entire thing but I played around and made some of the color changes as needed so if I go here I can add a property called theme and pass in an object and here we're going to put axis and we're going to say domain I'm going to say line and we're going to say stroke colors dot Gray 100. and then on the following line we're going to say Legend and we're going to say text fill colors dot Gray 100. and then from here we're going to say ticks is going to be line stroke colors dot gray 100 and we're going to say stroke width is going to be 1. and we're going to say text fill colors dot Gray 100. and then finally on the same level as the axis we're going to say Legends and we're going to pass in text fill colors duck gray 100. so basically if you notice what I'm doing I'm basically targeting a lot of different things basically line Legend ticks and some other elements and we're going to say they're going to be colors gray of 100 so they're just a lighter color if it's on the back black background that's all I'm doing and from here I'm going to create a folder called bar in the scenes and we're going to create a new file called index.jsx now I'm going to pass in the bar chart over here so we're going to start with importing a box from Material UI and we're going to import Heather from actually let's yeah let's use intellisense to get that and we're going to import bar chart as well and we're going to call this component bar and we're going to do export default bar and all we're going to do is we're going to have a return and we're going to say box and we're going to sit do margin box of or sorry margin of 20 pixel and we're going to pass in Heather with title of bar chart I'm going to say subtitle of simple bar chart and we're going to say box and give it a height of 75 viewport height and finally we can pass in bar and we're going to go to our app we're going to uncomment this out same with the bar up here now for that let's give it a test so let's go to our website and we're gonna go to bar chart and as you can see we can see our beautiful bar chart in this location perfect now there's one more thing I want to do is we're going to go to our bar chart and I'm going to make this reusable and we're going to give this an is dashboard property so in the case that we're using the dashboard or if we're using the bar chart in the dashboard section we want to make some modifications to some of the visuals because it's a smaller bar chart we want to change a few things so I'm going to manually do this so we're going to go to the axis bottom and I want to change the legend just FY the reason why I'm doing this is because in the dashboard there's less space so we're not going to have as much space for example like the legend so we're going to add this here we're going to do the same thing for food and let me check if there's anything else I think that's pretty much it so that should be good for the dashboard all right I'm going to close everything real quick next chart that we're going to create will be the pie chart so we're going to go back to the nivo website we're going to go here we're going to look for the pie chart which is on the far left and we're going to open this up for this I'm not going to really do any changes I like the way it kind of looks so if I take a look this is pretty much the same oh the one thing I do not like is having the labels there so let's look for that Arc labels yeah there you go so you can remove those Arc labels you can also remove this text if you wanted to and change up some of those things but this is perfectly fine so what we're going to do is we're going to go here and copy all the code and we're going to go and create a new file and we're going to call this Pi chart jsx and I'm going to create const pi equals Arrow function and we're going to return and paste in all the code we just wrote and do export default pi actually this should be pie chart and we're going to do some imports and we're going to import responsive PI from nivo and then we're going to import tokens let's actually go back to bar chart we're going to copy the tokens as well as well as a theme so we're going to copy this and we're going to copy the use theme because they're going to be the same and finally we're going to import Mach pi data and we're going to call this as data and again the data exists on the chart so we can copy this but I have the data in this mock data in this case I didn't modify it but sometimes you could just modify the data if you wanted to and what I'm going to do is I'm going to go here copy the theme and colors again so we have some consistency and next let me save that and the next thing I want to do is I'm going to add theme and I'm going to pass in axis with domain align of stroke colors Gray 100. I'm going to copy this because I'm going to be using this again so we're going to go to axis then we're going to add Legend on the same level as domain pass in text fill paste in what I copied same with ticks I'm going to do line stroke paste in stroke width of one text is going to be fill of colors Gray 100. and on the same line of axis we're going to put Legends and we're going to say text fill paste it all that and then we're going to go to scenes we're going to create a new folder and we're going to call this pi pass in in index.jsx and we're going to basically do the same thing we did with the bar chart so which we could go to the bar scene copy and paste everything paste it here call this pi instead of bar and call this Pi chart removing all of these and call this pie chart simple pie chart as well and then we're going to get heather box everything should be pretty much the same so let's save that with that let's go to our app to uncomment this pie so you can see it so we go here we uncomment this out move this up we're going to go to our app and here we have our bar chart now if you take a look this color is kind of messed up so the color and the text I thought the theme would take care of it but if I go back to byte the pie chart we can actually change the text color right here and this is going to be called The Arc link labels text color so if I change this color you can see that it disappears so we're going to look for Arc link labels text color as the property for the pie chart so if I go down search that and now you can see we have this particular color so the color I'm going to put will be let's say Arc level okay yeah so if I put this I'm going to put colors dot Gray 100. now if you take a look at our chart we can see that the text color pops up and the last thing I don't like is about this is the all these like fills so you have some like diagonal lines here filling and some dots I like to be flat for this type of theme so I'm going to go into pie chart and you see the fill section this is where it determines what type how it fills those locations so if I delete all of that now we get a section where there's nothing now you don't have anything above it so that's perfect that's exactly what we want and perfect this is our pie chart so next step is going to be line chart so if we go back to navo go into the main page we're going to find the line chart and in this line chart we have a lot of straight lines for this but I want something that's more smoother so I'm going to go down I'm going to choose cat mole ROM for the Curve I also don't want the grids so I'm going to remove the grid and the Y as you can see and we're gonna basically copy this so this is exactly what I want so I'm going to copy and paste it into our code so I'm going to go down create a new component we're going to call this line chart Dot jsx and then from here I'm going to import a number of things responsive line remove that and we're going to import mock line data from there and I'm going to create the component don't worry I'll add the theme Imports as well but I want to create this first so I can copy this that I copied like that then I'm going to go to pie chart grab the two information right there with the tokens and use theme and copy the theme and colors as well so we're going to go down line charts and copy that and now also I forgot to export default line chart like so and so we're going to save it I'm going to add the theme like so I'm going to say axis is a domain of line stroke and we're going to say colors.gray 100. and like before we're going to copy that we're going to create Legend we're going to say text fill and pass in colors gray again and then to copy this and then we're going to go ticks and we're going to say line stroke colors dot gray 100 stroke width of one and we're going to say text is fill colors dot gray 100 and chances are we could probably we could have just copied the same theme as the prior ones but there's a few other things we want to change so we're going to say Legends text fill and we're also going to do tool tip we're going to say this container is going to be color and this one is actually going to be colors.primary instead five hundred like so okay and then before we go on I want to add the is dashboard because in this case we are going to be using this component on the dashboard as well so we need to make some modifications for that specific scenario so I'm going to add that property and I'm going to go down to the colors section actually the colors doesn't exist here we're actually going to add colors so when it is a dashboard I want to choose our own color scheme that we that I inputted and I'll show you what I mean by that otherwise we use the default scheme that we are seeing over here so basically in this case I'm using the scheme Nevo which if you go back to the Chart that's basically this theme so on the separate chart page we're going to have the default scheme but if we wanted our own custom colors I can go back and take a look at what I wrote in the mock data so let's go to the mock line data so basically I added my own color scheme right here tokens dark green accent tokens dark blue accent so I'm manually putting in colors for some of the data points and by doing so I can pass in colors and the color scheme over here this allows me to use my own particular color scheme otherwise we would default to the scheme that is provided to us by ignivo and then from here we're going to do in the legend we're going to have is dashboard we're going to say it's undefined again so we don't want the legend when it's on dashboard because of the limited space same with the axis left and then from here I want to change a few things so yes so on the dashboard there aren't not that much space so we want to reduce the number of tick values so if you take a look this is way too many ticks when you're on the main page so we're going to reduce the number of ticks and we do that by limiting The Tick value and actually sorry I made a mistake it should be an axis left side not the bottom the bottom is okay so we're going to keep it just like that oh and I forgot when you do maklan data I'm going to change this to as data so that we have the data aligned and then after that we're gonna go and create a new folder and we're going to call this line and we're going to pass in index.jsx and we're going to do the same thing like we've done before and that is we're going to import a few things actually let's go to Pi copy all of this and we're going to change everything again and we're going to say line chart change the pies to line same with the last so we're going to say line and the final thing we want to do is go to app.js we're gonna uncomment the line like so and we're going to save it let's take a look at what we have so if I go here this is our party chart we go down to our line chart and we have a nice looking line chart perfect this is exactly what we wanted all right and then finally let's do the last chart which is a geography chart so if you go to Nevo let's go back we can take a look and what we're looking for is chloropath so this is the geography map basically so this one is going to be the most confusing one to deal with but It's relatively simple once you know what to do so instead of doing any kind of changes we're just going to copy it straight up like so right here copy all of this and we're going to go to our file create a new component we're going to call this geography chart jsx actually let me close up all these tabs so it's not cluttering it up and I'm going to say const geography chart and pass it in I'm going to say export default geography chart I'm going to say return and I'm just going to copy and paste what we just placed and I'm going to import what we normally do with let's go to pie chart let's copy this tokens and then we're also going to import the theme and colors just like we did in the other charts and then we're going to go and we're going to import responsive chloropath and now the one thing about the geography chart is that if you want to use this type of chart with the whole Global World you have to pass an array of features as mentioned for example the Geo map chart so this is the base component that is used for creating a geography chart just like this however you need to pass this example file if you go here please note that because the feature file is pretty huge it's not included in generated code so you can find the file used for this example here so basically it takes you to this page and if you look at you click the Raw it'll take some time it's going to give you this gigantic file so basically what you would have to do is you copy and you go to file just like this one and you paste it and but I already created this so if you already copied it this is perfect so basically I copied and pasted into here as Geo features and what you're supposed to do over here in the features section all you have to do is pass in the Geo features that we just copied and pass in features just like that so I imported everything that was copied over and I set that as the features section and that is how this would work and the last thing is we need to actually pass the data as well so don't get confused that this is not the data this is part of setting up a geography data map set whereas this is the actual data that we are giving it to so we're going to go geography data as data from data slash mock data and then from here we should have majority of what we need but there's a few things I want to change manually and the reason why I'm changing manually because it doesn't there's no option in the documentation to change some of these things but first thing I want to do is add the theme so I'm going to go to pie chart I'm just going to copy the theme over here because most of it is going to be the same but let's see line stroke this should be the same ticks is going to be the same text is going to be the same Legends okay so this is perfect this is actually everything we need so they're exactly the same and then from here I'm going to make some adjustments I'm going to delete these colors so this is a color scheme that it provides you but it looks very nice if you just delete it and a perfectly matched up with what I wanted so I save that and I'm going to remove a lot of the definitions which is all the highlighting and fills we don't need any of this so we just have like a flat like colors and then from here I'm going to create the is dashboard version as well because this one requires some adjustments as well we don't want the legend to be showing because of how little space we have on the dashboard and also the projection scale so when you look back on the chloropath chart you can take a look and the problem is when you take a look at the projection scale it determines how close in and how zoomed in you are using and because the charts are different sizes for those different pages they don't translate as well if you use both of them so we're going to have to use is dashboard to change some of that stuff so we're going to say since the projection scale is not there we're going to write projection scale and we're going to say is dashboard give it a 40 and 150. if it is dashboard it's going to be 40 if it's not it's going to be 150. and we're also going to change the projection translation so it also moves left or right or top and bottom and we're going to say if it is dashboard we're going to say it's 0.49 0.6 and then we're also going to do 0.5 if it's not and these are all just numbers I tested on my own so you can take it you can change it as you want to we're going to set the Border width of 1.5 and we don't need graticule so we're just going to remove that and the last thing is we're going to make the legends undefined if it's not the dashboard so what I'm going to do here is I'm gonna enter and put the space over here before the array very careful with the syntax here like that and what I'm going to do is I'm going to say if it's not the dashboard we are going to have a legend of this default value so like that I think I misaligned this so this closes this this closes that and that is that's actually correct and then so we're going to say it's undefined if you don't have anything so now if it is dashboard then it's going to be undefined so there's going to be no Legend if there's no dashboard otherwise we're going to set this and let's just double check let me double check everything I got this correct his name value format border color a border color should be white so it's going to be zero zero zero or sorry FFF that and that should be good to go I'm going to save that now we're going to create in the scene we're going to create a new folder call it geography pass in index.jsx go to our pie chart copy everything or pi basically that the separate Pi page we're going to go to the geography page paste that in and we're going to change everything we'll call this geography chart same with over here copy all of that and say geography and hit save and then from here we're going to do the final thing is we're going to uncomment geography at the top uncomment this out as well and once we have that let's take a look at what we have and we have our geography chart perfect there's one thing I wanted to add is going to be the Border because the elements right here it doesn't end up nicely so we're going to add the Border and also the legend color is kind of messed up so I'm going to go over here did you have a good chart and I'm going to change the item text color so this should be colors dot Gray 100 . we're going to go to item text color here on Hover as well we're going to set this to completely White and also I'm going to go to index.jsx and I'm going to add a border here so let's take a look okay so border is going to be one pixel solid I'm gonna say colors dot Gray 100 so this is a shorthand for the butter border and we're going to say border radius of 4 pixel and that should do the trick oh colors is not defined so I need to add the colors here so we're going to do we normally do we're going to copy the tokens and use theme as well and as well as the hooks that are needed and now we should have oh and we cannot resolve the theme so this is in a different location so we need to add two more dots and the Slash and I believe that should work perfect and there you go we have our perfect geography chart having done that we have one last page that we need to finish which is the dashboard so this is going to be the most dense page out of that but we now have all the elements that we need we have the line chart the bar chart and the Geo chart and these circles they're not the pie chart by the way they're just its own CSS so this is an indicator built in CSS and including we have also the stat boxes right here so what we're going to do is we're going to start by building these little progress circles I'll call them and these stat boxes because we are going to be reusing those components and they're pretty common on this page so we're going to have that as separate components so we're first going to create a Progress Circle and call it jsx and in here we're going to import a few items box use theme from at mui material and then we're going to import tokens from slash theme we're going to say const Progress Circle and we're going to give it some params with progress of default of 0.75 so 75 percent and we're going to say a size of 40 as the default size oops I kind of messed that up and we're going to export default progress circle like so and I'm going to do our normal theme use theme like so cons colors equals tokens theme dot palette dot mode and we're also going to set the angle so the angle will be how much of the progress we have so a little bit of mass but you do progress times 360. so that determines the angle at which the circle should be so we take the progress for example 75 percent so you do 0.75 times 360 that gives you the angle that it should progress to and we're going to return a box and this box is actually going to be self-closing because all we need to do is apply some Styles so we're going to say SX we're doing SX to make it a little more cleaner in this case so we're going to say background and say radial Dash gradient and we're going to pass in colors.primary 400. I'm going to go to the next space and we're going to say 55 percent transparent oops transparent 56 percent as well so this oh I messed up so if you look at this friends closing prints remove that this parens should close the rate up gradient so we're creating a radial gradient on the first section and what it's going to do we're going to set the background as conic gradient as the next line we're going to set transparent zero degrees and we're going to set angle and see degrees and we're going to say colors.blue accent 500. and finally we're going to say angle degrees in angle degree 360 degree so now I'm not going to go too much in depth in what's happening over here but basically what this is doing is basically we're creating radial gradients and we're kind of just modifying it so it looks like a Progress Circle and we're taking a conic gradient setting it from transparent at the beginning of the angle or from 0 to the angle we specified and we're going to set the color to Blue accent from the desired angle to the rest of the 360. so this determines how much progress we are showing and it shows the color that we want to set those two and then we're also going to set colors dot green accent as the end color and let me move this tick to the bottom right here so you can look this up this is a way this is a very simple way to create a Progress Circle with just CSS by itself and then what we're going to do is connect a border radius of 50 so it becomes a circle and we're going to set the width of a size that we specified and pixel like that and we're going to copy this we're going to set the same thing for the height and that should be our Progress Circle so don't worry if you don't get this but this is just a specific way to create progress circles there's multiple ways to do this but this is the very simplest one to do so and the next component that we're going to create is going to be the stat box and in the stat box we're gonna basically copy many of the things that we used and we're just going to add typography and also we're going to import Progress Circle from what we just created and we're going to create the stat box so the stat box includes that entire box I showed you earlier and this is going to take a title subtitle icon progress and the increase in percentage and we're going to do theme equals use theme like we normally do const colors tokens theme dot palette dot mode and we're going to return a box and this box is going to have so this is a lot of just layout stuff so I'm just going to Breeze through so this is a lot of like tedious CSS and layout kind of stuff so we're just going to Breeze through this so we're going to have a margin of left and right as well we're going to set a box that has a display of flex with justify content and we're going to say space between and we're going to say box and we're going to pass in icon and we're going to say typography will be right underneath and we're going to say variant of H4 with font weight of Bolt and an SX of color with colors dot Gray 100. we're going to close the typography tag and pass in the title and then we're gonna place in another box and pass in our Progress Circle here and we can pass in the progress variable in there and then we're going to add another box below that and this is going to be the subtitle and the increase in percentage and so if I go over here say display I'm just going to copy this justify content space between right here and then from here I'm going to copy the typography I created earlier with some modifications say a variant of H5 we're going to remove the font weight we're going to say SX colors green accent instead to make a different color and we're going to pass in sub title instead and the last thing is we're going to copy the title again and pass it below to have variant of H5 font style of italic oops let me quote that and say colors green accent of 600 in this case and this one is going to show The increased percentage oops increase yeah and then we're also going to export default stat box with that now we can finally do and work on our dashboard so let's close everything we're just going to open up dashboard component and from here we're going to import a lot of different things so we're going to import button icon button typography and use theme all for material UI then we're going to import tokens from the theme we're going to import mock transactions from our data com our data file data mock data we're going to import a number of icons mui icons material I'm going to say download slash download outlined and we're just going to copy and paste this and just modify it we need five icons so we're going to say download that should be email and it should not be outlined in this case then we go to download outlined and we're going to say this should be point of sale then we have person add and then finally we have traffic and then we're also going to import all the charts that we have created for the dashboard so import line chart from and it should be oh it needs to go one level higher components slash slash line chart and we're going to copy and paste it for three different charts so bar chart geography chart and actually let's create two more of these and we're going to import that box and Progress Circle and that should be all our Imports and then we're going to also pass in const theme equals use theme and const colors equals tokens theme dot palette dot mode like we normally do and from here now we can start adding what we need so we have our display Flex space between Justified content so we're going to add the download reports button right here so we're going to say button and in the button we're going to add some styling so SX equals background color s.blue accent of 700 color of colors dot Gray 100 font size of 14 pixel font weight I forget a comma so font weight of bold padding of 10 pixel and 20 pixel so we're going to save that we're going to go down into our button and we're going to give it a download outline icon SX is equal to margin right of 10 pixel and have that as a self-closing tag and we're going to say download reports so that should take care of the button on the left the right side so that should be there and then from here we're going to go to the next line and this is where we're going to have all the grid and the charts so we're using Flex or not Flex we're using charts or is it a grid system so if you take a look this is the final product so what we can do is we can take a look let's bring up this class so if you take a look this is the grid that we have set up I'm going to click this grid button on the HTML and you can see the grid that we have as a layout so the grid system that I'm using is I'm using a grid system of 12 in this case and the height of each one is going to be a 140 pixel and the gap between each item is going to be 20 pixel so if you take a look we're splitting it into 12 components so if I remove this this first one is going to be a span of three three versus this one which will be a span of let's say three six nine so this will be a nine and this will be I believe four yeah this is four and then again this will be four four so we have a system of grid template columns repeated 12 times with one fractional unit so meaning it takes up one fractional space and the grid system mix is very convenient and easy to use because we can just use something called span on each element to determine the grid so with having that said let's create the Box and we're going to paste display of grid of grid and say grid template columns and we're going to say that's a repeat 12 with one fractional unit for each space we're going to give it grid Auto rows and we're going to set that to 140 pixel and give it a gap of 20 pixel and that should do the trick next thing we're going to do is we're going to do Row one we're going to have that as a comment and we're going to say box is going to be a grid column of span 3. so that determines how big it is and we're going to say background color of colors dot primary 400. and we're going to say this is a display of flex we're going to do align items as Center and we're going to say justify content of Center and then we're also going to put the stat box we created we're going to say stat box and we're going to say title is equal to 12 361. this is just a random value so we're going to say subtitle is equal to emails sent then the progress is going to be 0.75 the increase is going to be orders plus plus 14 percent and we're going to say icon is going to be email icon so and we're going to say SX is equal to color s.green accent 600. and we're going to give it the font size of 26 pixel so now this box could could have been part of the stat box instead but I decided to have the box so we can see the grid column in this component itself so we don't have a grid column directly on the stat box it's just more my preference kind of thing even though the component this component will get longer so I'm just going to copy and paste the entire thing and all we're going to do from here is going to be changing the values so here this one's going to be four three one two two five and we're going to say sales obtained we're going to say 0.5 for the progress in plus 21 percent we're going to copy and paste another one I'm going to say three two four four one give it a nice subtitle of new clients progress is going to be 30. and plus five percent and one last one this is going to be one million three two five one three four say traffic traffic inbound and progress is going to be 0.80 increase of 43 percent oh I've missed that the icons have not been changing so traffic icon over here this should be person add icon and point of sale icon and let me make sure everything's correct email point of sale person add traffic so that's perfect and then from here we have the box so we want this to be on the next line and so from here we're going to say this is row row two let's see if it's working so let's go to our page and as you can see we have everything some of the alignment is incorrect so let's actually fix that it seems like I messed up some of the flex options so let's let's go back and what I've noticed is that this box is not around the right container so move this box on line 24. I'm going to move it down to 40. so now that should be aligned correctly so now we gotta fix the stat box so let's go to the stat box and what we're going to do is we're going to go to where this starts line 11 so this box is being closed around the entire thing but it should be placed below line 24 so if we close that correctly so now we have the stat box correctly aligned and then from here let's go to the dashboard once again and scroll down we're going to go to row two and then from here we're going to start by creating a box and we're going to say grid column and it's going to span eight sections so this is going to be the line chart we're going to have a grid row and that's going to span 2 height now if you take a look over here again so this spans two height this spans eight from left to right so there we're going to have something that fits that section and then we have background color and we're going to say colors Dot primary 400 and inside this box we're going to say box I'm going to give it a margin top of 25 pixel padding of 0 and 30 pixel display of flex justify content space between and we're going to align items Center and then from here this will be just like the header of the line graph so we're going to say box we're going to give this a typography with a variant of H5 and font weight of 600. with the color of colors dot Gray colors.gray 100 and we have a typo there I'm going to say Revenue generated and on the following line we're going to copy paste this with some modifications we're going to say H3 font weight of 500 instead green accent as a color and we're going to say 500. and this should be 59 342 32. so that takes care of the Heather let's save it it'll Auto format and then we're going to add another box and we're going to give it an icon button and we're going to say download outlined icon and give it an SX of font size 26 pixel and give it a color of colors.grain accent 500. and then below all this actually we should 163 so it should be on the next line after this enclosing so we're going to say this will have a box and this is going to have the line chart and we're going to say is dashboard and this time it's going to be true and the box is going to have a height of 250 pixel margin of negative 20 pixel actually a margin left of negative 20 pixels so this is kind of a hack but we want to move the line chart to the left because it's a little aligned incorrectly so if I go to our page we have we have our chart now the spacing is a little messed up so let me see what the issue is okay so this will most likely be fixed once we get to the next section which is the next box where it has all the transaction list so we're going to create a box close that and let's actually comment this should be transactions just so we know where we're at so we're going to say grid column is going to be span of four grid row is going to be span of two I'm going to say background color is going to be colors.primary 400 and we're going to say overflow Auto and inside this transaction we're going to say box give it of display of flex justify content space between align items it's going to be Center and we're going to say border bottom and we're going to give it four pixel solid and colors dot primary 500. and then we're going to say colors equals colors dot gray 100 padding of 15. pixel let's save that and go back we're going to look at this and we're going to give it a typography and we're going to say recent transactions and we're going to say color is equal to colors.gray 100 give it a variant of H5 and the font weight of 600. okay let me double check this correct variant H5 font wait 600 we have recent transactions perfect and then from here we're going to go to the next line and we're going to say mock we're going to cycle through or map through our mock transactions that we imported from our data file transaction with an index and what we're going to do we're going to create an arrow function and create this own box here so inside this box we're going to close this and we're going to give it a number of things so we're going to give the key and say transaction transaction Dot txid Dash I then we're going to say display of flex justify content of space between align items of Center order bottom and we're going to give it the same we're going to copy and paste this right here and a padding of 15 pixels so exactly the same as before and we're going to copy the typography so inside this box we're going to have another box and we're going to close this so it seems like sometimes when you're in a mapped array and you're writing this the intellisense doesn't detect to close the elements so that's why I'm doing it manually so over here we have the typography we're going to say I copied this and I'm going to change this to green accent and we're going to say this is 500. variant is going to be H5 this is going to be transaction dot TX ID and then we're going to copy and paste this one more time this one will be simpler so we're just going to remove variant and the font weight we're going to say colors is going to be Gray 100 and the transaction should get a property of user below this box we're going to have another box and we're going to say this is the transaction transaction dot date and we're going to give it a color and I'm going to say colors.gray 100. and the final box I know this is quite long but we're almost there so let's make sure we close that we're going to say background color equals colors.green accent and say 500 and we're going to say padding equals 5 pixel top and bottom 10 pixel left and right and then border radius of 4. pixel and we're going to give it a transaction cost value and let's take a look ah we have it it's just not aligned correctly okay I realized there's a there's a bit of a mistake that I've done and so let me fix some of that so on line 178 line T items I messed that up but that's not our problem right now my problem that I did was that this box should be ending right here on 167 but the transaction section was included so what I'm going to do is let's look at this carefully line 42 this ends all the way online two two three so we're just going to remove that and we're going to move it up where the transactions starts so let's add that so if we do that this these two now are aligned correctly so again moving one of the closing tags down on two two I believe it was two two one and then we move it to 167 and that is going to close it and also the margin left right here was incorrect so that's why the alignment is incorrect here so we're going to say that's margin two our margin top on line 164 4 above the line chart and the last thing I want to say is line 149 this says font weight of 500 but this should be actually bold so we go back and now we have everything fixed this text is correct these two are aligned correctly the heights are properly aligned so now we have row number two correctly done and only let's go down to row three so right below where you have the double print and bracket and the box below it this is where we can put Row three so I know by the way if I had more time or if we wanted to spend more time you would separate out each row into their own components so you don't have such a long component file to deal with but for the sake of brevity and time we're not going to do that so in row three we're going to create box and we're going to say this is grid column of span 4. and grid row of span 2. we're going to say background color is equal to Colors dot primary 400. and we're going to give it a padding of 30 pixel and like before we're going to do typography and we're going to say variant H5 font weight of 600 and give it a text of a campaign and on the next line we're going to say we have a box this is going to have display of flex with the flex direction of column we're going to align items to Center we're going to say margin top of 25 pixel and in this we're going to say Progress Circle and this is going to have a size of 125 and since the default is 75 that's exactly what we want and we're going to say typography we're going to say variant of H5 with color of colors.green accent 500 let me lowercase to C and we're going to say SX is equal to margin top of 15 pixel and inside this typography component we're going to say 48 352. revenue generated and then I'm going to copy the typography of the campaign and below we're going to say includes extra miscellaneous expenditures and costs we're going to move all of these properties and this gives us the first the first box that we need and I'm going to go and just actually just going to copy this entire guy and actually let me let me create a comment and just just so we can separate that this is the final boxes to close so Row three is going to include another section and we're just going to copy all of this now the padding doesn't need to be 30 pixel for this one and then we're going to say this one is going to be sales quantity and we're going to say variant H5 font weight 600 we're also going to give it a padding of 30 pixel at the top 30 pixel to the right zero at the bottom 30 pixel to the left and then right here you can actually just remove majority of this and we're going to say box is going to have a height of 250 pixel and the margin top is going to be negative 20 pixel and inside this box we're going to have a bar chart and we're going to say is dashboard is true and then we're going to copy this one last time for the last box and this is going to be for the geography one so span four we're going to have a padding of 30 pixel variant H5 we're going to give it a margin bottom of 15 pixel and we're going to say geography based traffic and the last box is going to have a height of 200 pixel and we're going to say this is geography chart and let's see how this worked and there you go we finally have our complete dashboard everything's perfect so now we have light mode manage team invoices all the tables profile form with the Calendar app FAQ bar chart pie chart line chart and geography chart perfect there you go there's our final dashboard we finished everything from start to finish with all these different packages you used Enterprise and production level applications and packages we are using what you would use for work I've used material UI for work I've used nivo charts before I've done data grid and all of these packages are amazing examples of things that you can customize for your production level application and they can be used for work and be put on your portfolio as a resume buffer now if you look at this we went through building this dashboard with all these charts and Integrations and styling established and then we went to these data grid tables we have different variations of them then we went and wrote used formic to create our form with validation we use the full calendar package with all the calendar application and functionality then we looked at the FAQ page with the react or material UI accordion then we looked at the bar charts pie charts line charts geography charts from the Nevo package and we also themed everything with light and dark mode and we created the react Pro sidebar with a lot of sidebar collapsing and functionality we've done a lot and you have done a great job if you're following this to the T Vlad you finished this with me there are a few things in the future that you can Implement there are a few buttons that we did not get to with notifications we could add settings we can have a profile user page if you wanted you can do search we can also make this responsive it's not as responsive as we would like but for the sake of brevity I did not include that but if you want to you can add that to be fully more featured but you have done everything I'm so glad that you stuck with me through this entire entire application and I hope you guys learned a lot now if you enjoyed this content please please like And subscribe I hope you stay subscribed for my future videos I'm going to be continually building a lot of these applications and I hope you stick it with me see you next time

Channel: EdRoh

Views: 782,054

Keywords: EdRoh

Id: wYpCWwD1oz0

Length: 244min 25sec (14665 seconds)

Published: Wed Oct 12 2022