Build Admin Dashboard App using React and Ant Design with Sidebar, Statistics Cards, Chart & Tables

hello guys welcome back in this video tutorial we will learn how to create a simple dashboard application using react.js and design components so in the dashboard we will be having the header the side menu and the page content and then the footer and in the side menu we will be showing the dashboard the inventory the orders and then the customers who made those orders right and inside the dashboard on the top we will be showing the number of orders the number of items we have in the inventory the cost number of customers who ordered different things and then the revenue we have generated all of this data will be coming from an API so in this project we will be integrating all of these pages and these cards with our backend apis and on the bottom we will show in the recent orders and then we will be showing the other Revenue inside a chart and in the inventory we will be showing our list of the inventory products where we will be showing the thumbnail of each product the title the price the rating how many we have in the stock the brand and the category and it will be a paginated and we will be fetching this from an API and similarly for the orders we will be showing the items which were ordered and how much its price what was the discounted price and the quantity that that was ordered and other columns and same goes for the customers we will showing the Avatar of the customer the first name last name email the phone and address on which this order will be shipped right and again it will be the paginated and on the bottom in the footer we will be showing the context as the privacy policy and terms of use and on the top right of the header we will be showing uh two icons one for showing documents and one for showing different notifications the notification will be a list of the orders we have received and in the mail icon we will be showing different commands again this will be fetched from the server apis right so see how we can develop this dashboard let's get started I have an empty react.js project that is using and design and right now it's showing nothing so let's go ahead and start adding different components to create the dashboard so first of all uh for the parent if we can give it a class name of maybe app and give it a style such that it it takes the whole width and height so we can copy this one and insert the app.css we can say its display is flex and the first action is column because we will be showing the header then the page content and then footer in a column and then for the width we will be seeing that it's a hundred v w and for the height we can say 100 VH right save it and see this one as well and here we will be adding uh the headers the page content and the footer so for that we can create a components folder under the source and create different files there so we can say components and inside that we can see the header or maybe we can see the app header and again inside the components we can see a footer and in the components we can see the page content and the site menu and also we can see the app routes right so we can add a index files in each of these so we can say index.js sorry it should be Js and again in the header in the index.js and in the roads again index.js and in the page content it will be index.js and in the set menu index.js right and let's create the components in each of these so inside the footer we can say it will be a function and called a footer and we can return a div here that is saying the footer and we can say export default the footer right and let's copy this one and paste it in each of these and instead of this footer we can see a header copy this one and paste it here and paste it here as well save it copy this one and insert that insert the page content here we can see this is the page content component copy this one and paste it here as well as here right if we copy this one and add inside the side menu as well so we can say set menu you can copy and paste everywhere okay so now if we go to the after Js and here at the start we can see the app header and then inside the space we can see it will have a side menu here and then it will have our page content right on the right side and after this space there will be the footer right if I save it here you go the app header then the side menu and the page content and then the footer right so let's go ahead and add some styling on each of these so that this looks very good so let's close all of these and in the after CSS we can add the styles for the we can say the app header then we can add some style for the footer and then style for the add menu side menu and then the page content right and if I go to the header and here on the Deep we can see the class name is uh header right so let's copy this one and add the classes to other components as well so for the footer we can say a footer and for the page content we can see it's the page content and inside the side menu uh we can see the class name is site menu right now if I save it and go to the CSS and for the header uh we can say its height is maybe 50 pixels right and its display is flex and we can say justify content space between so we will be showing the icon here and then the uh the dashboard name here and then a few icons on the other side right and we can see align atoms to the center and we can give it a Dell padding we can say 4 pixels Maybe okay and we can give it a border bottom to one pixel solid and maybe we can say RGB a b 0 0 0 and 0.5 right or maybe you can decrease it to again yeah looks good right so now let's go to the app header and add the icon and other content there so we can go here and here we can say first it will be an image from the end design and for the source we can use the YouTube channel icon and paste it here if I save it there you go so let's give it a width of maybe we can say 40 yeah looks good okay so the next uh item we can render here the the dashboard name so here we can see the typography dot title and here we can see image dashboard right if I save it here you go and then at the very last we can say inside the space we can enter different icons so one icon could be we can say mail outlined and then the other could be the maybe Bell field if I save it here you go right maybe we can increase the font size of these little bit more so we can say the style is the font size of maybe 24 okay and we're gonna give it the same style to the other icon as well okay looks good and for now we can add a random badge to each of these so here we can see the badge and on this one as well okay and give it uh count of maybe we can say 20 right here you go it is added the batch and here again we can say the account is maybe we have maybe 10 messages and save it and instead of maybe uh here instead of this come out we can say show that as a DOT let's go and we can add a little padding on the right side here so in the app.css in the app header we can say the padding on the right hand left is instead of four pixel it could be maybe 12 pixels and maybe we can increase uh that as well or maybe instead of this one we can say it's 20 and then maybe it's again 4 pixels and 12 pixels so it's four to the on the top and bottom and 20 pixel to the right and 12 is on the left side right so no it looks good right so if I make it full screen so this is how it will look like right okay so next let's go to the footer styling so here inside the footer we can say its height is again 50 pixels and display is flex and then we can see inside of the space between we can say space evenly and then the uh align atoms to the center right and instead of the Border bottom we can see the Border top is of the same value if I save it you go the footer has a the Border top right and then in the page content or we can say the space in which we have added this side menu and the page content right here we can add is this uh class name we can say menu and Page content and if I copy this one and go to the app.css and before this side menu we can say it displays also the flex and its Flex is one so that it takes all of this available space right so this is how the photo will look like right and let's add some content in the footer as well so we can go to the footer and here we can add some typography so typography dot link and maybe we can first add our phone number we can say one two three four five six seven eight nine right and we can give it uh href as well so that will be tell and then plus one two three four five six seven eight nine right if I save it this how it look likes so let's add some more typographies links so that will be typography dot link we can say privacy policy and then the last one we can say terms of use right and for the href so we can say right now let's go to the https and www.google.com right so copy this one and paste it here as well right if I save it this is all it looks like so if I now click on this telephone number is try to make the phone call and on the privacy policy in terms of use it will open the Google so we can see Target is the blank open it in a new tab so let's copy and paste it here as well so so now if I click on this privacy policy it will go to the Google and then terms of use again going to the Google right so this completes our uh the header and the footer so let's now focus on the side menu at the page content so let's go to the side menu and here we can use the menu from the end design so we can say it's a menu and inside that we can add the menu items it will be in an array of objects right so here we can say the label of the first one is maybe you can see a dashboard if I receive it here you go it has added the dashboard and we can add its key to maybe so here we will be adding the key uh something like we can say equal to the routing so we can say this one the key for this one is either slash and then uh for the next one uh item we can say it's an inventory and here we can say it's it will go to the slash inventory right and similarly we can say the other items so this one we can see the orders and it will go to the slash orders and then here we can show the customers and it will go to the customers right so why we have chosen the key like this one because when we will be implementing the only click function here so here we will be getting the item and if we do something like item dot key we will be getting the route on which we want to navigate right so this is a this is why we choose the key something like this one right so here we have dashboard inventory orders and the customers right and for the after CSS which content here we can say the justify content is flex start and then the Align items is also the flex Dot right so that it is moved to the top and instead of this only the text we can add the icons here as well those looks very good so we can add the icon again from the end design so here we can see it's a the App Store outlined if I save it here you go and then the inventory here we can say the shop maybe shop outlined okay and for the orders we can add an icon like you can see it's a shopping cart and for the customers we can say it has an icon of if you can say the user outline site okay looks good okay so let's move to the page content and inside the page content we will be rendering the approach so let's go to the approach first and declare those so it will be a function called the approach and here we can see the export default the approach right so here we can render our approach so for creating the routes we will using the red rotor Dome and to install that we will be seeing that npm install react router sorry Direct Auto down I have already installed this one so we can directly try to use that so here we can say return the on the top it will be the browser router from the react rotor down and inside that we will be declaring our roads and inside the roads we can see a single Road and here we can see the path of that route is the Slash and the element that we want to render at this particular path is the dashboard right so we can create this all of these pages so let's create another folder under the source we can see the pages and under that we can see the dashboard and then again in the pages we can say inventory and again in the under the pages we can see others and also for the customers right so let's add the index.js files in each of these similarly we added for the components so it will be index.js and in the inventory index.js and same goes for the others so here we can say index.js and start adding the components inside that we can say this is customers and here we can see the export default customers right and inside that we can just return uh Dave and there we can add maybe a typography and dot maybe we can say only a text and here we can see customers right so let's copy this one and add it on other Pages as well so inside the dashboard here we can see this is a dashboard something okay copy this one and paste it here and paste it here as well and again copy for the next component and for the inventory we can say inventory and copy and paste it here and select it copy for the next component we can see orders and you can paste it everywhere right so we have added the components for the dashboard inventory orders and the customers right and now we can go to the page and inside the approach and here we can see for this one we will for the single slash we can see the component we need to render is the dashboard right so we can copy this one and add for the other three so here we can say it will be inventory and the component we will be rendering is the inventory and this one will be orders and the component we want to render for this route is orders and for the customers the component we want to render is the customers right and we can go to the side menu and write the on click function right and here it is a down click we're getting the item and here we can see we will be navigating to that so for that we can use the navigate that is the from the use navigate uh Hook from the Rector down right and copy this one and here we can see navigate to here we will be providing uh the path we want to navigate so inside the item dot key we have the path so we can navigate to that right so if I refresh okay there is looks like there are some errors if I go to the inspect okay it's saying that uh the use Navigator can be used in in the context of the router so here inside the approach we have used the browser router so instead of using here we can use it on the very top so here we can say we can use this at the very top where we are declaring the app so here we can see the browser router right so all of the components which are inside the app either side menu page content or the header footer everyone will have access to the router right so that's why we have added that on the very top okay so now if I go to the dashboard inventory it is going to the inventory then the orders and then the customers right so uh here on the page content so it's always saying page content uh that is because in the page content we have not uh rendered the approach so if we go to the page content and here instead of this page content text we can render our approach right so if I save it here you go on the dashboard if you close this one inventory the orders the customers right so it's showing RG so here instead of this only the typography.x we can render maybe a little bigger text so here we can see inside the customers we can see it typography dot maybe title of level is maybe three uh it we are in this customers yeah which looks good right or maybe level four will be also enough okay so we can copy this one and edit uh on all of these here and inside the inventory and one is left the orders right okay so we can cut it here and paste it here remove this one save it and in the inventory cut here paste it here and remove this one and in the dashboard cut it here paste here and remove this one right so now this is the customers orders inventory and the dashboard right and also we can add some styling here as well so we can say add some padding uh on the left side so here we can go to the after CSS and inside the page content we can see the padding left can be the 12 pixels here you go so it should have added on all of these pages right okay so let's move to the dashboard page and start adding some dashboard cards here right so here we can say inside our space we can add different cards so again from the end design so the first card uh it could be we can see the number of other and here we can see the first we can see uh show a icon we can see the shopping cart outlined and here you go and underneath that we can show some statistics uh again from the end design and here we can see the title of the statistics could be the orders and the value could be let's use some random value right now okay and let's add this instead of vertical we can add them horizontally so we can see the direction of the this is horizontal if I save it oh sorry we need to add a space here and we can see this should be inside a space and it should be horizontal right this way right and we can instead of showing all of the cards again and again we can create a small component here we can say the dash board card and we will be passing these type of parameters what is the data we need to show what is the value right so we can cut it from here and paste it here we can just return it and here we can say show the dashboard card and we can pass the title and then the value right and here we can see the title is orders and the value is maybe one two three four five right and here we can say this is the title and this is the value uh passed as a param right or the prop so one package machine yes here you go right so similarly we can show different cards here so we can then show maybe the inventory how many items we have in the inventory then we can show the number of customers we have right uh similarly we can copy this one and paste it two to three times and here we can see in 20 and then we can see the customers and here and then we can say maybe the revenue right if I make it full screen here you go the orders inventory the customers and then the revenue right and so we can add different icons for each of these so for that we can say so instead of showing the same icon everywhere we can pass the icon as a prop as well so for this orders we can say the icon is the shopping cart outlined right and we can copy this one and paste it on all of these right so here we can say maybe uh dollar Circle outlined and we can say this is our user outline and this is uh and Shop out shopping outlined right and we can say we will be passing the icon as well and here we can see this is the icon and if I save it here you go we have shown all of these icons right so let's make these icons a little bigger and maybe we can change your colors as well so if I decrease your size and here we can say it's Style is the color is Maybe green here you go and you can add a background color of maybe rgba zero the green is 255 and blue is zero and we can say 0.5 right if I save it and make its border ads to be it's powder radius to be maybe the 12 pixels and let's increase the font size of all of these we can say it's a 24 pixels and maybe we can add a little padding as well you can see it's trading is eight and increase this to 16 or maybe 20. okay now it looks good maybe instead of this decrease little bit more uh or maybe 25 okay no it's looks good right so we can add the style to all of these icons and we will be changing uh their colors so for the inventory maybe we can say it's uh purple color and if you can see the background color is maybe 255 right here you go and for the dollar one maybe we can say this is a red and it's it's red and it will be 0 0 right and for the inventory where it is so instead of the green uh maybe we can see this is a blue and it will be zero and it will be 255 right if I save it here you go okay so these were the top cards and here we can show some you can see the result orders inside uh table and on the right side we can show a chart right so to fetch the recent orders we will be using the dummy Json and from here we will be using the cart and this is APA to fetch the single card so we can copy this one and add that inside our code so here we can add a folder inside the source we can see the API and inside that we can say index.js and here we can integrate our apis so here we can say export almost we can say get recent orders right and here we can so we can just return it right instead of designer we can say just get added because we will be using the same on the address page right so this will give us the Json of this dummy Json cart so the Json looks like this one so it will give us the products and we can show the product title then its price and the quantity I mean how many uh were bought right so we can save it and inside the dashboard we can create a small component here we can see the function you can see recent orders right and here we will be returning uh table and inside the table we will be showing the columns that will be an array of object and the title of the first column could be let's see what could be the title we can see it's the title and here you go and let's minimize this one okay and the data index for this one is so the data index could be the same as title and let's add other columns as well so here we can say we are showing the title then we will be showing the quantity right with Q capital and then we can show the discounted price that user has paid we can see the same simple price right and I think that's it uh we can show these columns right and let's copy this one and off inside the dashboard after we have these cards we can again inside our space uh we can show this recent orders right and if I save it here you go it has added the title quantity price table we can add this D capital okay and let's fetch this here inside uh we can say use effect right and let's declare the states for holding the data source of this table so you can say used it you can say data source and initially it will be the empty array and also we can show the loading as well so we can say again used it and show the loading wired for its false and once we start loading it we can see set loading to true I think you use effect okay and once we are done here we will be saying that get orders from the API right and once we get the orders it will be res and once we are done here we will be saying that set loading to be false right and here we can say set data source to rest dot I guess it was under the products right so we can see it as dot products right you know if I save it and inside the table we can see its data source is equal to the data source and also we can say loading is equal to the the loading but uh the Lotus State we have here right now if I save it there you go it has shown the loading and once it's loaded it shows the recent orders right and let's remove this position because we will be showing only uh the recent orders right so to hide the pagination we can say the pagination is equal to false so presentation is written and also here we can say uh recent orders and for that we can say inside a fragment we can see it's our typography dot maybe a simple text and if you can say recent orders right there you go recent order right okay so let's add a little gap between these so for that instead of this div we can say it's a space and it's a size of maybe 12 pixels and its direction is a vertical save it here you go it is added 12 years then maybe we can increase to 20 okay the Gap has been increased right and instead of this uh five maybe we can show only the top two or three so here we can see we can supplies Maybe start from zero and get it only the three okay so this is all it will look like the recent orders right and here we can show the chart right so for that we can use the charges and for that we will be using the react charges to npm package right so to install that we will be installing it uh like this way npm install charges and ref charges too uh this way so I have already installed charges as well as this library right so we can directly use that and if we go to its examples and show the vertical bar chart and if we go to the it's sandbox code right and if we go to the app.tsx right so let's import all of these uh they have here right so so on the top we can import the uh charges the scale the element tooltip Etc and then the bar chart from direct charge is two right and the next we need to register that so copy this one as well and then we have registered and and after that we have some options uh whether this chart will be responsive or not and we have to show the legend these Legends and what is the title of this uh chart like this is a bar chart right and then we need to define the labels like these are months and then we need to define the data so these are the data sets those are defined here right so what we can do is we can create our component we can say dashboard chart right so at the very bottom where we have the recent address table so here we can say this is a function and we can say it's our dashboard chart and here what we will be returning is this bar chart and giving it its options and then the data so let's copy this one and return the same right so next let's copy the options from here copy these options right and by the way I have a separate video on how to use the charges and how to customize it so I will add its Link in the description below so that you can take a look right so these are the options and here instead of the position top we can show that on the bottom right and inside the title uh maybe we can say this is our order Revenue right if I save it instead of the export this is on the options then we need to define the data and let's go to the data and this is how it look likes so inside the data we have to define the labels that need to be appeared here and then we need to define the data sets and each each data set we need to define the label that will show on the tooltip so here we have data set one so this is showing data set one and the tooltip and this will be data set 2 and the tooltip right and then we have to define the values that will appear on the chart and then we can Define the background color right so we can copy this data and you can paste it here right and also copy the labels as well right okay so instead of this fake we can maybe instead of this fake we can just do the math dot random and maybe you can multiply it to go by 1000 right so we can copy this one it will do the same what it's doing here and instead of using a third party figure we can just randomize it right so if I save it and go to a dashboard and sorry if we have not rendered this chart so we can go to the very top and along with the recent orders we can show the the dashboard chart as well right so if I save it here you go so it has shown the same chart here what we have uh at there right so instead of using these hard-coded values uh we can get our revenue from the same damage station API so let's integrate that so if we can go to the API and here we can say export const get Revenue right and here uh inside the cards we have option for getting all cars right and this will uh show us the price in each card we have right no right so we can integrate this API so you know this is just a dummy API dummy Json so in in your case you will be having a different API and that might return uh the the revenue date by date or something or month by month we have uh inside the app right so against each month we can have a different Avenue right so because we are making the behavior and we are integrating the damage station so we can integrate this API and here we can show uh the user ID and then the price user has paid right so here we can say that we are showing the revenue by the user right so let's copy this one and go to our code and we can return this fetch right if I save it and copy get revenue and go to the dashboard and here inside the use effect we can say get revenue and from the API and once it's received we can see we get the res and it will give us the the cards right from this response we need to construct uh these labels as well as this data set right so here we can say because labels is equal to the rest Dot got Dot actually it will be called course so res Dot cards dot match and we will be getting each card and here we can return the on the label we can show the user ID so here we can see the user and then we can see the cart dot it will be the user ID right so these will be our labels so let's construct the data sets so for that we need to First construct the data so data will be similar to the label so let's copy this one and here we can say the data and here instead of the user ID we can see the discounted total and we can just return that right away right so this will be the data and we have to return whole data something like data source here we can say const data source is equal to this sorry let's move this one is equal to the labels we have right here and then inside the data sets the label will be we can say Revenue right and the data will be the data we have at the above so we can say this is the data and for the color we can maybe use the pure red right and let's remove the other data set we can just show the one right so we have Constructor similar to we have here so we can remove these labels and the data right and option will still be there so we can update the data source inside uh state so here we can say you state Revenue data and by default it will be similar to what we have here so it will be in object and it will have variables as empty and then the data sets also an empty Ray right and here we can say after we have constructed the data source we can say set Revenue data to the data source right and instead of this data we can say this is a Revenue data right so if I save it and go to our app here you go so we have the data for different users so let's add this inside a card so instead of this mini chart it will have some width and height okay so let's go to here and here we can say add a card and we can end the card here you go it has added to the card right and if I save it and here we can see give it a style of width maybe 400 and maybe 500 and then give it a height of maybe 350 right if I refresh there you go right a little better so we have the revenue and then uh the revenue by each user we are showing here right so user 91 has this much of Revenue this is for again to do the 13 and so on so forth right so maybe we can decrease uh the height uh something we can say maybe 250 is enough okay looks good right so this is how we can fetch the revenue from the API and then we can construct our labels and the data and then the data source that we can eventually render uh on a bar chart right so this completes our dashboard page right so now let's move to the inventory page right so right now it's only showing the inventory we can show the table here and show all of the items we have in our inventory so again for that we will be using the dummy Json and we will be showing the products here that we have right now right so we can copy this one and go to the API and we can say export cost get products or instead of the products we can say get inventory right because that is what we are using right and here we can just return it instead of the console get inventory save it and we can go to the inventory and here we can say uh create a new state and loading but for its false and then we can see again used it data source it will be but for empty okay and inside the use effect uh we can say set loading sorry set loading two two and then we can say get inventory from the API and once we have the inventory we will be having inside the res and here we will be getting the output inside the products right copy this one and here we can say set data source to the res dot this products right let's show this one and remove this one as well and after this inventory we will be showing a table right let's uh add this inside a space and add a size of maybe 20 pixels we will be showing the inventory and then 20 pixels margin and then the table right and what's wrong inside that okay space and for this table uh we can show The Columns as an array of objects and and the title of the first column could be you can say this title and it's data index could be title right we can see title and then we can copy this one and add few more columns okay so we can first we can say title then we can say the price you can see price right and the third we can see maybe the rating right and the fourth we can say how much we have in the stock right and we can see stock and what else we can show maybe we can show its thumbnail as well so what else we can show maybe uh we can show the brand and the category as well right so the brand and then the category we will be showing right okay so let's copy these three and add that the thumbnail here here sorry thumbnail and then we will be showing the brand and then we will be showing the category okay it will be the category the brand uh the thumbnail and then stock right okay these are the columns and for the data source it will be the data source we have declared above inside the state right so now if I go to here here you go the inventory and then this table right okay so let's make some changes here and instead of this horizontal we can say its direction is ah vertical right if I save it as you go and instead of this thumbnail icon we can show that inside the Avatar so here we can see this thumbnail is maybe we can show the terminal at the very start that looks very good here and we can see our custom render and it will be we will be getting a the link here and we can return the Avatar and here we can see the source of the Avatar is the link We Are getting if I save it here you go we have the avatars right and then the title then the price I know the price we can also show maybe the USD or just the dollar sign so for the price again we will be renting it customized one so we will be getting the value and here we can just say inside a span show a dollar sign and then uh the value right save it here you go and then for the rating we can show the rating component from the end design right and here for the rating we can again say render and it's a rating and we can here return the rate component from end design and here we can see the value is rating and we can see the low half is true because the rating is something four point something four point something right it's in point right so that's why we are going the half as well so if I save it there you go the rating and we can disable its uh for the editing its disabled right so its view only right rating and in the stock we have 94 brand is Apple and the categories is the smartphone that is laptops and on the next page we have these items on the next page we have uh these items right so instead of showing all of these items we can change the page generation to maybe uh 10 or 12. so here inside the origination we can see the page size is maybe 10 if you save it and refresh I guess it's already 10 one two three four five yeah okay maybe we can say five okay it's good right so we are showing five items at a time right looks good right this is inventory and similarly we can show the orders and the customers okay and for the orders we will be again showing uh the cart right so for the cart this is the card and there we will be having the title the price and then quantity right so we can show this data on the orders so let's go ahead and maybe because it's similar to this inventory and also we forgot to show the loading uh so here on the table we can say it's loading is equal to the loading from here right so if I go here and there you go it's showing loading right but it's not dismissing it I guess because here we are not setting loading to false if I save it and refresh here you go shown is loading and then loaded the content right so similarly uh for the orders we can just copy all of this and we can go to the orders and it will be similar so we can just paste it here and we can just make the changes that we need so it will be orders then the data source and instead of get inventory it will be the get orders right and data source and inside that again we will be having the products so that's fine right and here we will be showing seeing the orders loading and then for the columns we can decide what we need to show so we can show that the title so we can is there any thumbnail no we don't have any thumbnail so we can just skip this thumbnail we can see we have the title then we have the price then we can show the quantity so instead of this rating we can show the quantity right right away and then we can show the total maybe here total right and then we can show the discounted price and here we can see this is the discounted price right and we can remove this one maybe we can show the price and the discounted price uh all together okay and again we can render it differently for the discounted price it will again issue in the dollar sign right so now if I save it and here it should also be the orders save it and if I go to here this was inventory if you go to the others here you go we have located the orders page right title the price the discounted price the quantity and the total right which only maybe 10 items there right and similarly we can show the customers right and for that again we will be going through the dummy Json and here we can get the users right and this is will be the output of the user we can show some data uh there so for that we will again copying this maybe the order do we have thumbnail uh yeah we have the thumbnail so maybe we can copy the other one the inventory one so we can copy this one and inside um that customers so we can remove this one and paste it here and we can see this is a customers so copy this one and add it at the very bottom as well and then the loading loading and here we can create an API for getting the customers so we can go to the API and here we can say export cost get customers and okay p is extra okay here we can just return this one copy and we can say return and remove this one okay we will be getting the customers there and here we can see get customers okay so data source and once here we will be saying these are the customers loading and for the columns uh maybe we can show the image and here we can see the photo and it will then image Avatar right and then we can show the first name here we can see this is the first name right and then we can show the last name maybe here we can show the last name right and then what we can show is maybe the email right and here we can show the email and again what we can show is uh maybe we can show the phone as well so we got the order we you know home to call okay and then we can we should show the address and here we can see the address address and it should be a custom render so we will be getting the address here and instead of that we will be showing the address dot address right and then maybe with the city as well so we can see uh return uh simple span and here we can see the the address dot address and then maybe your comma and then the desktop city right so here we can see address dot city right and what else we should show and I guess that's and right so we can skip this last one right so if I save it and go to the UI and go to the customers it's loading and what's wrong with it yeah it's we are getting these inside the users right so here instead of the products it should be the users and if I save that here you go so we have the users right the photo the first name last name email phone and then the address and we have the pagination here right so these were the different pages the customers the the orders the inventory that we have and then the dashboard right we're showing the number of folders We have inventory customers and revenue so you remember that these values were hard coded but we can make these uh based on the apis so we can go to the dashboard and here uh where we were showing the dashboard card uh we can fetch different values here and we can show that accordingly right uh so here we can fetch the orders list and we can count that and show that here and then here we can fetch the inventory list and show their account and here we can fetch the customers list and fetch their account and here we can fetch maybe the orders list and then we can total the revenue generated from there right so this is what we will be doing in this video uh because we will be using this dummy Json but in your case you might have a single API that will be returning all of these values and you can directly populate that on the dashboard right so let's go to the dashboard and here we can fetch all of these values so we can say you stay snippet and here we can see or declare the state for all of these values orders inventory customer and revenue so we can say orders and bird fart it will be zero and again the you state we can say in when 30 and this value will also be Zero by default and then again the U State for the customers and it will be zero and then the use date for the revenue right and again then the value is zero right okay so here uh here we were passing the value we will be passing uh the values we have here so here we will be saying these are the orders and this is equal to the inventory and this is equal to the customers and this is equal to the uh Revenue right okay and if I save it I should show zero right as expected okay so here uh inside the use effect uh we will be calling different apis so first for the address we will be getting the orders from the API and then once we have the orders we will be getting inside the rest and if I go to the API and for the others you know we are calling this this one uh the card so let's confirm uh from the API so for the others we are getting cards card slash one right so car slash one here right so it will be giving us the total so we can directly show that value so we can say here we can say set orders is equal to rest dot uh total right and if I go to the here there you go it has added number of orders then we can go to the inventory and for the inventory we were calling the products right and again we will be getting the total here as well right so we can go to here and copy this one and here we can say get inventory from the API and it will be set inventory right and then uh for the customers we will say get customers from the API and set customers right and what left the revenue right so for the revenue uh we are so you know we are calling the get card there and here okay so inside the cart uh we have total discount total right so here again we can go uh while we are getting the orders we can set the revenue here as well so it will be res Dot discount total right and it will be this little spell okay so it will be set Revenue right and here for the revenue we are switching here if I save it and go to here so if I refresh you see uh the orders the inventory the customers and then the revenue we have right and because we are getting these values from the dimension so these may or may not make sense because for this user we are getting a revenue maybe eight thousand and a total revenue is 1941. this might not make sense but because you will be using your own apis and this data will be consistent right okay here you see uh I'm on the dashboard page but this dashboard is not highlighted uh unless I click on that and if I own inventory and just refresh the page uh this is not quite far selected so we can select these menu items based on uh where we are on the router so for that we can two ways we can go to the side menu and here we can say inside the use effect and here based on the window location uh we can say uh cost location is equal to huge location it's again from the react total Dom and once the this location uh dot path name changes so what we will be doing is we can get the path name from here and we can say location dot path name and here we can decrease some uh State uh for the where we can on the menu we can say that these are your selected keys right and here we can say you state and selected case and by default uh it will be maybe we can say it's a slash right when it started and here we can see instructed key is equal to an array of selected keys right and on change of uh the location we will get the path name and here we can see set the selected keys to the path name whatever we have so in in case of inventory it will be this inventory and order it will be this order the pathway will be this one right so if I go to the cone store and I can show you that here we can see window dot location dot path name so it's slash order right so this is all this will be getting uh in this location.path name and as soon as this changes we will get the latest path name and we will set set the slider Keys accordingly right so here always we will be getting uh or the highlighted that particular item so if I save it and just refresh it here you go the order has been instructed inventory refresh inventory started so and if I go here and say customers so it will go to the customers and that will get selected right and also we can make this full height and we can distinguish between the page content and the menu maybe we can add some background color to this page content so for that we can go to the app.css and here for the here we can see that the background color is you can say RGB a maybe this one if I receive it here you go it has added uh the background color also it's added here as well so maybe it's just this one okay and I guess this is not the full full height so if I go to the app.js and see how it's rendered so let's start with the space maybe we can just say inside a div this is the class name and there are two items inside that and in the app.css this is the class name and under that we have side menu and the page content and for the set menu we can say its mode is the vertical and then again we can add maybe this class name we can say side menu vertical right and copy this one and if I go to here and we can say it's also how it is 100 percent here you go so headset has made 100 and no this looks uh good right okay so we are done with the menu the different pages and the header the footer the only thing remaining is uh these icons so you know these icons are showing some dummy values so here we also we can use the dummy Json and we can fetch the number of commands or the emails here and we can fetch the number of orders we have here we can consider those as uh notifications so as soon as we get the order we get a notification plus one right so for that we can go to the header and here we can fetch the maybe for the this mail icon we can fetch these maybe comments right and for that this is the API and we will be getting the total right so copy this one and here inside the API we can see export cost get commands and here we can just return it right and also for the notifications we can show the orders right okay so if we go to the header and here inside the use effect and here we can say get commands and then inside the res we can say it will be the total right so we can here we can declare uh the commands count so we can say you state so commands and by default it will be zero and here we can say set commands is equal to restart dot total right total right and move this one and we can see these commands and this count will be equal to the commands font right so here you go okay so if I refresh nothing and the daughter period right that means we have some uh commands there right and similarly for these orders uh we can replicate this one and we can say get orders and here we can say use state and its orders and but for it's zero and we can say set orders and here instead of this 20 we will be saying it's the orders right if I save it it's 99 Plus notifications for the different orders right and on click of this icons if we want to show these emails or other we can do that as well so for that we can show these inside uh uh we can see our drawer right and the content of that could be the title for this this one we can see uh this one is the commands right and it's open state will be based on uh this mail outline so here we can see on click is will be a function sorry it will be making a state change for opening uh this drawer so again we can go to the state sorry it will be a you state snippet okay so we can say comments open and but for this will be false uh okay and similarly we can go for this notifications so we can say you state notifications open and by default it will also be false right so here we can say open is equal to commands open and on close it will be saying that set comments oh set set commands open to false right and there will be also a prop called uh mask closable it will be true right okay on click we are doing nothing so here we will say set comments open to true if I save it and click on this one here you go so here you can show uh documents right you can close here and close from here as well and similarly we can do for this Bell icon and copy this one and here we can see uh set notification open to two and similarly we can add or Draw for that one as well so here we can say notifications and it will be notification open and set notification open to false right and hit notification open okay if I save it so this will show the notification and this will show the comments right and inside these drawers we can maybe we can just show uh list and the data source for this list will be the commands and instead of this total we can see these commands will be yeah it's uh documents right so res dot commands and rest Dot for the orders it will be products right okay and here instead of this orders we can see we can show the length of these because these will be an arrays and we can just show there their length right and by default instead of zero we can show them as an empty Ray and if I save it where it is com okay so we have 5 and this and now insert the list we can say this will be the commands and in the render item we will be getting the item here and here we can just maybe return the restart item and say that item Dot item dot what is inside these commands maybe the body right so we can see item dot body right and if I save it and go to the app it's showing nothing so let's see the code oh in the render item we have not returned anything so if I return it here you go it has added all of these commands right and similarly for this notifications we do the same we can copy this list and inside the drawer uh we can show that and inside instead of this commands it will be the orders and for the orders uh I guess it's item dot title right and if I go to here here you go uh we have these titles and maybe we can say this the title has been ordered right to look like this is a notification right if I receive it there you go and maybe we can say this is a typography right and here again typography dot paragraph and make it strong okay here you go this has been ordered uh or maybe this just a text because it's going to the new line okay so this has been ordered this order this order right so these are the commands and these are the notifications right so this concludes our dashboard so we have shown the header the side menu uh the dashboard the inventory the orders then the customer then the footer right but still if you have any questions please let me know in the comments below and if you have learned something in this video please hit like subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 100,519

Keywords: reactjs, antd, ant design ui, antd react tutorial, codewithaamir, antd react dashboard tutorial, react dashboard app, antd-react dashboard project, react dashboard sidebar, react dashboard chartjs gpraphs, react dashboard table with api integration, react simple dashboard, free react dashboard antd, react admin dashboard, react admin panel, order management system dashboard react, Build Admin Dashboard App using React and Ant Design, Dashboard Sidebar Statistics Cards Chart & Tables

Id: xvBUgdKUz5g

Length: 90min 57sec (5457 seconds)

Published: Mon Jan 16 2023