Build a React Admin Dashboard App | Next.js 13, Tailwind CSS, Material UI, Kanban & Dark Mode

hey everyone and welcome back to a new video so in this particular video we are going to create this awesome looking admin dashboard from scratch we are going to use react JS nexj 13 TN CSS material UI and there are lot of functionality so you can see that this will be our homepage and this full project will be fully responsive so let's see what exactly we are going to build so here we'll be having some cards all right then we'll be having a charts now how we are going to create for each and every section we'll be having a different section so let's start with this charts page so here basically we will be having all the charts so now we'll be creating bar chart line chart pie chart stack chart area chart and the mix chart now obviously one thing I want to mention this is a static website so I will be creating a part two for this particular project in that section I will be creating the back end and then we'll combine and this will be full St project the reason why I I'm only creating the front end part in this particular video or else this video will be very long so here in this chart section we will be basically having all the charts and based on that whatever you want to include in your dashboard those chart you can basically add in your dashboard page let's go to the task page so here basically we'll be having all the task now whatever task we will be adding here that will be reflected in our Conan board so let's see I'll just add another one so let's say working every day if I now add this one here for now we will be storing this one in our storage if I now go to board you'll see that working every day will be reflected here if I now try to move this one to 2o section this will be movable if I now refresh this we will be basically getting the updated data from our storage so you can see that we are getting the data here if I now try to move this one to done State now refresh this so you can see that we will be basically getting the updated data here if I now try to go to the dashboard page the same data will be reflected here so you can see that we'll be having the same thing here if I now try to move this on to unassigned let's go to our board see this is reflected here now let's go to our report section so here we will be having all the reports you will be able to create a new report so let's I'll go here let's create a new one I'll give some value here and we will be able to select from our task so let's I'll select the last one add a new report this is added if I now try to go to the dashboard page you can see that this will be reflected here so you can see that this data is reflected so this is exactly what we are going to build this here also will'll be able to toggle between light to dark theme and the vice versa so if I click here you can see that this is a light view all right this is the task page this is the Conan board page and the chart page let's go to our dashboard if I now try to open this one in a mobile view you can see that this is fully responsive okay so you'll be having this uh icon here so let's move this one on the right section so on click of that you can see that this will be basically the sidebar will toggle and this is fully responsive you can see that here okay all the charts and everything and there are lot of things uh that we are going to build and you can see that if I move to the larger section this is fully responsive now we are getting the sideboard here so this is exactly what we are going to build if you like this particular video I'm requesting everyone to please like my videos comment down and also please subscribe to my channel because if you subscribe then only I'll get like so much inspiration and this will basically inspire me to create more videos all right my actually Target is to complete at least 10K subscriber and also thank you all for your support let's get started and we are going to create this awesome uh admin dashboard from scratch so in the next part we are going to first installing all the packages that we need and after that we will be start creating our charts component so let's get started and good luck hey everyone and welcome back so you can see that I already created one project and here what I have done I just added some of the Tailwind CSS config that we need so basically here in the extend section you can see that we are having some font family box Shadow and the background image then there are some screens resolutions some colors that we are going to use in this uh application now before that one very important thing what we need to do we have to install all the packages that we are going to use in this particular project so let's do one thing let's open another terminal so I'm going to install all the packages that we need so the first thing is that we will start with installing so you're going to use material UI table so you have to install the material UI package so for this one we'll do at theate emotion SL react then we also need at theate emotion SL styled after that we need mui SL material then also we are going to use mu/ x data grid next we need the chart Library so for the charts we are going to use this react appex charts we also need next themes now this is another uh uh package that we are going to use to implement the light and dark theme what else we need we also need the drag and drop package and for this one we are going to use this DND kit so this is a very famous package so DND kit SL core also we going to use react icons and also we'll use this Tailwind CSS hyphen RTL so this is another package that we are going to use use for now I think this is fine so now let's hit enter and install all the packages and then the first thing what we are going to do we will be start working on the main layout page creation the global context creation next theme provider creation and after that we'll be start working on the sidebar and the nabbar component so let's wait for some time all right everyone so the installation is now completed so let's do one thing let's start creating our context so for this one inside this Source I'll create another folder and let's uh give this on name as context and let's create index.js so here we'll do use client so first we're going to create our context so this will be export const Global context and we'll do create context of null then we'll do export default function we'll do Global state which will receive the children components and we are going to return Global context. provider and we are going to pass the children here for now as a value we'll pass this one as Mt object all right so now I think this is fine now we have to use this one on the global level so let's go to our layout so this is our main Global layout and here what we can do we can simply import that Global State component so this will be Global State and we're going to pass this children so this is First Step that we need next what we need to create we have to create the theme provider now for this one we already use this next theme package so what we can do here inside source I'll create another folder and let's give this one name as theme provider and here we'll do index.js so here also you have to do use client and then we are going to first we'll do export default function and this will be let's give this on name as next theme provider this is also will receive the children as a prop and here what we are going to do we going to return return theme provider so this theme provider we're going to import from next theme and here we are going to pass this children now here also we need to do another thing so we'll import the react so we import Star as react from react all right now here we have to pass certain properties so the first thing we'll pass attribute which will be class also we are going to use default theme so we use the dark as a default theme and also we'll do enable system as false all right let's format this now next thing what we are going to do so we have to use this one in our main Global layout again so you can go here then inside this tree we can simply uh import this next theme provider and then you can pass the children here that's it so these are the two important step that we need to do so now let's do one I think I already run this one here so you can see that we are getting some error so let me just rerun this so I'll just rerun this project again because I I think that we already installed this T in package we'll do npm run div let me just reconfirm once to go to package.json so we have TN CSS RTL all right so this is fine now what is the next step that we need to do so first thing we are going to create our so again we are getting some error all right so now this is fine awesome all right so the first thing we are going to start with creating our main common layout component all right now common layout basically what I'm trying to say so on the left side we are having the sidebar and on the uh top we'll be having the header and then in this section we'll be having the main component correct so this header and the sidebar will be always common so that is the reason we are going to create a common layout so that it will be easy to manage so let's do one thing so here we'll go and then we are going to create another folder inside this source and I'll give this our name as components so we'll be creating all the components here so first we'll start with our common layout and inside this we'll create index.js let's close everything else now here we are going to use the hooks so you have to create this one as a client component so we'll do this one as a export default function this will be common layout this will receive the children as a prop and here what we going to return so we'll be returning our jsx here so we'll take a div let's take a class name here so we'll do Flex height of full width of full we'll do here BG background 100 and for dark we'll do BG background 900 now here for now I'll take this one as a sidebar so this will be our sidebar component all right so we'll be creating this component here and uh let's do one thing let's quickly create this so we'll create another folder this will be sidebar and we'll do index.js so here we do use client so this will export default function sidebar and we are going to return here div and this is is our sidebar and let's import it here so we're going to import sidebar that's it next we'll take another div we'll take a class name we'll do height of full width of full we'll do font DM we'll do dark BG Navy 900 all right inside this we're going to take our main now here what we'll do we'll take a class name for this one also so let's take a class name so we'll do MX of 2.5 we'll do Flex none we'll do Transition all for dark we're going to do BG Navy 900 for MD we are going to do PR which is padding right of two and then for Excel we are going to do margin left of 323 PX inside this we'll take another div and here we are going to import our header component so here uh we'll create our another component so let's give this name as header and we'll create index.js so this will be again a client component so it will do export default function this is header and we'll return here div and this will be header so here we are going to import this header component and now we'll be rendering the children so here we'll be having the main children and here we'll take a class name so we'll do AMX of Auto we'll do mean height screen P of 2 we'll do a a padding top of important so we'll do a 10 PX and also we'll do MD P of2 all right so this is done so this is about our common layout so now this one we need to use your main layout so again can go here then what you can do you can simply import this common layout here and you can pass this children if I now format this save it let's see so you can see that we are already getting the color here so here we are getting header and this is our here we are having sidew bar and this is our main uh component so this is uh basically will basically change based on different different round this uh content here all right so now what is the next step so next step let's do one thing let's quickly start on this sidebar component first and the header once these both are finished then we will be start working on the creating all the charts first all right so there are a lot of things to do let's start working on the sidebar component all right everyone so let's start working on the sidebar component but before that one thing I want to mention so what I have done I created another folder here inside source so this is a u folder and inside this I having some of the routes that we'll be having so we having this dashboard reports page task Conan and also charts so these are all the routes that we are going to use and for each and every route we having the name layout and the icon that we are going to use now all the icons are imported from react icons now the reason why I'm not writing all of these because obviously this will take a lot of time all right so now let's start working on the sidew component so we'll go here and then let's close everything else so the first thing what we going to do I'll remove this from here so we'll take a div now here let's take a class name now here what we are going to do another thing we'll open our context and we going to create our first state here so the first will be const open sidebar set open sidew so we're going to take this one as small and this will be use state of false and this one we're going to pass it here all right so now here we are going to import it so you import this one using use context and then we'll pass our context which is global context all right now here we have to take the class name so the first we'll start with we'll do ASM none we'll do a duration of one let's make this one as 200 then we'll do this one as linear or let's make this one as fixed we'll do a j index of uh we'll do a 50 and this will be important we'll do a flex we'll do mean height full we'll do Flex column then we'll do BG white all right PB of 10 we'll do a shadow of 2 XL we'll do a sadow white and then uh what else we'll do a transition wall for dark we going to make this one as important so and this will be BG Navy 800 so this will be the background for dark we're going to make this one as text white for MD we are going to do J index of 50 for large also we'll do the same and this all will be important and for Excel we going to make Zed index of zero all right now here we going to take some condition sorry so here we'll take here we'll check if this open Side Bar if this is true so we'll do a uh translate X of0 or else we'll do minus translate X of 96 all right and for Excel we are going to do translate X of0 so this is fine now inside this what we're going to do we will take another span now here for this one we going to make a class name we'll do this one as absolute we'll do a write of four we'll do a top of four we'll do block cut S as pointer and for Excel we're going to make this one as hidden now here what we'll do so here we are going to use a icon so we'll import the icon from react icons slhi and this is hix so we going to use this one here so this will be hix and what we'll do on click of this icon we are going to make this set open sidebar as false all right now after this what we'll do we'll take another d leave here we'll take a class name so for this one we'll do a MX of 56 PX empty of 50 PX we'll do flex and we'll do item center now inside this we'll take another div so here we'll be having the text now the name of the website you can give any name you want I'll give this one as admin dashboard something like that here I'll give class name so we'll do mL of one Mt of 1 height of 2.5 we'll do text as uh 20px we'll do font bold we'll do text Navi 700 and for dark we're going to make text as white save it let's see what we getting all right so this is fine now next what we are going to do so after this we'll take another div here so here uh what we can do basically we can or let's take this one as a UL so we going to render all the routes and for this one we'll do a class name we'll do MB of Auto and we'll do pt of one padding top so here what we can do we can simply import the routes sorry this will be routes do map this will be route [Music] item and here we are going to return AI or let's return link because on click of that we are going to know you can definitely use here use router but you can uh use Link I think that is also better now here we have to give the href all right so for href it will go to the route item. layout all right also let's give a key so here what we can do we can simply give let's take a index or anything uh let's take index only because these routes are not going to change right so we can use the index so inside this what we'll do we'll take another div we'll take a class name so for this one we'll make this one as relative we'll do MB of three and uh we'll do flex and what else uh we'll make this one as on Hover we'll do cursor pointer now here we'll take a AI now here we'll do a class name so for this one we're going to do M of 3 PX we'll do Flex we'll do cursor pointer we'll do item Center and PX of 8 all right so inside this we'll take a span and we're going to render this route item do icon and here we are going to use a class name so for this one we'll do font medium and we'll do text Gray uh let's use 600 after this span we are going to take a paragraph and we are going to render this route item dot uh name all right so here we'll take a class name so we'll do here leading one font bold we'll do a text of uh we'll make this one as 20px we'll do mL of four we'll do Flex what else we'll do font medium and we'll do text Gray 600 sorry I think we are already using font bold here let's use Font medium only let's save it let's see what is happening all right so this is coming but here I think there are some issue let me just check what is the problem here oh we have to give we have to close this now I think this should work all right also let's keep some uh margin top on this uh UL so what we can do we can give a margin top of probably if I give 10 uh let's give 20 okay and also let's do another thing uh let's give a MX of 50 let's quickly check once I think we are using height Also let's remove this one from here all right so let's see so 42 we can give 42 here okay so I think now this is fine so this is fine so you have D dashboard reports task Gan and then charts so now let's uh start working on this header component header will be pretty simple we'll be having this header here for each and every individual page and on the right side we'll be having the uh the toggle icon to switch between light theme to Dark theme and the vice versa Also let's remove this page uh content from here we don't need so let's go to our main page.js and I'm going to remove all of these and here we'll take a main only and let's give this one as a dashboard all right so this is our dashboard page so let's start working on the header component so now I think we already created our component so this is our header so let's close everything else so what we going do uh so this will be a nav so we'll take a nav for this one we going to use a class name so what we can do we can make this one as a sticky we'll do top of Four J index of 40 we'll do Flex Flex row Flex wrap we'll do item Center justify between we'll do rounded XEL we'll do BG white divided by 10 we'll do p of 2 and we'll do a backdrop blur Excel all right and for dark uh what we'll do we'll use this BG color which will be 0 B 143 74d let's format this all right now inside this let's give enter so we'll take a div here and let's use a class name we'll do a mL of 6px and here we'll take a paragraph now for this one uh here what we are going to render we'll be rendering the current page so if I click click here it should go to the uh Slash dashboard and then if I click here it's go to the slash uh reports page uh something like that so for now I'll give this one a static value so later I'm going to change this one so this is my static name so here we're going to give a class name so for this one we'll use a text of 32 PX we'll do this one as capitalize we'll do text Navi we'll do 700 and for dark we're going to do text of white all right so after this p uh what we can do uh let's do one thing I think for now this is fine what else we can give so after this div we are going to take another div so on the right side we'll be having two things one will be the icon to toggle the theme and another one will be to open this uh side sorry open the side NE for the the mobile device right so we'll be having some kind of icon on click of that we'll be toggling this sidew bar here so for this div let's take a class name so we'll do this one as relative Flex we'll do margin top of 3px and we'll do this one as item Center justify end we'll do gap of four we'll do this one as rounded sorry gap of four we'll do rounded full we'll do BG white PX of 2 py of 2 sadow Xcel and we'll do for dark we're going to do BG Navi of 800 and for dark we're not going to use any Shadow so we do dark shadow we'll make this one as n none we'll do sad none all right and for Excel we going to do a gap of two so I think this is fine now inside this we'll take another span now here we are going to uh render the icon so for this one let's import this icons we do import something from react icons and this will be from fi and the icon name is f align sorry this will be fi align justify and this you're going to use here so this will be fi align justify and here we're going to use a class name of height of five width of five for this span also you're going to use a class name so we'll do this on as Flex uh or let's make this on as cursor pointer we'll do text of excel we'll do do text Gray 600 for dark we'll do text as white and for Excel we going to hide this one because for larger device we don't need to s that all right now next what else we need we also basically need the toggle icon so here will be toggle icon to toggle between Dark theme and the light theme so we'll take a class name here we'll do cursor pointer and we'll do text Gray of 600 all right now here what we are going to do basically we have to handle the uh switch from that light and the Dark theme so how we are going to do that so for this one we have to use something from the next theme package so import this theme and this set theme from this use theme hook this is from next themes so here we'll be able to basically check that if this is a d Dark theme so if the theme is equal to equal to dark so we'll render one icon or else we'll render a different icon so for this one we are going to import another from this package this is r and here we are going to use this r sun I think Sun fill and then we are having R Moon fill that's it so if this is dark so you're going to render r sun fill or else this will be R Moon fill and here we going to use a class name we'll do height of four width of four we'll do text Gray 600 and for dark we're going to do text of white and for this one also use the same that's it let's format this also now on click of this you have to handle that so we do on click and I'll create a method so here we'll do set theme so we'll do if the theme is equal toal to dark so we'll make this one as light theme or else this will be dark theme and this is pretty simple and now I think this is done let's save it let's see what you're getting so you're getting some static name but here we getting this icon if I now see click here see this is very very easy to do right this is now changing very easily now you notice one thing if I now go for the smaller devices see now this icon is coming here and if I now click here we have to open this right so that also you need to do so what we can do you can simply do const import from this use context of global context what is the name so the name is set open sidebar right so this will be set open sidebar and the open sidew bar so what we going do simply we can go here and let's take on click here so on click what we can do we can make this set open sidew bar is not equal to open sidew bar so we are basically toggling so now if I go here and click this see now this is opening and closing and also you have this one and this is working fine right let's make this one on the right side and now if I go for large device this is still coming and then if I go a little bit more more than 1200 see now this is hidden and we are seeing this one so this is working fine now this name we need to basically change based on this route name so this part we are going to do in the next part but for now this is fine now let's discuss the strategy how we are going to complete this so the first thing is that we'll do on the reverse because this dashboard is basically at the end will be the combination of all the pages so whatever charts we'll be having we'll be importing those in dashboard same for this Conan board then task and the reports another thing I already mentioned in the introductory video that's whatever data we'll be playing in this particular website that will be static data so that I already have created so you're not going to use much functionality so this basically will give you some of the idea how to work with chart and this how to implement this uh drag and drop functionality lot of uh lot of other things what I'll do in the next part of this particular project so there will be another part where I'll be creating the back end for this so now what will happen you can combine that and then you'll create a full stack the only reason I'm not creating in this particular project because the length will be very very big so that is the reason I'm dividing this one into uh two parts all right so now we'll start with these charts once we'll come complete all the charts will go to this task page once we'll complete this task function it will go to this Canan board we'll implement the drag and drop functionality then we'll go to the reports and after that in the dashboard page we'll be combine all of these and our work will be done so let's start working on this uh this function first and then after that we we start working this uh chart here all right so let's start creating all the pages so the first thing what I'm going to do I'll create all the pages uh at once so in inside app now we'll start with the dashboard so we'll do dashboard and uh inside this we'll create our or let's create all the folder first then we'll be having reports then we'll be having tasks then we'll be having Conan and also you'll be having charts so let's create page.js so here it will be export default function this will be three charts so we'll return here div and this will be charts let's save it now let's copy this and we paste it here here here and here so this will be our tasks and this will be tasks then we'll be having reports then this will be our reports this is our Conan board and this will be Conan then we'll be having dashboard so this will be our dashboard all right so now let's go back I'll see that if I now click here so going to the dashboard then you're having reports tasks Conan and then charts now what we need to do whenever we change this one we have to name this uh static name another thing if you noticed on this SL route we don't have anything so whenever we'll go to this SL route what we can do we can simply navigate the user to the dashboard page so for to do this one what we can do we can go to our common layout component and then uh we'll simply import the path name so this will be path name which will be use path name this will basically give you the current path name and here we can check if this path name is equal to equal to slash so we can simply return return the dashboard page or else we are going to return the children all right so now let's see what will happen if I now save this see now it's going to the dashboard page immediately if I go to reports this is fine this all are fine now if I now try to access this page it's immediately going to the dashboard page so this is what we want now what we need to do have to change this static name here this is also pretty simple so we going to go to our header and then we can import this path name again so this will be use path name and here uh so while we are doing this static name so this path name Will basically give you if I now in this reports it will give you the SL reports we can split this slash here and then we'll get this report name all right and then what we can see there are so many other way also you can do that but this is one of the way that we trying we are trying to achieve so what we going we simply do here path name do split so we split with this we'll take the first element and then we'll do two uppercase that's it now let's format this save it let's see so now we getting reports click here dashboard tasks con bur and charts if I now try to go to the SL route so it's going to this but in this case this is not happening now this is one very trick thing that we need to do so what we can do simply here we can do something like that so here we'll go and then we can check if the path name is equal toal to slash so we'll simply import this uh this will make this one as dashboard or else will be this now let's see so you're getting now dashboard if I click here this is dashboard reports and everything else is working fine if I try to go to the slash page so this will be same this theming is also working fine all right I think we we have done this one opposite I think now this time this should be that Moon Moon one right so let's check that one here so make this one as moonfield or let's make this one as light here that's it all right so now this is fine if I try to change to light this is working fine so now let's start working on this chart component so here we will be creating all the charts first for this one Whatever data in the configuration we are having for that one I'm not going to write all of this one by one because that will take a lot of time there are a lot of configuration what I have done I actually go to the official website of the react Apex charts from where we'll be writing those from there I just copied the same configuration I just modified some not that much only change the color and those things I already I will obviously add the GitHub Link in the description so you can just go there download it or Fork it and use the same in the next part when we'll be creating the back end for this particular uh project then we'll be creating all the data dynamically so that is the reason for now what I'll do whatever configuration I already created I'll just copy paste and then I'll discuss with you that what are the changes that we are going to use so let's do that in the next part all right every so let's start working on the chart uh creating all the charts that we'll be having so we'll be having two categories of bar charts line chart pie chart area chart and and also the mix chart so what I have done you can see that I created all of these uh data so now I'm not created actually I just copied from the official Dock and just I modified some of the data and the colors later when we'll basically create all these data dynamically using backend so in that case we don't have to change anything on the options but these data will be creating dynamically for now all of this static so you can see that we are having barart data category one then we have in category two pie charts uh pie chart option pie chart data then we are having if I scroll down line chart data then area chart data and also mix chart data so for this one the first thing what we're going to do inside components I'll create another folder and this will be our charts all right so this is inside components now here I'll create two file so one will be the chart layout so this is the common chart layout and then we'll be having chart card all right do JS now to create the chart card for this one we are also going to create another reusable component that is the card common card that we'll be using in uh throughout this uh application but before that first let's create this chart layout all right so here in this case we're going to use some hooks so we'll be using this one as a use client so this will be export default function and this will be chart layout now here we'll be using some of the the uh props from our uh component so the first thing we're going to use the chart data then we're going to use chart options and also we going to use the type of chart that we want to render and here this is pretty simple what we need to import we have to import chart so let's import it so we'll do import chart from this will be react Apex charts all right so here we are going to pass some options so the first will be our options so here what we can do you can directly pass this option here so let's create one state here so we'll do this one as something like update chart data set update chart data this will be use state of empty array to give comma let's copy this so this will be update chart options set update chart options this will be of empty object now here we'll do use effect and on uh first time on page load we going to set this we'll do set chart set update chart data option will be chart options then set update chart data will be chart data so here we can pass this update chart data options then we can pass the series which will be our update chart data and then we have to pass the type this type is basically the type of chart so this will be type that we'll be receiving from the props we'll pass a width so we'll pass this one as 100% And also you'll pass a height of 100% so this is all about the chart layout that we need now the reason we I'm not creating multiple times because there is no need because at the end you'll be passing the options and the series and the type so what you can do you can simply manipulate this data and based on whatever type you will be passing based on that it will automatically create that chart so now next thing we have to create the chart card but before that we have to create another usable component that is our cart and widget now these two components we are going to create in our dashboard dashboard main layout page also so let's quickly create those two component first and then we'll be creating this chart card sorry chart card component the reason is because in this component we have to import those components so that is the reason we have to create those those two component first so what we going do let's inside these components let's create another folder we can create let's make this one as card and this will be index.js all right so here we'll do export default function card all all right so now here uh what we are going to do so we'll simply return div and we are going to return here the children that we'll be receiving so here we'll be receiving this children as a Prof and also what are the next thing that we need to do we also have to pass the additional style that we have to manipulate from our pattern component so obviously you'll be having some default style here let's say you have to pass some extra uh or let's make this one as additional additional Styles so here we'll take a class name so the first thing we'll do we'll do a class name here so here we'll do a j index of five we'll do relative Flex Flex column we'll do rounded 20px we'll do BG of white we'll do B PG clip border we'll do sad of 3XL also you're going to pass a shadow shadow 100 and for dark we are going to do sadow as none also for dark we going to make this one as BG Navi 800 for dark we're going to do text as white now here if we are passing any additional Styles we'll pass this additional Styles here and I think for now this is fine all right so that means this is one common reusable component that we are going to use now we can start working on this chart card component so here what we can do we can simply create this component so this will we export default function and this will be chart card now here we are going to receive some of the props so the first we receive the type of chart the title we want to render then we having chart data and then chart options all right now here what we'll do return return this card component that we've just created now inside this whatever we'll be passing that will be the children so here we'll passing the children so now what we can do here we'll pass additional Styles so this this is the additional style we need for this one we make this one Flex Flex column BG of white we'll do W full we'll do rounded 3XL we'll do py of 6 PX of 2 and we'll do text as sorry text as Center all right inside this we'll take another div we'll take another H2 sorry we'll take H2 here and we'll Ender the title so for this one we'll use a class name so we'll do text as large we'll do font bold we'll do text Navi 700 and for dark we'll do text as white that's it for this day we are going to use a class name we'll do MB of Auto we'll do Flex item Center justify between and we'll do PX of six that's it so now after this we are going to render a button and here we will basically show some kind of Icon so for this one we'll import this icon from react icons slmd and let's import the MD bar chart so here we'll be having MD bar chart for this one we'll use a class name of height of six and width of six for this button we are going to use a class name so Z of one we do Flex item Center justify Center we'll do rounded large we'll do BG light primary we'll do p of two we'll do transist [Music] and we'll do a de of 200 for hover we're going to do BG gray 200 all right what else for dark we have to make this one so do BG Navi 700 and text we are going to use this FFC for 6B so let's save it so this is uh the chart card so on the top will be having text and right side will be having the uh icon now next thing what we are going to do so after this div we'll be taking another div here and we'll take a class name so we'll do MD so will do Mt of 16 uh then we'll do large Mt of zero here we'll take another div we'll do a class name so we'll do height of 250 PX width full and for Excel we'll do height of 350 PX now here we are going to import our common chart sorry uh what is the name we are having chart layout sorry so this is the chart layout and here we'll be passing this chart data as has this chart data so here we are receiving this one then we'll be passing the type here and also we'll be passing the chart data options which will be our chart data options and this is done so this is all about the chart uh card that we need so now uh let me just do one thing for now open this one here so let's see how this is coming okay so now uh let's go to our charts page so we go here I'll just uh simply render some of the charts for now I'm not create the layout just to test so inside this div uh let's return here chart card now here I need to pass the chart data so here let's say I'll pass bar chart category one and then chart data options I'll pass bar chart category uh bar chart options for category one we'll pass a type so for type we'll pass a bar and title we going to pass this one as bar chart let's see what is happening so now let's format this let's save it so now let's go to this chart page see awesome so you're getting bar chart here so this is looking nice so that means this is working fine so now what we need to do is simply import all the chart card and then based on the data or the type we'll be passing based on that we can create any chart we want so in the next part what we going to do create this layout and then we are going to pass the type and the title and based on that it will automatically create all the charts so let's do that in the next part all right everyone so now we have tested so let's quickly create all the charts that we basically need in this particular page so I'm going to remove this from here so now let's take one div here and here I'm going to take a class name so for this one we'll do Mt of five we'll do grid grid Columns of one and for also let's take a gap of five and for MD we're going to only s two two uh charts so G uh grid Columns of two now we'll be having total six charts so I'll uh take three container so copy paste two uh two more times for each and every container we'll be having two charts so we'll start with this first one so we'll be having chart card so here we have to pass the type so sorry type this will be bar all right then we have to pass the title so we'll do bar chart we have to pass the chart data so this will be bar chart data category one then you have to pass chart options which will be bar chart data options category one let's copy this now I'll paste it here so for this one I'll make this one as line so this will be line chart so here I'm going to import line chart data and then line chart options if I now save this let's see so you're getting two charts here awesome so now next uh let's copy this again so here I'll paste it so the third one this will be pie chart so I'll do PI this will be pi and this will be pie chart data and pie chart options let's save it let's see awesome so now next let's copy this and here we'll paste it again so this one also will be a b chart so but the type will be basically stacked so we name this one as stack uh chart so here this will be bar chart Category 2 and then we are having bar chart options category two so now let's save this let's see so you can see that this is a stack one now let's copy this again and then we'll paste it two more times so the fifth one will be area chart so we'll do area and this will be area chart this will be area chart data and this will be area chart data options and here this will be mixed chart data so here we have to pass a type of line so we'll do this one as mixed chart and so this will be mixed uh chart data and here we'll do mixed chart data options if I now save this so you'll get two more so you're getting area chart and the mix chart awesome job so this is working fine on the mobile if I now go for this one so you can see that we are getting uh two for each and every grid we are getting two charts here right so this is working fine so we are having some uh issue with this uh Legend I think this is because of the color so this will fix it later or else what I'll do for this one I think I just need to change some configuration so I'll change in the config file that I created but rest all the data options and the configuration that whatever I've written the same you can use all right now you can see that this is fully customizable so whenever we'll uh integrate this one with back end what you need to do you just have to pass the data and the title automatically it will generate so I think this is done so now let's see if I now go to charts page awesome this is look looking also very nice in the next part what we are going to do is start working on this task page because this task and this conb board both are interrelated with each other so how this will work so in this chart page sorry in this task page whatever task we'll be creating that will be reflected in this board so in the board we'll be having I think four uh separate board one will be unassigned then todos in progress and done and based on that we have to um start working on that dra uh dragend of functionality so the next video we'll be start working this task page after that we'll be start working on the drag and of function so let's start working on that once these two are done then we'll do reports page and then in the dashboard page we have to combine all of this and everything will be done all right everyone so let's start working on the task page so here the first thing uh what we'll do let me just uh format this here and then we'll go to our context first so have to create some State and here I'll create another state so so this will be all task and this will be set all tasks so this will be US state of empty array and here I'm going to pass it here now when we'll be working on the conand board so the in that part we have to create some more state but for now this is fine so here uh let's go to let me just close all of this let's go to our task page so here I'm going to convert this one to a client component and here uh what we going to do we'll take a class name we'll do Mt of five let's make a rounded of 20 PX now here uh what you can do so here first thing we are going to import here card component now here we have to pass the additional Styles if you remember so we do PB of 7 and we'll do p of 20px inside this we'll take another div we'll do a class name so here we are going to do this one as relative Flex Flex row and we're going to make justify as between okay now inside this we are going to take another div so we'll take a class name so we do Flex Flex one and item Center enter that's it now here let me just open that also so that it will be easy to check all right so now inside this we'll take another div now here we'll take a class name so for this one we'll do Flex height of N9 width of nine we'll do item Center we'll do justify Center we'll do rounded f full we'll do BG Indigo or what else I think we can do BG nav uh 400 and or let's do one thing for now I think this is fine we'll do BG of white let's see how this is coming for dark we are going to do BG Navi of 500 all right now inside this we're going to import one icon so this will be import icon from react icons slmd and the icon name is MD check Circle and here what we're going to do we'll do MD check Circle and here we're going to pass a class name so we'll do height of six width of six we'll do text uh brand 500 for dark we're going to do text of white awesome and after this what we can do so here let's take a H4 and we are going to render this as tasks and here we'll take a class name so we'll do mL of four we'll do text Xcel we'll do text Navi 700 we'll do dark text as white and we'll do font as bold so now let let's save it let's see what is coming all right so you can see that this is looking nice so you're getting task on the right side we'll be having icon so that part we need to do so after this div we are going to take another div here and we going to take a class name so we'll do this one as Flex gap of three and we'll do item as Center here we'll take another div we'll do class name we'll make this one as Flex height of full with we'll do item Center we'll do rounded full we'll do BG light primary we'll do text Navi of 700 dark will do BG Navi of 900 for dark we're going to do text as white and for Excel width as uh 200 PX inside this we'll take a input so we'll give a type as text we'll do name as uh add task we'll do placeholder as add new task all right also have to give value and unchange for now this is fine let's create the structure first we'll do PL of three class name we'll do block we'll do height of full width of full we'll do rounded full we'll do BG light primary we'll do text as SM we'll do font medium we'll do text Navi of 700 we'll do outline as none for placeholder we're going to do text Gray 400 for dark we'll do uh BG Navi of uh 900 all right and for dark we're going to do text as white for dark placeholder we are going to do text as white for SM we'll do W fit so many classes let's save it let's see so you're getting this add new task here this is fine so after this div we are going to take another uh icon so I'll just copy this this will be from Ai and let's make this one ai+ so here after this D we will take AI plus and here we're going to take a class name so we'll do height as five width as five cursor pointer text Gray 400 for dark we're going to do text as white let's save it let's see awesome this is fine let's make this on six let's see how this is looking okay so now what we need to do on on change of this you have to store this task and you have to render those here all right so let's start uh handling this particular input and then on click of that we have to basically render all the new task here now because we don't have any back end for now so what we are going to do we'll be storing this task in local storage so on page load we'll be uh extracting from the storage so the first thing what we are going to do so I think we already created uh I think we haven't created let me just create another state here so what we can do simply let's create another one so we do const new task set new task and this will be equal to UST state of mty all right and then we are going to pass it here so this will be new task set new task let's copy this and we'll go here so we going to extract from use context of global context now here we'll take a value so value will be our uh new task and then we have to take a on change so on change will be simply set new task which will be be e. target. value that's it so this will now automatically handle this particular input here so now next thing what we going to do we have to take a onclick method here so we'll take on click method for this particular icon and here the first thing what we going to do we'll do set new task as empty and also we create another method something like add new uh task or or we'll do handle add new task all right so now here we can pass this new task as a argument and then let's create this method here so this will be function handle add task so this will be get current task from argument so we going to Simply do Set uh we have what is the state so I think we have another state that is all task and set all task so this we are going to extract from here and we'll do set all task correct so set all task will be first it will destructure all the task that we are currently having and then after that we are going to add this new task here sorry we don't do a new task we have to do get current task so this will automatically set our all the task so let's see if this is working or not if I now log here all task all right so now let's inspect we'll do bottom go to console now we'll do first if I now click here plus so you're getting one object and we getting get current task as first all right so this is fine now one thing what we can do instead of get current T we do a title here so title will be get current task so now let's see so if I now try to add add something here let's click on plus so we getting title here so this uh this we can ignore for now this is fine so now let me just refresh this page next thing what we're going to do we do local storage do set item and here we'll do all tasks and this will be basically json. stringify and here we can simply do the same logic that we are doing here so this will store the uh all the task in our local storage and this is done all right if I now let's say do something like first task added if I do here plus so here you'll be getting Title First task added if I go to application local storage I think this is not happening here let me just refresh and check again so we'll do something like first task if I do plus so let's see what is happening here why you are not getting sorry I think we are getting so it's below see so we are having all task here and this is the all task new task that we have created so let me just do another one so let's do second task do plus let's go to application so here now we're getting first task and the second task so this is fine so now what we need to do another very very important thing is that whenever we load this page so on page load also have to extract all the task that is currently available on the local storage so how we are going to do that so there are two places you can do that either you can do that in the common layout or I think best will be to do this one in the context so what we can we can simply take a use effect here and we'll pass a empty dependency so that means this will run on the first time and here we'll do set all task this will be Json dot sorry json. Parts this will be local storage. gate item and this will be all tasks or else this will be empty now this will autom atically set all the task that we'll be having on the page load see now we are getting two task here see we are getting two task correct so now what we can do we can simply render this task here so now let's go here before card we'll take another div we'll take a class name we'll do height of full width of full and here we log all items sorry all task and all task. l L if this is true ERS this will be null so it will do all task do map so this will be task and here we'll return another div so we'll do here let's take a index so we'll do pass here key as index and inside this uh what we going to do so for this one also let's take a class name so we'll do a Mt of two we'll do Flex item Center justify between and P of two all right now inside this we'll take another div where I'm taking let me check all right now here what we are going to do we'll take another paragraph and we we will basically render this task. title and we'll take a class name here so we'll do text as base we'll do font bold we'll do text Navy 700 and for dark we are going to do sorry dark we'll do uh text as white also we'll take another class name for this div parent div so do Flex item Center justify Center and gap of two I think this Gap is not recorded let's remove this one let's see what is happening so getting first task and second task if I try to add another one so this will be third task this is added if I now refresh this so we getting three task and this is is working fine all right so now this is done now what will be the next step so see what will happen if I go to this conman board so here or we can also like say this one as a j board so here what will happen whatever task we'll be having here that will be automatically assigned to one board so let's say we having an unassigned board so that board automatically reflect all the task that we are having and based on that we'll be able to move those task to different boards so that part we are going to start working on the next part and after that we'll be start working on these reports and charts I think we have already completed and this is looking very nice right so let's start working on this conand part in the next part all right everyone so let's start working on our Conan board so the first thing is that as I already told you that we'll be having basically four section one will be unassigned then we'll be having two do then in progress and then at the end we'll be having done now I'm not making this part so so much complicated because this will be very difficult for beginner to understand but we can do something like uh originally we have in the J board something like you can create Dynamic uh card values also so let's say we are currently having four now instead of four you want to add one more so in that case it will be very complicated so for now let's keep this one very simple so first I'll create the basic structure and then we'll be start working on the drag and drop functionality so now what I'm going to do uh so first let's do one thing uh let's go to our page so this is our page.js now here we need to use our react hooks so I'll be using use client here all right now the first thing is that what I'm going to do so let's take uh One D here obviously we need to change this structure later but for now this is fine so here we'll take a class name we'll make this one as grid we'll do grid Columns of one and also for MD will do grid calls of two for Excel we'll do grid calls of four and also we do gap of five all right now here what we are going to do we'll create uh some It Card con card component so what we going to do let's go to our components let's create another folder and here I'll create uh let's create this one as index .js so it will use client so this will be export default function conone card all right for now we'll just return the same so we return a div this will be conb card now let's go here so here I'm going to import that okay now here so the first one we need basically four so I'll copy paste four times and this will receive a prop here so this will receive a title prop so the first one title will keep this one as so this will be title as uh we'll do this one as unassigned all right next we'll do a title of Todo only let's make this one as too then we are having a title of uh we'll do in progress and at the end we'll be having a title of done all right so this is fine now let's go back so having four cards here so we'll go here now let's start working on this uh particular card hard component so the first thing what we'll do here uh let's remove this so we will be having a class name so we'll do Flex here we'll do Flex of three we'll do rounded 20 PX we'll do a dark so sorry we'll do a dark so for dark we are going to do background of Navi 800 we'll do BG of white we'll do p of five we'll do Flex call and we'll do mean height of uh 30 RM okay now here we'll take H1 and we'll render the title so here we'll take a class name so we'll make this one as font bold all right so now here we'll take another div take a class name we do Flex One Flex gap of five and flex call all right now inside this we'll be having all the items so items is basically each and every task that we'll be creating all right so this task will be receiving from our parent component or basically this component so this will be our tasks all right so here what we'll do we'll basically check here if this task and then tasks. length is true or else this will be null so here what we are going to do we do tasks. map so here uh we'll simply get the item or let's take a task now here we'll create another uh component here so let's create this component here only so we do function this will be con Conan item this will receive item as a prop and we are going to return this conone item so we pass this item as this task as a prop all right and I think this is fine also here what we can do we can simply pass the parent property because the parent property is basically this each and every parent so let's say this is unassigned this is to-do this is in progress and this is done so these all are the parent so here what we can do simply we can pass another parent parent will be item sorry task do title now this title is basically here if you see we are having this title here for each and every task okay so this is fine so now let's format this now here we have to return this conine items we have to create the structure so here we are going to return we'll return return a div and here we are going to take a class name so we'll do rounded 30px we do p of three we'll do Flex we'll do justify Center item Center we'll do shadow shadow 100 we'll do dark sadow Shadow none we'll do font as bold for BG we are going to use this color FF C4 6B all right and what else for dark we're going to use a text of black or else normally we'll use text of white awesome and here we'll take a H1 and we'll render this item do title okay so I think for now this is fine if I now save nothing will obviously come because we don't have any items here what we need to do now let's go to our task so whenever we'll be having these three task these three tasks should be automatically uh basically assigned here because this is the unassigned section so how we are going to do that so for this one we have to create some more uh state so let's start with the first one so we'll do here and uh we'll do unassigned items set unassigned items so this will be US state of empty then we are having const Todo items set Todo items so this also will be US state of empty array then we are having const in progress items set in progress items and this will be equal to US state of empt array and at the end we are having const done items and set done items this will be equal to US state of Mt all right so now let's pass all of this so we'll pass it here let's format this so we pass to do items then we'll pass in progress items set in progress items done items sorry we have to make this one as done items all right and set done items so now how we are going to do that so now let's go to our conun and here first we have to import all of this so we'll do const and we'll import all of this from used context of global context so we take all of this so let's take from here and we'll desure here all right so here we have to pass the uh tasks so for the unassigned so this will be unassigned items correct same for this one this will be Todo items in progress and uh done items so this will be done items this will be Todo items and this will be in progress items let's save it so so now you'll see we will not get anything because we don't saved any data here all right so now what we need to do basically if you notice that whenever we'll be adding a new task so that time that same task we have to add in the unassigned task also so what we can do we can simply import this unassigned task so let me just copy it from here correct and then we can basically paste it here so now this set unassigned task will be same as first have to get the unassigned items and then we'll do the same things we'll add this title as this get current task so whenever we'll be adding a new task that will be automatically assigned to the unassigned uh items correct now you can definitely make this one as task for now I make this one as items uh sorry my mistake but uh this is also fine now same thing what we can do you can copy this and paste it here and this will be unassigned sorry what is the spelling unassigned items and here we'll do the same thing what we have done here correct so this is one thing now we'll go to context then again we have to get it from here so we'll do set unassigned items which will be json. Parts this will be local storage. gate item and here we have to do unassigned items or else this will be empty this is done so now let's see if this is working or not currently it will not work I think we are getting some error sorry I think we have done in the wrong place so this will be jon. Parts I think we have to cut it from here or else here and I think the same thing we can do here okay now I think this is fine let's save it let's see okay so now let's go to our application first and we'll clear the local storage let's clear this local storage okay now refresh this now let's go to our tasks so we create a first task added if I now create here this is added let's go to our Conan page awesome see now first task is added here all right so that means if I now go back and create another task second task if I add here go here so this will be automatically added here and this is the correct So currently these are in the unassigned state and also let's we have to give some uh margin here uh where we need to give that so let's go to this page I think here we can give margin top of four okay so now this is fine now we have to start working on the uh the dragend of functionality so let's do that so the first thing what we need to do now this basically depend on the parent relationship now parent is basically each and every this parent and for each and every parent you are having some task so these all are the task so the first thing what we need to do we'll go to this gban page and I'll close everything else so the first whatever we are doing here this we have to wrap with a context and what will be the context for that we are using this DND package so we have to wrap this one in DND context so we'll do here DND context all right now here here we have to pass some properties so the first thing we have to pass a coalition detection so this is on property and here we have to pass this W intersection so this we have to import it from this DND kit slore now this context will give you a on drag end method or property you can say so when we basically at the end of the drag this will give us event and based on this event you can do lot of functionality that you want to achieve now here this will give you some of the properties that we can basically access so the first thing is that it will give you a container so here you'll do e sorry e do over do ID so this will basically give you the container ID then we are having the current data so what we can do simply let's log here uh e. active. data do Curren so let's see what is happening and also let's log this parent here sorry container here save this see nothing will work for now this will definitely not going to work see nothing is happening because we haven't given the ref here so we have to also pass the ref so let's do one thing uh we have to basically pass the rep so we'll go to our Conan item component which is this component here and here we have to pass the R so for to pass the r what we can do we can take this r or basically the node R from this hook this is called use dropable and here you have to pass the ID so the ID will be this title now this title is basically the title of each and every container so here we will unassign to do in progress and done now here we have to basically get the set node ref and here now what we need to do basically in this here in this div which is basically the container of all the tasks so here we have to pass the ref which will be the set node ref so this is one step so this means we are uh referring to this particular div which will be this uh this div of this combination of all the task that we are having here so this is the first step now second step what we need to do for each and every conbine item that we are having you also have to pass the uh properties some of the properties that we need to pass so the first thing we need to pass attributes we have to pass the listeners we have to pass the node ref and also we can pass some transform property also so here again the same thing we have to use so this will be use dropable and here we have to pass the ID so ID will be the title all right so here we are having this item so this will be item. title okay next what we are having we also have to pass the data property here so data will be here title which will be item. title also have to pass the parent so I think we are already passing parent here so this is the parent okay and also have to pass a index so here we have to pass the index so this index also you have to pass so what we can do here we can take a index here and this will be our index we'll pass index which will be this index here so this is the index that we are passing so this index will receive here and this we are passing here now this will basically give us I as I already told you this will give us the attributes also this will give us listeners okay what else you have to pass the set node R and also you can pass a transform property here now what we can do we can simply do here const set style and here we can pass transform which will be CSS do translate sorry CSS do translate dot to string and here we are going to pass this transform okay sorry I think we are using wrong spelling here this will be transform now in this D we have to pass all the properties so you'll pass the listeners here we also going to pass the attributes then we are going to pass the ref which will be set node ref and for style we'll pass this transform which will be this set style do transform and I think this is fine all right let's save all of this now let's go back all right we are getting a two string of undefined let me check the spelling here so you're using transform do to string okay I think everything is fine here oh sorry we have to import it so we have to import it from uh DND Kit only so we'll do import from so this will be DND kit we have to from utilities correct so have to import it here so this will be CSS okay now I think this would work let's save it let's see okay so now this is fine now let's see if I try to Also let's give a cursor here so we'll give cursor pointer okay now let's see what is happening so nothing will happen the reason is again we haven't uh created that on brag and functionality so let's quickly finish this one so here uh this current will give you some of the properties that we will be able to get it so the first thing is the title index and the parent all right so here we'll do const title and here we are going to do this same e do active. dat. current all right so here this will give you do title or else we're going to make this one empty next we'll be having index so this will be we'll copy this one so this will be current do index or else this will be zero let's copy this next will be having parent so this will be our parent if no parent is present so you're going to make this one as to-do by default so if you see the same name we have given here so this is to-do so this is our container title index and parent so now we have to create the functionality so this will be if container so we'll check if the container is equal to equal to too so what we need to do first we have to basically set our to-do items so we'll do set to-do items so we'll basically destructure the to-do items okay and here we are going to pass the title now this title is basically this current title that we are having here all right so this will be with this title okay now else we'll check if container is uh let's say done so again the same thing so we'll do copy this so we'll do set done items so we again log the done items sorry destructure done items and we'll pass the current title else if uh we'll do a container is equal to equal to unassigned so we'll do set unassigned items so we'll get the unassigned items and then we'll pass the title else this will be definitely the in progress so we're going to do set inp progress items will be first we'll get the current inp press items and we'll pass the current title so this is all about our current container next we having the current parent so here what we can do we can basically check now based on parent so we'll do if parent is now to do and we are going to do the same logic else if parent is equal toal to done else if parent is equal toal to unassigned else this will be progress so if the current parent is too what we're going to do so we'll be moving the item from to-do to a different item correct so that means what we can do we'll get the current index of that item that we are dragging or basically dropping correct so simply we can basically take here set to-do items because this is if the parent is Todo so here first we are going to do so we'll take the current to-do items and then we'll slice this one zero to till index now this is very important this index is basically the current item so current items I mean this individual item that we are having so we are slicing from zero to uh this index and then again we'll do to-do items. slice and we'll do from index + one that's it from the next next set of items all right now same logic we have to do for all the other three so here same and this will be same now for this uh for this done this will be set done items so here it will be done items this will be done items this will be set unassigned so this will be unassigned items unassigned items and this is set in progress this will be in progress items and in progress items and this is done all right so this is what we are doing on drag end all right everyone so now I think everything is done so let's test once let's see if this is working or not so go here uh let's close this all right so now if I try to move okay this is not working let me just check so passing index use dropable so this is the title then we have to parent sorry parent will be task parent will be the title of the parent not the current task title this is wrong now let's see so we having conon item use oh see here we need to do use dragable not uh dropable because we will be dragging this one now here we are passing item. title title index parent now let's see what is happening here see already logged in here right if I now go back let's say try okay now see this is moving from un assign if I move to Todo so you can see that this is uh getting logged here so line number 28 if you noticed here container we are getting too so that means we're moving from this parent to this container so that means that is the reason what we are doing if the current container is too we are adding this current title now this current title from where the this is coming if you notice that e do active. data is basically this data that you're passing you're passing title index and parent correct so the same thing you will be able to get it here as simple as that now if you noticed if I move this one from too to in progress now you're getting to in progress all right so container in progress but parent is too so that is the reason if the parent is to do so we we are actually moving or slicing that item because this item is not present here correct so this is present here if I move this one from here to done now you can see we getting done here and this is in progress so that is the reason we are slicing from the parent and we are adding in the container that means whatever we I'm explaining again if I move from here to there so that means from done to we are moving to in progress so we have to add this one in in progress but in the done we have to remove it and this is done so now what we can do we can simply store all of this in our local storage so now let's start with this part so uh so this is pretty simple so from this too what we can do we can simply do here local storage dot set item so let's make this one as Todo items and this will be Json do uh json. stringify and here we'll do the same thing that's it let's copy this so this will be for done so we make this one as done items and this will be non items then we are having unassigned so this will be our unassigned items I think this is the name we have given there also let me just check so we having unassigned items so you can see that so unassigned items and this will be unassigned items or else this will be in progress items so here this will be in progress okay the same here now the same thing we have to do here so here we'll do local storage. set item so these will be our to-do items correct and here we'll do json. stringify and we'll copy the same logic from here and we'll paste it here let's copy this so this will be our done items so this will be done and this will be done done so many done now let's copy this let's paste it here so this will be our unassigned items so if the parent is unassigned so we'll be removing from unassigned items or else this will be uh in progress items so this will be in progress correct I hope this concept is clear so that means from the parent we are removing and then the container we are adding so from unassigned to too so unassigned is the container too is the sorry unassigned is the parent too is the container so from parent we are moving to container so we adding this to container but we are moving to parent all right so now let's see what will happen if I now refresh this first time so you'll be getting all of this in unassigned this is correct if I go to task we getting two let's add another one so this will be third task let's add let's go to our board we are getting let's move this on to first to to do now refresh this now see what is happening okay so you're not getting here so this part we need to check correct I know the reason the reason is pretty simple because in our context we have to get it so here also you have to do it so we have to do it for set done items we have to do it for set in progress items and also you have to do it for Set uh what else we are having unassigned input done in progress and to-do items this part also you need to do so paste it here here and here so this will be our to-do items this will be in progress and this will be our done item if I now format and save this now let's see see now you're getting to do here if I move third to in progress let's refresh this okay so you're not getting here let's see what in progress we have done in progress now we should get it so we getting here let's move the second task to done let's refresh this we are getting here let's go to task let's another one fourth task added and we'll do fifth task added let's go to our board we're getting here let's move this on here and here let's refresh this so we getting here this is working fine awesome job if I try to move this one from here to unassigned Let's refresh this so you're getting the data here so that means our con board is completed and also with this you also have some basic idea that how you can use this drag and of functionality what we have done if I now explain again uh so first I wrap this one in our DND context then in this page we have two section one is the dropable that from where we are dropping and one is the draggable which item we are dragging and based on the parent and container relationship we are basically moving from parent and adding the item in the container so this is the main concept so this is done chart is done Conan is done task is done let's start working on this reports then we'll be adding all of this and we'll be creating our dashboard and this is done so let's start working on this report page in the next so let's start working on the reports page so the first thing what we are going to do so here let's go to our report page where is that so here so I'm going to close everything else and we'll convert this one to use client all right now here I'll remove this one so let's take another div so the first thing we'll do a class name we'll do Mt of six uh let's make this one as five and here uh we are going to import our card component and here we need to pass some additional uh Styles so here we'll do WS full with as full and PX of six all right now here uh what we can do we can take a header and inside this we are going to take a div and we'll show something like report analytics so for this header we'll take a class name so we'll do this one as a relative Flex item Center justify between and we'll do pt of four in this D we are going to take class name so here we'll do text Excel we'll do font as bold I'll do text Navi 700 and for dark we're going to do text as white that's it now here uh we also need to create a model component so that we're going to create in a minute but before that let's uh let's um do one thing so we will be basically having a model and there will be a form and then we have to basically give some information based on that it will create the uh report data so for now what we can do we can simply create some dummy data so this will be dummy data and here we will take a ID of let's say one then we'll take a name so we'll give this one as report one then we'll take the number of visitors so here we'll take this one as let's say 1,000 then we'll be having sales we'll give some value like 4 5 6 7 8 any random value then we'll be having Revenue so Revenue will give this one as 2 5 2 4 56 all right what else we can give we can also give another thing and that is the task now these all are some see if you notice one thing that you will obviously think that this doesn't make sense see the prime objective of this particular course is to understand how you can create admin dashboard obviously these all all the things that what we are doing it is basically not applicable in the real life project I hope you are getting what I'm trying to explain but if you know the concept then using this concept you will be able to create your own Project based on your own requirement so at the end that will be our Prime object so here we'll be having a task which will keep this one as task one something like that now let's copy this and we'll paste it two more times so this will be ID of two report of two this will be ID of three and ort of 3 Z anything so now here what we going to do after div we are going to take another div here sorry after header and here we'll do Flex Flex call then inside this we're going to take another div so we'll take a class name we'll do this one as overflow X Auto we'll do ASM minus MX of 6 for large you'll do minus uh MX of 8 all right inside this we'll take another div we'll take a class name here we'll do inline block we'll do mean with full py of 2 as PX of 6 and large PX of 8 inside this we'll take another div we'll take a class name we'll do overflow hidden here we are going to render our table so inside this we are going to take a table now here we are going to take a class name so we'll do mean width of full then we'll do uh we'll do text ASM and we'll do font light here we'll take a t head so here we'll take another class name we'll do border B we'll do font medium for dark we are going to do border neutral sorry this will be neutral 500 something like that here we are going to take tier and we'll be having all the columns so here I'll take all the columns so these will be our columns so here the first thing it will be name then we are having visitors then we are having sales then we are having revenue and at the end we having the task so inside this tier we'll basically render these columns do map so this will be sorry columns do map this will be column and here I'm going to render th so render column here and for this th we'll give a scope so this will be column and we'll give a class name so for this one I'll do PX of 6 p y of 4 let's format all of this so this is fine so now after T head we'll take our T body all right so here we are going to render our dummy data do map this will be data item and here we are going to render our TR for this one also uh let's take the same class name that we have taken here so this will be class name and here we'll be having our TD so here we'll render this data item dot name and then we'll copy this 3 four and five uh this will be visitors this will be sales this will be revenue and this will be task now for this 3D we are going to take class name so here we'll do wi space no WP we'll do PX of 6 py of 4 and we are going to do font as medium let's use the same class name sorry let's format this and I think this is fine let's save it let's see what we getting all right so this is fine but here we are getting some issue so what we can do basically so we are rendering uh where is that in the table you can do text as left let's see okay so now we're having name visitor sales revenue and task so we'll be having one button here on click of that we are going to open a material dialogue there we will be having a form and then we'll be creating our report so let's uh start creating the model first so we'll go to components and create another one this will be model and let's create index.js and this will be use client export default function common model so here uh what we going to do first so let's return here so return div so now the first thing what we going to do is import a uh this A5 plus icon and here we are going to take a class name so we'll do height of four width of four we'll do cursor pointer text Gray 400 and for dark we're going to do text as white that's it and now also if we go here we have to import this common model component let's save it let's see so you're getting this one here this is fine also let's do one thing let's make this one is six six okay so now after this what we can do we can import our dialogue so this will be dialogue from Material UI and here we have to pass a open uh prop so what we can do you can simply take something like that we can take a local state so this will be open model set open model this will be U state of false okay now on click of this we are going to make set open model as true and here we have to pass this open property which will be our open model okay also on close uh we are going to make this one as false set open model will be false that's it now here we are going to take our dialogue content so here let's take some class name so here we'll do a height of 80 and width of 80 let's save this let's see what is happening if I click here okay nothing is opening for now let's see let's uh put some content here so we have dialogue and then inside this we are going to take another div we'll take a class name we'll give Flex Flex column and we'll do gap of five now here what we can do we can create our form controls so we create our form controls so here what we going to do we'll give a name so this will be name type this will be text We'll add a placeholder and uh this will be for placeholder uh we'll do this on enter uh report we'll do enter report name and here we're going to do component as input let's copy this and paste it five times also here we are going to do option as empty so let's copy this again paste it three more times five so second one this will be our visitors type is number enter visitors count component input options empty next we having sales this will be a number again this will be enter number of sales input and this will be empty then we are having Revenue this will be also number enter Revenue then we are having task this will be type of Select this will be select task and uh for this one uh this will be uh component sorry type will be nothing here this will be select component will be select and options we have to basically render now what we can do basically here we can do one thing so uh first thing is that we are going to take let's go to our context and then we having all task so this one we are going to take it from use context of uh so here this will be Global context correct and now here what we can do simply we can cut it from here and can paste it here and then what we can do we can pass this on here so this will be all task and an all task. length this is true or else this will be empty so this will be all task. map item and here what we are going to do we return a label which will be item and we return value which will be item and I believe we have item do title that's it all right so now let's save it let's see what we are getting in this form controls so log here form controls okay we are getting some error let's see okay let refresh this okay so you can see that we are getting in the task we're getting array of five so you're having all the task label and the value awesome so now let's go here now after this what we can do we can simply render so we'll do here uh something like form controls do map so this will be control and here we can check if control do component if this is input so render a input or else this will be select so here we'll take a div okay and this will be a select and here what we going to do we basically take one option this will be select here we'll pass a ID of empty and value of empty and here what we going to do we will basically take control do options and then control do options. length ORS this will be null so here we'll just do control. options do map this will be option item so here we are going to render option and we'll render this option item dot label and here we'll be having the ID which will be option item do ID and value also will be sorry this will be option item Dot value so this will be option item. value and this will be option item do value if this is input so we going to take another div and here this will be input also here you have to pass the name so name will be uh so this will be control dot name then we have placeholder this will be control dot placeholder same for this one also so copy this and here we have to pass the type so type will be control do type now in this div we are going to take some class name so we'll do Flex we'll do height of 40px we'll do item Center we'll do rounded full we'll do BG light primary we'll do text Navi 700 for dark we're going to do BG Navi 900 for dark we'll do text as white okay for this div also we going to use the same class St now in this input we are going to take class name so for input we'll do PL of three we'll do block height of full width of full we'll do rounded full we'll do BG light primary we'll do text SM font medium we'll do text Navi 700 we'll do outline as none for placeholder we'll do text Gray 400 for dark we'll do BG Navi of 900 we'll make this one as important and for dark for dark we'll do uh text as white what else for dark we'll do placeholder which will be text as white and for SM we'll do W fit let's copy this and we'll use the same class name for this also select also I think this is done let's save it so now let's see what is happening if I click here so you're getting report name visitor account sell revenue and select and here I think we can remove this part from here let me just do it so remove this one from here and this one okay so your number of uh Revenue sales count and Report name all right now after this what we can do basically so after the dialogue content uh we will take dialog accents and here we render a button and this will be add new report here we'll take a class name so we'll do border rounded uh 20 PX we'll do text as large we'll do PX of 12 py of 3 we'll do BG as white we do text Gray 600 for dark we'll do text as white for dark we'll do BG Navi 800 100 let's save it let's see so if we click here so we getting add new reput so now the structure is completed now we have to start working on this form data so what we can do you can go to our context and let's create another state here and also Let's uh do one thing so here I'll do export const report uh initial or let's do to initial report form data and this will be name will be empty uh visitors will be zero sales will be zero Revenue will be zero and task will be empty and here we'll do const report form data set report form data this will be U state of initial report form data now let's copy this and we'll pass it here awesome now we will go to model and then we are going to import it from our context and then we can go to our input and then we can take our value so value will be report form data of this control. name and we'll take a on change which will be set report form data which will be report form data and this will be control. name equal to e. target. value now these all are very basic concepts so that is the reason I'm not explaining in details we can copy this one and we can paste the same thing here this is done now we'll take a on click here so we do on click handle add new report and then we'll create this method so this will be function handle add new report so here the first thing what we are going to do will copy the or existing reports so copy reports from where this will be coming so for this one we have to create another uh State here so here we'll do const all reports all reports uh uh data set all reports data this will be UST state of MTR now here we'll copy this and we'll paste it here we'll go here and then we'll destructure here so first we'll copy reports data so we'll copy all report data the reason is we are not directly mutating the state so we'll do reports uh sorry we'll do all reports data and now here what we are going to do uh we because currently we are not doing any edit functionality so we can directly push the data so we do copy reports data do Post so here we'll do ID we'll push ID so ID will be this all reports data do length + 1 and then here we will be doing uh we can directly push the reports form data that's it and then we'll do set all reports data will be copy all reports data and then we are going to make this one empty the form so we do Set uh do set reports sorry set report form data will be initial report form data and this is done let's save it let's see what we are getting in this uh all reports data okay so now we'll go to console we'll do plus so we'll do report 10 and this will be let's say 1,000 any random value 2,000 20,000 5,000 and let's say first task if I click add new report we are getting data here so we having id1 name report visitors sales and the revenue awesome and also this is getting reseted also you have to close this form uh so here what we can do we can make this set open model will be false all right so now instead of rendering the dummy data we can basically render this report form data also what we can do we can store this data in our local storage so here we can do local storage do set item this will be all reports data and this will be json. stringify copy all reports data that's it now what we need to do on page load again what we have done same thing we have to do here so we'll take this set all reports data this will be json. parts and this will be local storage. get item this will be all reports data or else this will be empty save it so now we can go here inst of rendering this dummy data uh what we can do we can take const all reports data from use context of global context and then instead of rendering the dummy data we can render this all reports data also you can check something like if the length is true then only we're going to render or else this will be null let's save it so we don't have anything here let's add something so we'll add report one this will be 1,000 some value and then we going to S the first task add new report we're getting data here if I now refresh this we are getting the data from our storage awesome job so this is working fine so now we have actually completed all of these now next thing what we need to do complete the reports tasks conbine board and charts so now in the next part we will basically we don't have to do anything else we'll combine all of these and based on that we'll be creating our dashboard that's it so let's do that in the next part all right so now let's start working on this dashboard component this will be pretty simple because we have completed rest of the section we just have to combine all of these and based on that we can create the dashboard the way we want so the first thing is that before that we have to create another small reusable component that will be a kind of widget so you can go to our components folder let's create another folder here let's give this on name as widget and this will be index.js so this will be use client now here we'll do export default function widget so this will receive some props so it will receive icon icon prop then it will receive title also this will receive a subtitle now here we are going to return card component and here let's add some additional style so here we are going to make this one as Flex row we'll do Flex grow we'll do items as Center we'll do rounded 20px and for dark we are going to make this one as BG Navi uh 800 all right inside this we'll take another div we'll take a class name we'll do margin left of 18 PX we'll do Flex we'll do height of 90px we'll do W as Auto Flex row and also we do item as Center all right inside this we'll take another div let's take a class name so we'll do rounded full we'll do BG light primary p of3 and for dark we are going to do BG Navi of 700 here we'll take a span and we going to render the icon so here we'll be having class name so llex item Center and text of we're going to use FF C4 6B all right now after this div we'll take another div here so let's take a class name so we'll do height of 50 mL of 4 Flex W Auto we'll do Flex colum and justify Center so we'll take our paragraph and here we are going to render our uh title sorry and here we will take H4 and we'll render our subtitle so here we'll take a class name so we'll do take text ASM we'll do font medium we'll do text Gray 600 for this one we'll take a class name so we'll do text Excel we'll do font bold we'll do text Navi 700 and for dark we're going to do text as white so this is all about the uh wiget that we need so now let's start working on the main dashboard layout page so let's go to our dashboard page where is that okay now here let's close everything we'll convert this one to use client because we are going to use some of the hooks and also the context so here I'll remove this one so we'll take a div we'll take a class name and we'll do Mt of three we'll do grid grid calls of one we'll do gap of five for MD will do grid calls of two for large we'll do grid calls of three and for 2 XEL also we are going to do grid calls of three for 3 XEL we are going to do GED Columns of six all right in this we are going to import our widget now we can do one thing uh we can do something like that we create our widgit data so here so the first one will be our title so here we can give the uh reports how many reports are there subtitle so in the subtitle we have to basically render the value so for now I'll give this one as five later we we going to change this one so here we are going to give the icon so icon will be our MD reports this icon and here we are going to use a class name height of seven and width of seven so let's copy this next what we can render we can render the tasks we'll give five so this will be MD task let's copy this uh we'll render here let's say sales do MD I don't think we have MD sales uh what else we can give for now we'll give some uh let's check once what are the icons we have we'll do react icons uh we'll search for sales we do sell let's see uh which one we can take search [Music] for money okay there are so many let's take this one only bi money withdraw let's copy this so this will bi and this will be bi money withdraw okay so we have sales then what else we have we have also visitors visitors so here we can take some person or something like that person so we can take this one only okay we are not getting any suggestion let's again do this so this will be from BS and this will be with this BS fill person check okay next we have Revenue so here we have rvn uh n we're not getting anything let's search for money only let's take something else let's say which one uh we can take this one here also you're not getting anything let's take it from fa and this will be F money Bill wave so 1 2 3 4 5 what else we have in the reports so we have task visitors name sales what else we can render here we can render the total number of boards boards means we have this Conan board right so there also you can render that for now so let's do here board so you have four and let's do this one as let's see what is coming in board anything is coming let's search for Conan awesome so getting let's take which one to take we'll take this one something different okay so you'll copy this this will be Al and we'll copy this one and then paste it here okay so we created this one so now what we can do we can simply uh map this wiget data do map this will be widget item and we can render the widget and we can pass the prop so title will be wiget item dot title then we are having subtitle this will be wigit item do subtitle then we are having icon this will be wigit item do icon and this is done so now let's format all of this let's save it let's see what we getting in here okay this is taking some time awesome looking so good so you can see that this is looking awesome okay so having reports task sales visitors revenue and board now here we are going to render all the uh charts so what we can do so let's do one thing after this div we are going to take another div here let's take a class name and we'll do Mt of five we'll do grid GD calls of one gap of five and we'll do MD GD calls of three we'll do two times now here we are going to render the same thing so we'll render chart card so this will be we'll give this one now here we can give any name we want so let's say we give a title here so we'll give this one as sales analytics something like that and here we'll pass the chart data so here we have this uh which one to take we'll take this one as the line chart data then we have chart options this will be line chart options okay and then the there will be type which will be line all right now after this what we can do we can copy this we paste it here this will be let's give any name doesn't matter Revenue analytics this will be bar chart data category one this will be bar chart data options category one and type will be B let's copy this and here we'll pass some something like visitors analytics so this will be let's say area data we want to render this will be area data option and this will be area let's format this let's see what is coming okay let's refresh this okay awesome so sales revenue visitor analytics obviously these all are dummy data but for now this is fine now after this what we can do so here we have to render three more so let's start with another one so we'll uh let's copy this from here only so paste it three times 1 2 and three so give this one as let's say what we can give uh traffic analytics so for this one we'll do bar chart category sorry we'll do bar chart Category 2 and this will be bar chart category options two this will be bar after this we'll do here what we can give uh like uh tasks analytics this will be pie chart data and this will be pie chart options and this will be type of Y and here we'll be having mixed analytics so this will be mixed chart data this will be mixed chart data options and type will be line for this one let's save it let's see awesome okay now after this we'll render we'll take another div see now how this is simple So based on your convenience you can basically modify this structure so here we just have to render the reports that's it so now we'll get the report here see we are getting reports here now let's take another div we'll copy this so here we want to render the tasks and also we copy this one again and we'll render the G but and this will give me all of this at one place let's save it let's see awesome job for this one let's do one thing let's give a margin uh bottom of 10 see how awesome this is looking right so now you will be able to add from here also sixth task let's add here see it is updated here you will be able to move this one right if I now refresh this so we getting updated data here if I click here we are getting report data so this will report three some value here and let's select some let's add here this is updated Here and Now go to reports this is updated and all of this working fine so now one thing we need to do we have to update all of these so how we are going to do that so we can go here now uh we are going to render all reports data from use context of global context so now here what we can do simply so here we are having the number of reports so this will be all reports and then all reports do length or this will be zero so we having three reports okay also you can render the all tasks so this will be all task. length so you have here so you have all tasks and then all task do length or this will be zero so you have six tasks and then here what we can do sales right so we'll do all reports and then all reports data. length if this is true or else this will be zero so we can simp simply do all reports data. reduce the current item and this will be current plus item dot sales so I think we have sales here let me just check so we go to context so we have sales here okay so let's see what we getting so if I go here all right so we have to change this one to we'll do parent here here we'll do percent of this okay now the same thing we can do for others also so for visitors this will be visitors so here we are having visitors and then we are having the revenue so this will be uh our Revenue so this will be Revenue okay and Boards will be always four so now I think this should work let's see awesome so now let's add something here so we add report 5 we have 1, 1,500 second task add new report all right so this is updated automatically updated here right all of this and everything else is done so now let's see how this is looking looking good right so this is our reports tasks this is our Canan board this is charts if I now try to move this on to done let's go to our dashboard so this is moved to done and charts page is also done all right everyone so we have completed all all the things all the components and Pages let's do one thing before closing this video I will give some kind of Separation here so let's give a white border or let's give this color border here so that it will look nice so what we can do is just checking so here we can take another D and then we can self close and then take a class name so here what we can do we can take MB of 7 and then we'll take a margin top of 50px hpx we'll do BG uh gray 300 or 400 normally and then we're going to do dark BG uh so for this one I think we are using some color so let me just copy it so we are having okay this color so let me just copy this and we paste it here so now let's see how this is looking okay but now here uh what we can do here we can make this one as 10 instead of 20 uh let's remove this one I think it's looking bad okay now this is fine okay so now there is a separation here and this is looking if I now change this one okay let's use the same color I think we no need to give any color here we'll use the same one for both the cases yeah all right so I think this is fine awesome so I think now you guys know how you can create a admin dashboard from scratch we have done lot of things how to do drag and drop functionality so I think that's all for this particular video as I already mentioned that I'll create a part two for this particular uh project where I'll be creating all of this data using back end for that one either I'm going to use Prisma POS SQL or I'll be using like uh NES whatever you guys will decide so for this one I'll create a poll and based on that you can give your preference so that's all for this particular video If you like this video give a like comment down and please subscribe to my channel I will see you in my next video till then good luck and peace

Channel: Sangam Mukherjee

Views: 5,143

Keywords: react admin dashboard, react admin panel, react admin panel from scratch, react admin panel tutorial, react admin panel dashboard, react admin dashboard tailwind, react admin dashboard material ui, admin dashboard react js, admin dashboard react, admin dashboard, admin dashboard using reactjs, nextjs admin dashboard, admin dashboard tailwind react, react admin dashboard tailwind css, reactjs admin dashboard, admin dashboard react js tailwind, react js admin panel

Id: WSL6Merw4Co

Length: 157min 13sec (9433 seconds)

Published: Fri Oct 20 2023