Build a Fullstack Next.js 13 Admin Dashboard | Next.js 13, Tailwind CSS , MongoDB, Next Auth

hey everyone and welcome back to the channel so in this particular video we are going to create this next.js admin dashboard using the latest version of Nexus now we are also going to use teluguin CSS for styling we will use mongodb for our database and also one very important point we are going to integrate with Google auth so let's see what is the functionality and after that we are going to basically discuss how we are going to log in a particular user so you can see that we are having this dashboard View and now here we are having this product and a visitors now another thing I want to mention this is not a real website this is just to give you some idea how you can basically work with admin dashboards so you can see that in this products page basically we are having all the products Now product is having a name month price of the product sales and how much is the revenue so you will be basically able to create a new product so let's say I want to create a new product so I'll give this one as product eight visitors is 500 price is 20 number of cells is let's say 50 and the month is September so if I try to add this one so this product will be added in our database and will be basically getting the data back if I now try to go to the dashboard so whatever product we have added here based on that will be having the eight products you can see that this will be updated the number of sales and also this yearly analytics overview will basically show for each and every month how much is the sales cost and the revenue for all the products so you can see that this will be basically automatically updated here now for example let's I want to add something for December so if I try to go to products and let's I'll add a new product here so let's give this one as product 10. we'll give a visitors of 1000 price of 20 sales is let's say 600 and month I'll give this one as December let's try to add this one here so you can see that these will be basically added here and if I now try to go to dashboard so you can see that that data will be updated here so now you can see that for December you are getting the updated data so this is the cell this is the cost and the revenue now let's go to the visitors so in this page you can see that uh we'll basically track the visitors so how many visitors are visiting the application from which location the device the premium visitor and also the month so we also will be able to create a new visitor now if I now go to the dashboard you can see that will be basically tracking The Visitors by country from which country there we only saw basically the four for now all right and here you can see that we will be also tracking the visitor by the device so whatever will be adding that it will be updated here so let's I'll go to visitors and let's I'll add a new visitors for example 500 let's give premium user of 100 location will give this one as India device will give this one as for example uh mobile and now month I'll give anything I'll just add this on here so these will be added here now you can see the mobile you are having one two and three so we are having five hundred five hundred one thousand two thousand if I now go to dashboard you can see that this will be basically updated here so now you can see that now we are having two thousand uh mobile and then rest is laptop and then we are having tablets something like that all right Also let's say if I add another visitor here so let's give 100 visitor premium is 50 location will give India will select a device of desktop month I'll select any try to add this on here so this will be added here if I now go to dashboard you can see that here now we are having also desktop so this is how we are going to basically track and also that data will be updated here also in this part so this is uh the thing we are basically going to also we are going to track this premium visitors and under your total visitors so this is all about the dashboard that we are going to create now let's see the login functionality so you can see that if I now just log out so this will basically call a Google auth uh endpoint so for this one we are going to use next auth so it will basically go back and if the user is not authenticated so it will go to the unauthenticated page and you'll also able to not be able to uh access this any of the pages if I now login because I already logged in in my Gmail so it will automatically get the user that user will be stored in our database and based on that will redirect to the dashboard so let's see if I now click on login so it will automatically see it's automatically logging in now it will basically navigate back to the dashboard so you can see that it's now navigating back to the dashboard so this is uh what exactly we are going to create in this particular video pretty sure that you learn a lot of things now again I'm repeating this is not a real website so some of the functionality you might think that why this is happening but this is just to give you some idea you just think yourself as admin user and let's say you have to keep a track of all the products and the visitors in that way you will be able to understand that okay then I will be able to create visitors or products and based on that I'll be tracking those in our dashboard so this is exactly what we are going to build if you are liking my content please give a like comment down and please subscribe to my channel let's get started so in the next video we'll be creating our project and we'll basically create our main Global context and the global structure so let's do that in the next part all right everyone so as you can see that I've created a project now in this video what we are going to do we will be installing all the packages that we need and also we'll be creating the in global context and also will create the main structure of this particular application so if you see that we basically need these packages we need this react Apex charts this is for all the charts then you need react icons react Spinners and then next auth and this is basically for the Google Authentication so let's install all of this so we'll start with npm install and this will be react Apex charts then we need next auth also we need mongoose we need react icons and also you need react spinners all right so let's install all of this now in the meantime here we can remove uh this part uh so I think we can remove this one from here or let's skip it like this for now so the main thing is that we have to create the main structure so the first thing what we are going to do inside the source we will create our context folder and then also we need a components folder and also we will be creating some of the models that we'll be creating in the later video so in the context we will be creating our index dot Js so here the first thing we have to create the global context so we'll give this one as export const Global context this will be equal to use context sorry this will be create context so you have to create the context first and this will be of null also you have to use client here all right now let's create our Global state so this will export default function Global State this will receive the children and here we are going to return the global context dot provider and we'll pass these children obviously you have to pass the value which will be basically a global state so here we are going to pass a empty object for now and that's it so this is the basic structure that we need now what is the next thing we need to do we basically have to create the sidebar and the header and also then we'll be having basically the main content all right so what we are going to do inside these components we will create two folder I'll give this one as sidebar and let's create another folder let's give this one as adder so let's do this on as index dot JS so here we'll do export default function this will be header and here we are going to return some div and this will be our header all right now next thing what we are going to do for now let's keep this one as as a client component let's copy this and let's go to our sidebar and let's create our index.js so this will be also a client component and here I am going to give this one a sidebar and this will be our sidebar component so this is basically the main two common component that we need all the time now what we can do we can basically go to our layout and here we have to create the basic structure now the first thing what we need to do we have to basically let's remove this children from here inside this body we have to first import the global state which will be basically our context State all right so inside this we are going to take a div all right and let's give a class of uh let's uh take a class name we'll give this one as flex blue H screen then we'll do overflow as hidden all right now here we are going to basically render the sideward component that we have then we'll take another div here so let's take a class name for this one I will do this one as relative flakes flakes one then we'll do Flex column overflow y Auto all right and overflow x hidden now here we are going to render the header component all right now so this is all about the common component that we basically having and then we'll take a main and here we are going to render the children which will be the individual content for individual Pages all right so here we are going to render the children now let's take a class name so for this div we'll take a class name of we make this one as MX Auto we'll do Max W screen 2XL then we'll do padding of 4 for AMD we'll do padding of 6 and then 2XL we are going to do a padding of 10 all right so now let's format this let's save this and let's see what you're getting all right so we are having sidebar and header here and this is basically the main content which is coming from the page dot JS and here I think we can basically remove everything from here and let's give this one as home page for now all right and let's remove this image part also all right so you're having sidebar and then header and then home page so this is basically the very basic structure we are having now what will be the next step so in the next step basically we will be start working on this main UI for this sideward and this head work header component and after that will be start working on that Google auth so let's do that in the next video hey everyone and welcome back so now in this video we are going to basically create the sidebar component all right so let's go to our code and then I'll close everything else now the first thing is that you have to create the menu items all right so here this menu items is basically the array of objects that we are going to create a kind of configuration and then we are going to map it so that we don't have to write in each and every line of GSX block over and over again so we'll do this one as const menu items and here what you are going to do the first thing will take id id will be dashboard all right then we are having label which will be dashboard then we are having a path all right and at the end we are having a icon component so this icon component we are going to render from the react icons so let's start with the first one so we'll do import something from react icons and the package name is Lu so this is the first icon we need second will copy this one so the second one the package is DB and the last on the packet name is Pui so the first icon name is l u layout dashboard the second one is DB sorry TB brand product hunt and the last one is p i users for light now the first one we are going to use here Lu layout dashboard and then we are going to pass a size property use this one as 25. let's copy this and we'll paste it two more times so the second one this one will be our products page this will be label will be sorry so this label will be products so it will go to the products route and then for this one we are going to use this TB brand product icon and the last one will be our visitors component that how many visitors uh is basically visiting this particular website that admin will taken care of so here we are going to give this one as visitors now here let's give this one as visitors and here we are going to use this one as Pi users for light so this is our menu items that we are going to map it all right so now let's go to our jsx and I'll remove this one from here now here I'm going to take aside component all right and let's take the class name here now the first thing is that for this one we are going to take a absolute we'll do this one as left 0 top 0 do Z 4 times 9 then we are going to do this one as Flex we'll do h screen will do width of 72.5 now this one I will be basically using this classroom from a televint.config.js so I already created this config.js that you will basically find it in the attachment so I'll add this basically the starter file obviously the startup project so from there you will be basically able to clone it or basically whatever you want to download it and based on that you will be basically able to get these class names all right now here after this will be taking a flex call then we are having the reason I just want to mention why I am right not writing all the Tailwind config because it will take so much time so that is the reason I already created all of this beforehand and then you guys can download it and basically use in the project all right so for this one I will take overflow y hidden all right we'll do a BG of black now let's take some of the so here we are going to use a duration of 300 will do is linear all right then we'll do for large this will be static for large we are going to do Translate x 0 and here we are going to basically check and also let's do one thing let's take this one as template literals because we have to also pass some Dynamic values so here so what we have to check basically so if the sidebar so here sorry I think we have to take a curly bracket so this will be if sidebar open is true so this is the flag or basically state that we are going to basically manage from the context so I will be creating this one in a minute so if this is true so for this one we are going to pass a translate x 0 or else we are going to do minus translate X full so let's write it so we'll do translate X full all right now from where this will be coming so let's go to our context and here I am going to create a state so this will be const sidebar sidebar open set bar open this will be equal to U state of false and then we are going to pass it in our context and the same we are going to use it here so this will be const this one from use context of global context all right so this is all about the main wrapper that we need now inside this what we are going to do we'll take a div now let's take a class name so for this one we are going to take Flex item Center we'll do justify between we'll do gap of 2 we'll do PX of 6 p y of 5.5 now again this class name I already written in the config large this will be py of 6.5 now here I am going to take a link component from next slash link and for now let's give a some name like admin dashboard or something all right or let's give this one as analytics we'll this is basically the website name you can give whatever you want for now I'll give this one as Analytics so for here I'm going to give hrf of Slash and also for this one let's take a class name so for this one I am going to use a text of how much you'll use this one as 40px all right let's format this all right so after this we are going to take another div here let's take a class name so for this one we'll do Flex Flex column we'll do overflow y Auto we'll do a duration of 300 and we'll do is linear all right now inside this we are going to take a nav component so let's take a class name here also so we'll do margin top of 5 py of 4 PX of 4 for large we'll do margin top of 9 and for large we are going to do p x of 6. all right now inside this we'll take a div and here we're going to take a ul and inside of this we have to basically render this menu items but before that we are going to take a class name for this evil so we'll do MB of 6 margin bottom then we'll do Flex Flex column and then we are going to do a gap of 1.5 all right now what we are going to do we'll do menu items that we are having dot app map and this will be our menu item all right now here we are going to render a line so the first thing we have to always give uh have to give key here so this will be menu item dot ID all right and here what we are going to do is take a label so here we are going to first render item sorry menu item dot icon and we are going to enter menu item dot label all right now for this level we are also going to take some class name so for this one we will take a class name of we made this one as group we'll do relative then we'll do cursor as pointer we'll do Flex item Center we'll do gap of 2.5 rounded SM then we'll do py of 2 e x of 4 we'll do font medium we'll do text body dark one duration of 300 will do is sorry it will do is in out all right also we are going to do a hover for hover what we are going to do BG gray dark and what else you need to do also you have to basically check whatever the current active element that we will be basically clicking whether that is dashboard or products or visitors we have to basically show some kind of background so how we are going to do that so for this one we will basically take a template literals here again so let's convert this one so and now here we are going to pass some Dynamic properties how we are going to basically do that so for this one we are going to check const path name which will be equal to use path name all right so these we are going to basically render from so let's do this import something from this will be next slash navigation and this will be use path name so this will be our use path name all right so from here we will be basically getting the path name so what we are going to basically check here we will check that if this path name dot includes this menu item Dot ID so in that case what we are going to do we will basically here pass a BG of J Dark all right so that means whenever we will click or this path name includes that particular value based on that we are going to change the background color all right so I think that will be fine for now let's format this and let's save it and let's see what we are getting awesome so you can see that we are getting dashboard products and visitors so for this one let's uh use some class name for now so let's go here and let's use a text of white for now our later we'll change this one with some icon so for now this is fine so this is all about our basic uh structure we need now another very important Point what we need to do we have to basically create all of these Pages or else it will give us four zero four so let's go to our app and let's create our all the three pages that we need so the first one will be our dashboard then we are having products and at the end we are having visitors so let's start with our page dot Js so we are going to make this on the export default function and this will be visitors let's return here and let's give a div we'll do this one as visitors let's copy this let's go to or let's copy this page file only let's paste it here and also here for this one we are going to make this one as dashboard and for this one we are going to make this one as products all right so now let's save it now another thing what we need to do basically we have to on click of this sidebar each and every main item we have to render go to that particular page so you can go here and let's give one click for this particular level all right so here we can do handle navigate something like that and here I am going to pass the menu item all right and here what we can do we'll do const sorry const handle navigate so this will get menu item all right now here uh we have to basically check if the user is authenticated or not but that we are going to do in the next uh video because if the user is not authenticated in that case what will happen whenever they will click any of this uh particular uh menu item it will go to our North page all right so that also we need to uh create so for this one what you can do you can go to app and let's create a North page also and let's give a page dot Js and here I'm going to do export default function this will be R naught page and here what we are going to basically render for now let's return a div and we'll show something like you are not authenticated all right so now let's go here so what we can basically check for now I'll not do that logic that one will be doing whenever we will start integrating the Google Earth for now just we'll basically take a router this will be our use router and then here we are going to do router dot push and this will take this get menu item dot path all right so let's format and save this let's go here let's try to click here and also another thing we need to check all right so this is fine so if I now click here it should go to the products page so it's going to the products if I click here it's going to the visitors and you can see that if I click here it should go to the home page and everything is done so that means we have created our sidebar component now let's start working on this header component in the next button also after that will be start working on the Google auth integration hey everyone and welcome back so now let's start working on the header component so let's go to our header component let's close everything else now I'm going to remove this one from here and here I'm going to return a header component so let's take a class name so we are going to make this one as sticky we'll do top as 0 we'll do Z triple nine will do Flex W full then we are going to do BG of white we'll do drop shadow one then we are going to do I think this is fine now let's make this one as drop set only okay now next we'll take another divier let's take a class name we'll do Flex grow we'll do item Center we'll do gap of 2 justify and P Y of 4 PX of 4 will do a shadow of 2 and then we are going to do MD PX of 6. 2XL PX of 11. and here let's make this on only shadow next we are going to take another div here let's give a class name we'll do Flex item sorry item Center we'll do gap of 2 will do SM gap of 4 and for large you are going to make this one as hidden all right now here what we are going to do we will be basically do a button and we'll we will create a toggle button where on click of that the user will be able to toggle the sideward so for this one what we are going to do the first thing is that let's go to sidebar and let's import this to State variable from context because this we need now here what we are going to check we have to basically check if the sidebar open is true so we are going to basically so hide sidebar or else this will be so sidebar all right so for this button we are going to take a class name so let's make this one as inline Flex we'll do item as Center we'll do justify Center we'll do BG of black loopy X of 6 py of 2 will do text as large text White font medium tracking wide and also do uppercase all right so this is one button that we need now what is the second button that we need and that is to uh that is basically two so the login or log out so for this one first we'll keep this one as login because you haven't created that function ID yet and here what we are going to do we'll use the same class name so let's copy the class name from here and we'll pass this one here all right let's save it and let's see what you are getting we are getting error use context is not defined so you have to import it and also let's import This Global context let's see all right now this is fine so we are getting a login button here so on click of that now we have to basically create the functionality so now let's do this one in the next video and before that also in the next video what we need to do we have to create the mongodb database so whatever user will be logging through this Google Earth what we are going to do we will basically catch that information and we are going to store this one in the mongodb database so let's do this functionality in the next video hey everyone and welcome back so as you can see that I have created a new project in the mongodb so now the first thing what we are going to do we will be basically uh we'll read uh we'll write the logic to connect with DB in our code so let's click on this connect and let's go to our mongodb for vs code and let's copy this from here let's go to our code and inside source I'm going to create another folder and let's give this one as database and let's create our index.js so the first thing what we are going to do will import Mongoose from mongoose and then we are going to create export const and this will be connect to DB all right so this will be a sync method and here what we are going to do will do a try and let's do a avid this would be Mongoose dot connect and then we are going to paste this URL and also you have to change the password so I'll just remove this let's copy and uh sorry you also have to remove this part from here and let's paste it here so this is my password you can create your own and then use the same password here all right let's take a catch block error and here I am going to just log this error all right and let's also log here that to know whether we are basically connected to mongodb or not so here also connected to mongodb that's it all right and also you can do one thing we can remove this one from here let's do this one as a default so this is done now next thing what we are going to do whenever we will login through our Google auth so whatever information that we will be receiving the username and the email that we are going to store in our database so for this one we need some kind of model so let's create another folder and let's give this our name as models so the first one will create another folder let's give this one as user now user and visitor both are different user is basically the current user that or you can basically consider that user as an admin user who is updating the visitor count or basically adding a new product so that is basically this user model now visitor model we are going to create later for this one we will do this one as index.js and here what we are going to do first we'll create our const and this will be user schema and this should be our new mongoose dot schema all right and here what we are going to pass we will basically pass the properties that we need so first thing we need an email so this will be a type of string and also these will be required property as true next what we need let's copy this and let's paste it here so we also need a name so this is also required and after that what we are going to do here we are going to pass this time stamp and this will be true all right so after this we are going to just do const user these will be Mongoose dot models dot user or here we are going to do mongoose dot model and here we are going to pass user and this will be equal to basically this user schema and at the end we are going to do export default user that's it so this will create our model for the user now what is the next step now in the next step we basically have to create the API route for this particular user model so let's go to our app and inside this what we are going to do we will create another folder let's give this our name as API so inside this will create another uh what we can do we can basically create a folder here another user folder and let's give this one name as route dot Js all right sorry so this will be route dot Js all right now what we are going to do this will be a post method so we'll do export I think function post we are going to get the request here now the first thing what we are going to do will try and catch all right so here we are going to log this error if there anything we are going to return this next response dot Json so we'll do a success of false and then you will do message something like something went wrong please try again all right so here what we are going to do the first thing we are going to connect with our database will do Avid connect to DB and then we are going to extract the name and the email and this will be from our Avid request dot Json all right now after this what we are going to do we will simply create our new user so what we can do we can simply do something like const new user and this will be our avid user that we just created dot create and here we are going to basically pass this name and this email all right and we'll check if this new user is true so we are basically going to return something like next response dot Json and let's return a success of true and we are going to return a message something like user registered all right so this is all about the main user route that we need here let's do one thing let's give some else also that something went wrong or something like that and here we are going to make this one as false and we'll do this one as failed to register the user please try again something like that and this is all about the route we need for this user now what is basically the process whenever we will click on this login button it will go to the Google auth callback or basically that login page once the user is authenticated it will basically come back to that our application again and then in that case what we are going to do we will basically check if the user is authenticated in that case we'll basically receive this name and email all right and based on that we are going to pass this name and email in this API route and then based on that it will store in our database all right so this is the whole process now next thing what is basically need we have to also create the Google auth provider so here I will create another folder here and let's give this one name as auth provider let's create index.js here now what we are going to do we will basically use this one as a client component and here we are going to import something from next auth slash react and these will be session providers all right sorry session provider here what we are going to do we'll do export or let's make this one as const next auth provider all right this will receive the children and here we are going to return this session provider and we are going to pass these children and let's do this one as export default next auth provider now where we need to use this one obviously we need to use this one in our main root component this root component is basically our this layout so you can see that we already use this Global state so here we can simply import this next auth provider and then we can cut it from here and then we can basically pass it inside of this now this part is basically the children that we have basically used here all right so now almost everything is done now in the next video what we need to do we have to basically create our next auth route that will basically apart from the Google auth process and once user is authenticated based on that we are going to call this route and then we will store this user in our database so let's do that in the next hey everyone and welcome back so now in this video what we are going to create we will basically create this Google auth credentials that we basically need now to create this on what you need to do you just have to login on this Google console so basically you have to log in with your email and then you can see that I already created one project here now once you created the project you will get this options here credential and then you have to create a credential here and then you will create on this auth client ID let's click here now here it will ask for this application type so here we are going to create this one as a web application so I'll click here then you can see that we are having this web client one you can change this name then we have to basically give the URL so for this one I'm going to copy this localhost 3000 and you have to remove this Slash from here and for this one what we can do we can basically give API slash auth slash callback slash Google all right so this is the uh auth callback that we basically need or basically the redirected urd so now let's click on this create so once you'll create this one it will basically give you a client ID and the client secret ID you can see that all right so for this one what we can do now we can basically go to our code and then inside this API I'm going to create another folder and let's give this one name as auth and here I'll create another folder here and this will be a catch-all route so here what I'm going to do will give this one as a next PATH all right now inside of this I'll create our route dot Js so what are the things that we need to do the first thing is that we have to create a auth options so we'll create our auth options all right so these will be object and here you will be basically have to pass the provider so in our case we are using Google so if you are using some other provider for example like GitHub or something like that so you have to basically give the credential of that particular provider so in that case what exactly you need to give for this provider you have to pass the client ID and the client secret ID so let's see how we are going to do that so we'll give this one uh as providers and here what you need to pass you need to pass this Google provider all right so this Google provider you have to import from next slash or auth so we are going to do import Google provider from this will be next auth slash providers slash Google all right so here what you need to pass you need to pass the client ID so let's go here let's copy this client ID and I'll pass it here and also you have to pass the client Secret so let's go here and let's copy this client secret and I'll pass it here so this will basically uh Deno basically inform that we are using this Google provider here now what are the next thing what we need to do once the user will be authenticated it will basically give us a callbacks and based on that callback we can call this user route that we have created and whatever information we will be getting based on that authentication user so we'll get this name and email and then in that case we'll call this API route and we'll pass this name and email and then we'll store this information in our database so what we need to do here we have to basically take a callbacks and here what we are going to do will create a async method so this will be sign in all right now this method will give us a user so this is the user that the or basically let's see if I am logging through my email so this will be my user and then it will give us a account all right now here what we need to basically check we have to basically check if the account dot provider so this account will give us a provider so this provider is a Google provider or Not So based on that we need to do certain operations so what we can do we can basically check if this account dot provider if this is equal to equal to Google so in that case we have to basically get the name and the email so this is uh I was talking about so this you need to get it from this user information all right so after this what we are going to do we'll do a try catch block and here the first thing we are going to do have it and we have to do connect to DV and in the catch block we simply log the error here so just to log and this will be error all right now the first thing what we need to do we have to basically check if is user exists so if the user is already exist or not so for this one you have to do Avid and this will be our user this we have already created the model and this will be dot find one all right and we are going to find with this email all right so now here what we can do we can simply check if this is user exist is false that means the user doesn't exist will do const response equal to Ave it and this will be fetch so it will basically go to this slash API slash user route that we have created so this will be slash API slash user and here we are going to pass the method as post we are going to pass headers we will do content type this equal to will be application [Music] slash Json all right and after that also you have to pass the body so this body will be Json Dot stringify and you have to pass this name and this email that's it now here what we can do we can basically check if this race Dot success so this one will be basically receiving this success is true if this is true so what we're going to do is going to return this user so you're going to return the user information so this will basically catch the error and here also on the outside we are going to return the user by default and I think that's it now here what we need to do you have to create the Handler so this will be our next PATH so this we have to import from next auth slash next and here you have to pass this auth options and at the end we are going to do export these Handler as gate and we are going to do Handler as also post let's format this let's save it so this is basically we'll take care of all the things so whenever we click here it's basically check if the account.provider is a Google and if the user is authenticated it will get the user information from this user and then it will basically check if the user is exist or not if that is not the case then it will call our API and based on that it will basically store the user in our database and that functionality we have already done here all right so this is done in the next part what we are going to do we will be start integrating this one with the front end so let's do that in the next video all right everyone so in the previous video we have completed the next dot API now in this video what we are going to do on click of this login button you have to go to the Google login page and based on that you have to basically check if the user is authenticated or not and if the user is authenticated so in that case you have to basically save that user information in your database another thing I notice is that the background color of this header section so for this one I think we have used some wrong class name so let's go here and you can see that I think we are using summer BG white so this will be w so this is the wrong here all right now this is fine so in this header component what we are going to do let's close everything else so we are going to take on click method and here simply we will call the sign in method all right now definitely you can pass some a provider so you can see that we can pass a provider so we are going to pass a provider Google but first let's see what exactly we are getting and also let's import status from use session and let's log this status here let's save it and let's see what we are getting so now let's go here and you can see that if I now refresh this page so you can see that we are getting unauthenticated here so user is not authenticated so let's click on this login button and you can see that we are going to this um author sign in page and this is basically giving you this option sign in with Google now let's click here and I'm already logged in in my email so it should uh basically authenticate me and then it should store my information in the database so let's see what is happening so you can see that it's now going back to the home page again and here the first time we are getting log loading this is very important because that time actually it is in the process of authenticating the user so that is the reason this is loading and once the user is authenticated so we are getting authenticated here in the status or basically here if I know go to our database and let's rephrase this page you can see that we should get one info in our user so you're getting user and here we are getting my email and the name of my so you can see that this is correct so that means the user is authenticated now there are quite a few things we need to do so the first thing is that we have to change this one to log out so that we need to do first thing is that we can check if this status if this is equal to equal to authenticated so here we are going to so log out or else we are going to so login all right here also what we can do we can use the same thing so now let's copy this so if the user is authenticated so you are going to do sign out or else we are going to do sign in and let's pass a provider of Google this format and let's save it let's see what is happening so you're getting log out if I now click here log out so you can see that now you will be able to see the user is unauthenticated so user is unauthenticated let's click on this login and you can see that it's basically directly log in that particular user and you will be getting authenticated awesome so now what we need to do basically you have to basically check if the user is authenticated so it will redirect to the home page or if the user is not authenticated so it will go to the north page that we have created so where we can basically check it we can simply check it in our context as you can go here and let's take a use effect all right and here we can basically give the status as a dependency so these status we are going to take it from here so let's paste it let's import this so here we need to check if this status so you're going to check if the status is equal to equal to unauthenticated and also you have to basically get the path name all right so here we will use this use path name so if the user is unauthenticated and we can basically check if the path name dot includes this slash or what we can do or here also you can basically or it will include this products or it will includes visitors so that means the user is unauthenticated and if any of the path name matches so you can give this one this one as slash products and slash visitors so what will happen let's take this const router as use router and here we can simply do router dot pulse it should go to the on Earth h all right and here we can basically directly check from here also I will take this one as use effect and we'll check give this status as a dependency and because when from the Callback it will return back to this particular page we have to navigate to the um navigate basically from the hanath page to the home page so we'll do if this status is equal to able to authenticated so what we can do we'll do router so you have to also import routers will do const router equal to use router and this will be router.puss this should go to the slash page all right so now let's see what exactly is happening So currently now let's say the user is logged in so if I now click on this log out so it should go to the on auth page from this home page so let's click on this logout let's see what is happening so you can see that now it is going to the on auth page and now if I now just login so it should go to from another page to slash page or basically the home page which is the dashboard so let's click on login and let's see all right so now awesome so you can see that user is authenticated so it's going to the home page if I now try to and now let's log out from here so it's going to the on earth now let's say try to go to the products page it's going to the Arnold page if I try to go to visitors it's going to the north page and if I try to access the home page it should again go to the unoff page awesome now what we need to do on click of this nav 6 and also you have to do the same thing so whenever we'll click on these products if I click here you can see that it's going to the products page so to check this one what we can do we can go to our sidebar component so go here and let's import this status from this use session and here we can simply check if this status is equal to equal to unauthenticated so we'll go to the router.puss and it will go to the slash our North page let's save it let's see so now let's refresh this so it's going to the unoff page if I try to go to the visitor from here on click of this it should go to the another page all right so it's still here all right so I got it so the reason is we have to basically return from here so let's do like this and we'll return from here now let's see so now let's say try to click on this products it's going to the honor page if I try to go to the visitors you can see that still in the unoff page only if I go to the dashboard it's there if I try to access from here also it will go to the unoff page only all right if I try to click here it is still in the north page all right so now everything is done if I try to now login all right so going to the home page now if I click on these products so it's going to the products if I click on visitors is going to the visitors so the main authentication part is done using Google Earth and you can see that the user is also stored here now what we are going to do in the next video we will be start working on the products and the visitor page one by one so first thing is that you have to create all the form controls and the common model and after that you have to basically create all the models and the API routes to create the add new product and also add new visitors so let's do those in the next video hey everyone welcome back so in the previous video we have completed the main authentication now in this video we will start working on this visitor and this products page now one thing is that whenever we will go to this visitor page we will be having this add button and then on click of that button you have to show a model where basically will be showing all the form controls so form controls I mean basically the input select and the button component so for this one what we are going to do we will create a common form controls and a common model component and then we'll be passing all the inputs as the props so the first thing is that let's log in here all right so now let's go to our code and inside components let's create another folder and let's give this an image form controls and here I'm going to create basically three files so the first one will be your button dot Js then we have to create input dot Js and we are going to create select dot Js so let's start with button so let's take this one as export default function sorry this will be default function button now this will receive two properties one is text one is on click all right and let's return here so we are going to return button then this will be our text and in this one click we are going to pass this on click method as a as a Prof here so on click of this will trigger this method here all right also we will pass some type here so type will take this one as button and let's take some class name so we'll take this one as inline Flex we'll do it in Center let's make justify Center we'll do BG black we'll do PX of 6 p y of 2. text will do large text White font medium will do uppercase and tracking wide all right so this is about our button component now let's move on to our input component so in this input component let's quickly create so this will export default function this will be input so input component will receive label it will also receive a placeholder it will receive on change it will also receive value and type all right so let's return here div so for this one we are going to give a class name of relative here we'll take a paragraph and we are going to render this level here for this paragraph we'll take a class name of PT of 0 we are of 2 PB of 0 PL of 2 will make this one as absolute minus Mt 3 Mr of 0 MB of 0 margin left of 2 will do font medium we'll do text Gray 600 all right and also do BG White now next we are going to take a input here so here we are going to pass the placeholder as this placeholder that will be receiving from props then we are having type so type will be this type orders this will be text by default then we are leaving value value will be this value here then we are having on change on change will be the on change the sound change that will be receiving and also you're going to take a class name so class name will do this one as border placeholder Gray so it do Grace 400 we'll do Focus outline sorry we'll do Focus outline none then we'll do uh W full do pt of 4 let's make this on PS4 so total padding is 4 then we'll do here margin of zero we'll do text base block BG White all right and also we'll do rounded MD that's it so this is all about our input component that we need and at the end we are having the select component so let's quickly create this one so this will be export default function select select component will receive a label it will also receive value it will receive on change and also it will receive the options which will be empty array all right so now here what we are going to do so we are going to return the same Logics we'll take a div let's take a class name of relative and we are going to use the same paragraphs I'll copy from here and we'll paste it here that's it so this is our level next we need some select component so here we are going to pass the value as this value we will pass a on change which will be this one change now here we will take your option all right and here we are going to pass this select so for select we don't have any ID so ID will be empty and value also will be empty next what we are going to do we will Loop this options and then options dot length if this is true or else this will be null so here we are going to basically do options dot map this will be item and this will return options and here we are going to basically return this item dot level so for this option we'll pass this ID which will be this item dot ID manual Pass key key will be item dot ID and also will pass a value which will be item dot ID that's it and also for this input will copy the same class name and we will basically use the same in this select component also so let's format this and also I think here we have to do this one as on change that's it so this is all about our select component that we need now let's go to our model so for this one we also have to create a model component so we'll go to our component folder and let's create a folder here and let's give this Anonymous model and let's create our index.js and let's close everything else here so here we are going to do export default function this will be model all right and here we have to pass some prop that will be receiving that we are going to do in a minute so here let's create the main structure so here we are going to return so here the first thing what we are going to return uh we are going to basically check if there is a so property so that means if we want to show the model or not so this will be so so this is the first prop that we'll be receiving from our parent component so so is true then we are going to basically render this model or else this will be null that's it so here what we are going to do we will basically take a jsx here so we are going to take a div so for this one we'll take a class name we'll do this one as justify Center will do item Center reflex overflow x hidden overflow y Auto will do fixed inset of 0 into Z index of 50 we'll do outline none and for Focus we are going to do outline none all right so now inside this what we are going to do we will take another div here and we'll take a class name we'll do this one as relative W Auto Mi of six MX of Auto and Max W 3XL now here we are going to take another div and here we are going to take a class name so for this one we are going to do border of 0 rounded LG we'll do a shadow of large I'll do relative Flex Flex column W full BG White outline none all right now here we are going to take another div we'll take a class name we're going to make Flex item start justify between padding of 5 border bottom and we're going to border solid and we'll do a rounded t all right and let's make this one as border slate 200. here we are going to basically take H3 and we are going to render the title of the model so here we will enter this title now this title we are going to receive from props so this will be our second prop and let's give a class name so for this H3 we'll do text of 3XL will do font semi bold that's it now after this what we are going to do so here we are going to take another div we'll take a class name we'll make this one as relative adding of 5 Flex Auto reflex Flex column and gap of 5. now here what we are going to render we will be basically rendering all the form controls that we will be receiving from the parent component so this will be our third prop so this will be form controls which will be a array so here what we are going to basically check if this form controls and then form controls dot length this is true orders this will be null definitely now here we are going to basically map this form controls dot map this will be item and here we are going to basically check if this item Dot component type that we are going to create so component I will be basically if this is the input component or this is a select component so this is one property that we are going to create so if this is a input so in that case we are going to render the input component or if this is a select we are going to render a select component so here we are going to if item dot component I believe this is equal to equal to select so in that case we are going to render a select or else this will be null so here what we are going to do is basically uh got the this we basically import this input and here we are going to import this select component that we have created that's it now here we have to pass all the properties so the first thing is you have to pass a type which will be item DOT type also have to pass placeholder which will be item dot placeholder we also have to pass a label which will be item dot label what else you have to pass you to pass I'll say value so this value and on change we are going to do this one later now here in the select we are going to pass the label which will be item dot level then we are going to pass the options which will be item dot options and also to pass the value and on change so that we are going to do all right so this is all about now after that what we need to do we have to take another div so this will be our footer so here we are going to take another class name we'll make this on a flex gap of two item Center justify end a loop padding of six we'll do border of t I will do border solid and we'll do rounded B all right here what we are going to do it will take button so basically two button we have to take so let's do one thing here instead of this button we have to render the button component that you have created so this is the button component that you have created and the same button component will take to another time so for this one we're going to pass a text so for this one this will be add something like that and here we have to basically pass on click method which will be on ADD now this on ad again we are going to receive from the procs see how step by step we are doing next here for this one this will be text and for this one this will be something like close all right and on click here what we need to pass you have to pass a property and based on that you have to close the model so that we are going to do in a minute all right and I think this is done now after all of this what we are going to do here we are going to take another div all right and here we are going to take a class name off we'll make a opacity of 25 we'll make this one as fixed we'll do in set of zero we do Z index of 40 and we'll do BG as black all right let's format all of this so this is all about our model component that we need so created all the form controls so you've created the model component so now what we are going to do whenever we'll go to this visitors and products will be having a button something like add visitors or add product and on click of that you have to show that model and in that model you have to pass the form controls all right so let's do that part in the next video all right everyone so let's start working on the uh add products page all right so let's go to our products page so here what we are going to do we'll be having one simple button on click up that you have to open the model and then we'll be having the table so for this one we already have these products component and then page.js now what I am going to do here inside this components I'll create another folder here and let's give this one name as products so here basically we will be having two more components one is for the basically the product layout and then we'll be having the product listing the reason is that because the one of them will be a client component and another one will be a server component now you can't direct basically use a server component inside client component so what we need to do to pass that server component as a children to the child component and based on that we are going to use that so let's see how we'll do that so for this one inside these products I'll create one folder one file let's give this one name as what you can do we'll give this one as product layout dot Js and then we'll create another one and this will be for example product listing dot Js so this one we are going to make this one I use client all right and this will be export default function this will be product layout now this will receive a children so these children is basically the server component that we are going to pass and here what we are going to return will basically return a div and here we are going to return a button component so the button component that we have created all right and here we are going to pass on click method obviously and text we are going to pass something like add new product all right next what we are going to do after these we have to basically render the children which will be our server component or basically the listing component and after that you have to pass the model component that you have created here so for this one we have to take some uh state so what we can do we can first thing is that we'll take a state of so model set so model this will be use state of false and also you have to take a form data so this will be our form data this is basically our products from data set form data and this will be equal to use state of let's take an initial State here so we'll do const initial form data and this will be we need name of the product we also need the location we also need the visitors we need the sales and also you need the month so this will be our initial form data all right now these we have to pass as a Prof here so the first thing is that we have to pass the form date and also let's go to our model component so we are going to receive this form data and also this set form data okay and also we'll receive this set so something like that so this will be our set so so these all many props you have to pass so the first thing is that you have to pass so prop so prop is basically the so model then we are having set so which is set so model then you have to pass the form data which is form data you have to pass set from data which is set from data all right what else we need to pass we also have to pass a on ADD Method All right so you can see that we are having this on ADD method and also we have to pass the form controls now if you see what I have done I've created another folder here utils and here I created a config and here I am having product from controls and if you see here this is basically a array of object so each and every form is there so this is a type of name type sorry ID of name type of text this is the placeholder this is label and this is the component type so this is the type of input similarly for month this is a type of Select so this is what I have created here all right so now these phone controls we are going to pass from here so we'll do form controls sorry we'll do form controls and these will be our product form controls all right also have to pass the on ad method so that we are going to do in some time now let's save it and let's format this and save this also so created our main product layout and these children is basically this product listing now this listing what we are going to do let's create this one as a export default async because from this component we have to get the list of products so this is server components we are going to basically call the API to face the list of products so this will be I think function this will be product listing all right and for now let's do one thing let's return here something like div and this will be product listing all right let's format and save this now we have created our product layout and product listing let's go to our page.js so this is basically your main products now what we are going to do basically in this component we will call this product layout all right and inside this we are going to pass this product list as a children that's it all right now let's save this and let's see what we are getting all right so you can see that we are getting add new product and this is product listing if I now click here on click of this you have to show the model so that part we need to do so you go to our product layout and in this button we'll take on click and in this on click what we are going to do is make this set so model as true that's it so let's save it so now let's see if I click here awesome so name visitors product by number of sales and this is the month we are getting but we are not getting any value in this part we need to check so let's go to our uh we are having form control this is fine let's check our product form controls and then here we are having item dot label let's see what we have rendered in the select component so this is item dot options uh your passing options here this is correct so let's go to our select component so this will be a label all right so this is the reason so now this should work so your January February March I think one time we have extra Jam so that we need to remove so let's quickly fix this one also so Jan February March this you have to remove from here May June July August September October November December this is correct all right so now we are doing all the thing and now what we need to do on close up on click of this button we have to close this model so you can go to our product layout and let's go to our model component from here sorry you go to model component here we are having said so and then we can go to this close button and here we can do on click and we'll make this set so as false that's it save it now let's see if I now click here this is closing and this is working fine all right so now same structure we have to do it for this visitor page all right so now next thing what we are going to do whenever we will handle this one we have to create a model from the backend side and also you have to create API out so let's quickly work on that part so go to our model folder and here I'll create another folder and let's give this one name as product and let's create index.js all right so here the first thing we have to import Mongoose from mongoose and then we are going to create our product schema so this will be product schema new Mongoose dot schema and here we need name of the product so let's see what exactly we have given in our initial foundatorium name location visitor sales price I think something we are missing here I think we have to give price instead of location let's see here sorry yes we are having price so here instead of locus and we have to give this one as price so here also you need price which will be a number then we need the visitors and these visitors is not the total number of visitors these visitors is basically related to that particular product means how many visitors is for that particular product is visiting uh that product basically so this would be number then we are having the sales of that uh product how many cells and then the month in which month all right so this will be string now what we are going to do will do const product this will be Mongoose dot models dot products or we are going to do mongoose dot model this will be products then we are going to pass this product schema and then you are going to export default this product that's it so this is about our model we need now next thing what we are going to do we have to also clear the API out so let's go to our API folder and here the first thing is that we have to uh so let's go to our API and then let's create another folder what we can give we can give this one as something like product and inside this will create two more folders something like add product and we are going to create another one and this will be all products so we are having add product let's create our route dot Js all right so the first thing is that this will be export async function this will be a post request we are going to receive a request so you're having try catch so here we are going to lock the error and here we are going to return next response dot Json should make the success as false and we'll do something like message something went wrong that's it so here the first thing is that you have to do a bit and I think we have already created our database connection yes so look a bit connect to DB all right now next we'll do const extract data this will be Avid request dot Json and now here we'll do const newly created product which will be avid and this will be product dot create and here we're going to pass this extract data so if newly created product is true so here we are going to basically return something like success will be true and this will be product added successfully all right else we are going to basically return false and we'll do failed to add the product fail to add and add a product please try after some time that's it Also let's import the Dynamic Property here so this is a dynamic property this you can basically check in the next js13 official documentation and we'll use this property as this Force dynamic let's save it so this is about our route we have created model so now what we are going to do here uh in our here we have to basically handle the form and based on that you have to call the API so you can go to our model here and here what we are going to do we basically take a value so the first thing is the value will be this form data and then form data of item dot ID and also to pass on change so until you are going to do the set from data this will be our form data it will receive and now here what we are going to do will do uh sorry this will be item dot ID will be equal to e dot Target dot value that's it now the same we are going to use it for this select component also let's save it let's go to our product layout and let's log this form data here let's see what we are getting so we'll go to our console and then let's click here let's type something we are getting name visitor 100 then we are doing product price number of sales and then we are having the month all right so this is fine now here what we can do basically in this model here we can basically check this item DOT type this is equal to number so we can basically do Parts int of e dot Target dot value models this will be this so now let's see so now if I do add and let's add something like 50 so now this is fine so we are getting number here all right so now we'll create a method and that will be on ADD pseudo function handle add product and this will be sorry we'll make this one as async method so this will be async and here this handle add product we are going to pass here so this will be on ad this will be this handle add product all right so here we are going to const response this will be able to have it and this will be fetch we are going to go to slash API slash product so you're having slash API slash product and then slash add product so slash add product all right and here we're going to pass the method as post and we are going to pass a headers headers will be content type this will be application slash Json and also to pass the body here this body will be Json Dot stringify and this will be this form data all right so now let's see what we are getting in this response so before that we are going to do const data this will be equal to Ave it race dot Json and here we are going to do log data so let's save it and now let's see what you're getting so let's go to console replace this page now let's click on ADD product sorry I think it will go to products let's click on ADD product let's give some name product one visitors 100 product price hundred sales will give like uh 200 and month will give Jan all right let's click on this add let's see what your what is happening awesome so you're getting success 2 and product added successfully so if we are getting success too we'll close this model simply and then we are going to reset this form and now what we are going to do we have to basically get the updated product to get the updated product there are two things you can do either you can basically call the product listing API to get the list of updated products or you can do basically router dot refresh now router dot replace what it will do it will basically refresh the current page on the back and based on that you'll get the updated product so let's see how that will work so the first thing is that what we are going to do we have to basically create the API route to get all the products so that part we are going to do this one so go to our route and here you can see that we are having all products so here I am going to create another route and this will be a gate method so here we are going to export async function it should be gate will get the request and here what we are going to do in this case I don't yeah I think we should take it we'll take a try catch and then here let's lock this on the same thing and now here the first thing we have to do have it connect to DB all right now here we'll do const get all products this will be Avid product and this will be find that's it now this will basically get all the products so you get all products is true so what we are going to do will basically return next response dot Json we're going to return success as true and will return a message which will be sorry we don't have to return a message here we have to return the data back so this will be this get all products else we are going to return success false and message we are going to return that failed to fetch the products please try again after some time that's it also let's copy our Dynamic Property that's it let's save it so now what we are going to do we will go to our main product listing page so we are having this product listing and here let's create another method so we'll do async function uh extract all products and this will be const response Avid fetch this will slash API and for this one what we're going to do we have to take the full URL here so we'll do localhost slash API slash products so I think we are having slash product and then all products so this will be all products here we are going to pass a method as get all right and I think this will be fine now what we're going to const data and these will be equal to we're going to have it raise dot Json and then we are going to return the data now here we also we are going to use a class of no store that's it now uh these data you have to pass to a table component correct because in the table we are going to reinter that so let's quickly create a component here so I'll create another folder I'll give this one as table and let's give index.js and here what we are going to do do this one as a client component I will do export default function table so this will receive a data and here we are going to return a tab sorry we're going to return a div for now sorry and here we are going to return a table and we are going to lock this data here and let's see what we are getting so go here and then we'll call this table component correct and here we are going to basically get the data back so we will get all products uh get all get products something like that or let's make this one as all products which will be equal to average extract all products and then we are going to pass this data as these all products so you got it right so in the product listing page you call the gate all products API and whatever data we pass we are passing that on as a prop to the table component let's save it now let's see what we are getting awesome see we are getting success and uh one so let me refresh this page here all right so it's going to the home page let's click on this products we are getting one product here and this is fine so you're getting one product name of the product price everything is correct so what we can do we can go to a product layout and here now what is very important thing we need to do we have to do data dot success if this is true so you do if data and and data dot success is true so the first thing is that we are going to make this set form data as this initial form data also what we'll do we'll do set so model as false and we have to basically refresh this current page to get the updated products so for this one we'll do const router you can definitely call the listing API but I think this is also good approach that you can use and here we are going to do router dot refresh all right else if there are any error so we are going to also do the same thing or don't have to do refresh we'll just go close the model and reset the form and I think this is fine so let's see what is happening so go to products so we are getting only one array here now let's try to add a new product here so do product to visitor 50 price let's say 20 sales 100 and month as February so if I add here it should reset this it should close this and then the router dot refresh should give me the updated so that means two data should come here so let's see if I add here awesome so you can see that we are getting success true and data H2 so that means we are getting two data now so these two data now we have to render in our table so this table component we are going to do in the next video all right everyone so let's start creating the table component and before that what I have done in the config I created to more configuration here so one is the product table header so having name month price sales and the revenue so this one we are going to create and then we are having a month mapper so these all are the mappers so ID with the label that we are going to render all right so now let's go to our product listing page sorry let's go to First the table and then first we'll create the structure so this table will receive some of the props so the first one will be a data which will be a array then you also receive the table header text or also it it is going to uh basically get some table header sales sales means the headers this will also will be a empty array for now now here what we are going to return will written a div and here let's give a class name so we are going to do rounded SM then we are having border we'll do border stroke all right we'll do BG of white PX of 5 VT of 6 PB of 2.5 we'll do shadow default let's make this one as only shadow what else we need we'll do for SM we are going to PX of 7.5 for Excel wagon PBF 1. now inside this we are going to take a H4 and we are going to render this table header text that's it now here we'll take a class name we'll do MB of 6. then you have on text Excel font semi bold variable text black and next after this we are going to take a div so for this one we'll do class name we'll do Flex Flex column here we are going to take another div we'll take a class name we'll do this one as grid will do grid Columns of three we'll do rounded SM we'll do BG gray two and for SM we are going to do grid Columns of five now here we are going to basically check if this table header cells and then table header cells dot length is true or else this will be none now here we are going to basically map this table header cells dot map so the item and here we are going to take div all right so the first thing is that we have to take some key we'll do this one as item dot ID and here we are going to render the item dot level this level is basically this label we are having for each and every header all right and for this div let's take a class name we'll do p of 2.5 we'll do text Center and we'll do excel P of 5. that's it now what else we need we also have to render the data so here we are going to basically check if data n and data dot length if this is true or else this will be null so we are going to basically do here data dot map this will be item and here we are going to take a div so this will take a key so for this one what key we can basically use here we can take this item dot ID as a key and also we are having this class name so for this class name we'll do grid grid calls of three we'll do border so we'll do border B will do border stroke and for SM we'll do grid Columns of five all right so now what we need to do one very important point is that whatever data we will be receiving for example the name price that we have to map it so how we are going to map it so first we'll map with this data this will give me each and every item so this item will consist of name sale price Revenue all of this and then we are going to map with these table items and then basically we will check the key value pair so if I now go here you can see that we are having this key here this key so this key is basically the value that will be receiving so for for example for product one the price is 100 so the price and this ID will having the same price so the value is same So based on that we are going to map it so how we'll do that so here we'll basically do this table header sales dot map and this will be table cell and now here what we are going to do will take a div all right now here we'll take a class name for this div what we can do we can do this one as Flex item Center we'll do justify as a center P of 2.5 and xlp of 5 all right now here inside of this we are going to take a paragraph now here what we are going to do this will be item this item is basically each and every object of that array this will be you will map with this table item dot table cell dot ID table cell dot ID is basically this ID here so this will be I10 of this table cell table cell dot ID all right and here in this default so you can give a key which will be for example we can combine this both item dot ID with this table cell dot ID let's format all of this and I think this is fine so now let's save it so now let's see what we are getting so not getting any value so the point is because we are not passing from this table so here now what we are going to do the first thing is that we have to basically check if this all products and then all products dot length this is true order this will be empty sorry empty array so here what we are going to do we have to also calculate the revenue so how we are going to calculate the revenue so for this one we have to take this particular logic that with this first we'll map this all I have products.item this will give me item and here first we'll get the item and we'll take create another key here iron revenue revenue will be basically the combination or basically multiplication of this item dot price into item dot cell means how many We have basically sale for this particular let's say we are having 100 cell and the price is 100 so that will be multiplication will be the revenue for this particular product all right so this is one thing also you have to pass the table header text this will be something like all products overview and also to pass the table header cells which will be our product it will be product table headers now let's save this let's see what we're getting all right so we are getting name month price sales and revenue and here also you have to do another thing so here we'll pass this month and this will be our month mapper of this item dot month all right so now let's save it so now let's refresh this page let's go to our products so you're not getting any value I think something is wrong here let's see what we are doing wrong let's let's bring this one down here go to console and we are having data let's see what data we are receiving here console.log data we are already having here so let's refresh this again let's go to this one so we are getting data as empty all right everyone so the issue is after spending lot of time to know that we are receiving this data and inside this data we are having this data dot success and data dot data so what we need to do we have to basically check here that I don't know I spend a lot of time while fixing this so we have to do all products and and all products dot data and and all products dot data dot length this is true then all products dot data dot map and now I think this should work so now let's format and save this let's see what we are getting awesome so now you can see that we are getting product one this is January February March and now revenue is not coming so this we have to check what is the value we pass so let's say we are having sales here and if I go to the product listing we are having sale so this will be sales now let's see all right so we are getting Revenue also and let's make this one one thing let's make this one as per sent off this all right so now let's test uh I'll add a new product and let's see whether that product is reflecting yet or not so let's try to add new one so we'll give this one product four let's say visitor is 100 price is 40 and sales is 50. and let's add this one as April so I'll try to add here let's see what is happening awesome so getting updated product here this is the month this is the price sales and the revenue now the same process you have to do it for visitors and also let's do one thing let's give some margin for this button so let's go here so we are having this button here what we can do basically we can directly go to our table and then here we can give some margin top as five something like that awesome so now this is fine so now let's go to uh we'll try to replicate the same thing in your visitor so in the next video we have to basically add a new visitors and then we have to do the same process and after that only we will be start working on this dashboard so then what we are going to do whatever data we are populating here the same data we will try to visualize in the dashboard in the using charts so that we'll be doing in the next video all right so let's start working on the visitor component so what you can uh what I have done you can see that I created another uh basically form controls for users let's give this one name as visitors and the same I have done it for the table headers also visitor table headers all right so now the first thing we are going to create a models for that so we'll create another folder and we'll give this one as visitors let's create index.js so this will be first we have to do import Mongoose from Mongoose now we'll do const visitors schema equal to new Mongoose dot schema so here we need number of visitors now these visitors is basically the total visitors of our website all right so this will be a number now next we are having a location for this one so from which country the visitors are visiting basically so this will be a string then we are having the device from which device they are accessing for the tracking purposes so this will be also a string and then we are having the premium user number how many at the premium user they are accessing so this will also will be a number and at then we are having the month from which month so this will be a string all right and here we can give a timestamp as to I think the same we can give our for our product schema also I think we haven't even yet so it'll be a time stamp we can give this one as true also all right so now here what we are going to do we'll do const here this will be visitors visitor this will be our Mongoose dot models dot uh we'll give this one as visitors or this this will be Mongoose dot model and here we are going to give the same name so this will be visitors and then we are going to pass the visitors schema here that's it and at the end we are going to do export default and this will be our so this will be our visitor all right so this is the thing we need for our model all right now next thing we have to create our two API layouts so the same AP route the same thing we are going to do now instead of rewriting again I'm just going to copy the same thing from here so what we can do we can basically uh create another folder here and let's give this one name as inside uh sorry you have to create this one inside API so we'll give this one as visitors and then we are going to create first one will be as we add visitor and the second one will be sorry this we have to do this one as a folder so here uh where is that so here we have to create two one will be add visitor and second one will be all visitors all right so here uh let's first copy this route.js and we'll paste it here so this is our ad visitors so here instead of some things we need to check change so this will be newly created visitors info something like that and you have to use it here now see the reason why I'm not doing because this is exactly same and here we have to do visitor instead of this one and here will be visitors data added successfully this will be visitor and I think this is fine so this is all about the visitor scheme sorry API out we need the same thing we have to do it for all uh visitors also sorry so you have to go to here so we'll copy this all products and then we'll paste it here and here for this one this will get all visitors uh sorry this will be gate all visitors info and this will be our visitors dot find and then you have to pass it here and also here and here this will be failed to face the visitors all right so this is all about the visitors uh get all visitors route we need and I think this is fine so now what we are going to do we will be basically start working on the front end part now in the front end part again we are going to follow the same structure so we are having here visitors so the first thing is that we'll create another component here and let's give this a name as visitors so the one I'm going to create these will be visitors layout dot Js and the second one will be our all uh something like visitors list dot Js so this one visit a list uh so for first we'll create the visitor layout so this will be a use client okay so this will be export default function this will be visitors layout right and here we are going to receive the children so what we are going to return so the first thing is that let's so the for this one we will be basically following the same structure that we have done all right the reason is that again whenever we will be having this visitor so visitors also consist of visitor layout and visitor list now visitor list will be again a uh this will be also again a server components will be fetching the data from servers all right so let's see so the first thing is that here we'll take a div so the first thing we are going to render the button component see this is exactly the same thing so text will be add visitors visitors info something like that and also again here also we need to basically State one is so model and then we are having set so model and this will be equal to use state of false then we are having the form data so form data set form data this will be equal to use state of initial form data this one we are going to create here all right so we'll create any cell phone data here so this will be initial form data so what are the things we are having for these visitors so for visitors who are having visitors location let's copy this from here only and we'll go here let's paste it so this will be numbers will make zero location will be string device will be string premium user this will be zero and month will be string so this is our initial form data here we are going to render the children which will be basically the visitor component which will be a server component and then here we are going to render the model so for this one again we'll basically use the same from here so let's copy this and then we'll go to our visitors layout and we'll pass it here so this will be so first we'll import the model this will be form data this is fine so this will be our visitors form controls and this will be handle add visitors so this one we are going to create so this will be handle add visitors all right so this is another function we are going to create so this will be async function handle add visitors save this and let's see what we are getting we have done a lot of things so go back here let's go to our visitors so we are having visitors here's the reason is that we haven't used the same in our main component so here now what we are going to do first we are going to import the visitors layout all right and then inside this we are going to clear the visitor list so this will be our visitor list so here we'll look export default async function this will be visitors this visitor list and here let's return for now div and this will be our visitors list that's it and here we are going to basically return this visitors list and this is done so if I now format this now you will be able to basically see that button awesome if I now click here so this part you have to do so you have to go to visit a list and on click of this button you have to basically make this set so model as true if I now save this click here awesome now this is fine right so you're getting device and this is the month so this is working fine so now what we can do we can simply create the uh call the API here so we'll do const response this will be Avid Fetch and here we have to basically go to slash API slash so where is that you have to go to API and then you have to go to slash visitors and go to visitors slash then we are having add visitor so this will be add visitor all right and here we are going to pass the method which will be a post also you're going to pass headers this will be content type equal to application slash Json and here we're going to pass the body which will be Json dot stringify this will be form data that's it so here we'll do cons data equal to average dot Json so here we'll check if this data dot success if this is true so we are going to make set form data as this initial form data also we will make set so model as false and also you have to do router dot refresh so the const router equal to use router and here we are going to make router dot repress is we'll just do this one foreign so now let's go to our all visitors sorry we have to go to first let's uh go to our this component product listing and let's close everything else here now let's go to visit a list so here also you have to do the same thing so instead we extract all products you have to do extract all visitors so I'm going to copy this and I'm going to paste it here so this will be extract all visitors all right so here we have to do slash API slash you have to do a visitor and then this will be all visitors all right so this is the one I think we are having visited and then all visitors so this is fine so now this will be const all visitors equal to average extract all visitors and here we are going to basically render the same thing correct so copy this so we'll paste it here and then this will be our visitors and instead of product this will be our visitors table headers and this will be all visitors and an all visitors.data all visitor.data dot length then these will be all visitors.data what else this will be empty all right so I think this is done let's save it let's see what you're getting so go to all visitors so you're getting visit a list Let me refresh this page let's see what is happening so you're getting some error here cons data is equal to Avid race dot Json and these we are getting in visitor list so here all right so I think the error is because so you can see that we are having this API slash visitor so we have to give s here so this is one thing so now I think this should not occur so let's see all right so table is not defined okay so you have to import table let's see now okay so now this is fine currently we don't have any data here so let's go to visitors let's try to add a new visitors so number of visitors Let's uh will give 500 premium out of which is let's say 200. then location I'll give India devices desktop and month is Jan let's try to add here I think we are having some error so let's see so we can see that we are having some error visitors dot find is not a function okay so I think we have imported from the wrong place so these will be visitors you have to do it from our model and also I think we have given some let me just check what we have given I mean the model we're having visitors let's give this one caps let's import it here and here we are going to do visitor from model and also let's remove this one save it now let's see let's refresh this so now let's try to add a new visitor will give 100 premium is 220 India let's give a device update stop and January let's try to add here still we are getting some error let's see I don't think there is any error let's see here what is happening so we'll go to our visitor list visitor layout all right so the issue is see what I'm doing I don't know this is a visitor this is not visitor let's save this now let's see all right now let's refresh this we'll do from start so we'll go to visitors let's click on ADD visitor let's give 100 give 30 this is India desktop and this is January now let's try to add awesome so we're getting India desktop 30 and month is January but we are not getting visitors so these part we have to check what is happening so we are having visitors again same problem we are having visitors here and also let's check here we are having see this is the problem visitors uh here spelling mistake and the problem is because in the utils we are using visitors so this is the reason also another thing we need to do what we can do here we can basically map it and then we'll do item and here we are going to return the item and we'll do month this will be equal to month mapper of item dot month now let's save it now let's see so this is fine now for this one it should not come let's see for others it is coming or not so we'll give 200 this is 100 let's keep USA device laptop month is February let's try to add now all right still this is not coming Let me refresh this page I think the I know why because I think we have to restart the server here so let me restart it all right so now let's see all right now let's say I'll go to visitors now let's try to add a new one I'll add 200 give this one as 50. I'll give this one as what you can give let's say Spain I'll give a device of tablet and this will be much let's try to add now all right so now we are getting 200 visitors location device uh premium user and this is the uh month all right so this is fine also let's do one thing let's map this device also what you can do you can go to config and let's create another mapper here let's create here so this will be export const device mapper and this will be desktop will be desktop then you are having laptop which will be laptop then we are having a mobile which will be mobile and we are having tablet foreign which will be tablet let's remove I think we don't need this all right now let's go to our visitor layout so visitor list and here we are going to do this one as what is the name of the state so this is device so copy this will make device as device mapper of item dot device let's save this now let's see all right so now your desktop laptop tablet let's try to add a new one let's give 1000 premium 500 will give you again India will give a mobile and month we'll choose something like June let's try to add this one let's see we're getting more updated value here and this is fine let's go to products all right so let's try to add a new product here so we'll add product five visitors will give 100 visitor for this product price is 50 sales is 20 and month will give this one as July try to add this one here we are getting updated product here if I go to visitors this is fine and these two I'll just delete from the database so I think this is done so products and visitor is done so now in the dashboard what you have to do is basically have to work with this both the data product list and visitor list and based on that you have to create all the uh charts and all the card view so that we are going to do in the next video hey everyone welcome back so now let's start working on the dashboard components in the dashboard component basically we'll be rendering all of this chart and everything based on this product and user data that we are receiving now there are quite a few things we need to do the first thing is that we have to create a reusable card component so the first thing we'll start with that component only so inside component will create another folder and let's make this one as cart only card I think that will be fine let's create index.js and here we'll do export default function this will be a card now this will receive some properties so the first thing it will receive a data it will receive also label and also it will receive a icon all right now here let's return so return a div uh let's give a class name here so for this one we're going to do rounded SM will do border border stroke then we'll do BG as white we'll do py of 6 PX of 7.5 we'll do shadow and I think this will be fine now next thing what we are going to do will take another div here let's give a class name sorry I have to give class name so for this one we'll do Flex we'll do height of 11.5 the width of 11.5 we'll do item Center justify Center we'll do rounded full all right we'll do BG meta 2 and inside this we are going to render this icon that will be receiving from the parent component here we'll take another div we'll take a class name we'll do empty of 0 Flex item Center will do justify between all right here we'll take another div and inside this will take a H3 let's take H4 and we are going to basically render this data for this one will take a class name we'll do text title we'll do this one as MD we'll do font as bold all right we'll do text black and after this what we are going to do we will basically take another span here and we are going to render this level that's it and for this one we'll take a class name so we'll do this one as text ASM and we'll do font medium so this is our card component that we need so now what we are going to do from the dashboard component we will be basically calling the API for these products and visitors whatever products and visitors we have and based on that you have to basically calculate all of this so we'll go to our dashboard component or dashboard component it is basically our main page.js or basically the root component so this is the one so you can see that we are having a home page here so this will be our dashboard component so here first thing what we are going to do up to basically get all products and also you have to get all visitors list okay so now here the first thing is that we can go to our visitor list component and let's copy this one we don't need to write same thing again and again all right and the same thing is that we can go to our product listing and then we can use the same logic here also that's it let's format this and let's close everything else so here what I am going to do I'll create another folder inside these components and let's give this one name as dashboard something like that all right so in this dashboard layout basically we'll be creating the main layout so here we're going to do index.js so let's make this one as a use client component and we'll do export default function dashboard we'll give this one something like dashboard layout all right and we'll return for now some deep simple so this is dashboard dashboard layout so from here what we are going to do we will we first get const all products this will be Avid also you have to do here as sync so this will be avid extract all products and then we have been const all visitors this will be avid extract all visitors then we are going to basically call that dashboard layout component just now we have created and we are going to pass these all products as these all products and all visitors as this all visitors as a prop all right and these two are receiving in our uh in this component so this will all visitors and all products so let's copy this and pass it here that's it so this one we are going to receive so you find our log here this both all products and all visitors let's see what we are getting so we'll go to console we are getting a object and again I am doing the same mistake so instead of this we what you can do we can pass that simply the data all products and then all products dot data same for this one and and all visitors dot data so now we'll basically receive the data so you can see that we are having this data and this is data for the product and this is uh I think both the places are getting the same one sorry you have to do this one as all visitors so getting four data here five data here awesome so now what we are going to do basically let's close this so in our dashboard layout component we are we have to basically calculate all of this and based on that you have to render all the things the first thing is that we are having four card here then we are having two chart here and Below we are having another chart all right so let's create this structure so go to our dashboard layout component and here first thing is that let's remove this let's take a div only and inside this we are going to take another div and let's give a class name we'll give you some grid bleed columns one will give gap of four will be MD sorry we'll do AMD grid columns 2 all right for MD we'll do gap of six for Excel we'll do grid Columns of 4 and for 2XL we are going to do gap of uh let's make this one as seven now here we are going to render the card that we have created card component all right so let's we have to paste it uh four times three and four let's save it let's see what we are getting all right so we are getting four uh card here see you can see that so now we have to basically pass all the uh data here that we need so for the first one you have to pass a label so for the first one this will be our total premium users how many premium users we are having or sorry the visitors now these data we will be basically receiving from these visitors if I now go visitor you can see that we are having the premium user here or premium visitors you can basically change it see at the end this is not a real life website this is basically just give you idea like how you can basically create a chart using this next year so what we are basically doing is simply creating some table here and then we are trying to use this data and then try to render these data in terms of card and the charts so that will get some idea how to use that so you're having total premium users for the first one let's copy this then we'll paste it in all the places for the second one we're going to do this one is total products how many total products we have the next 11 total sales all right and at the end we are having total visitors now total visitors and total premium visitors both are different all right so total visitors is these visitors we are having and this is the number of Premium visitors or premium user let's make this one as premium visitor only so go here let's make this one as I think this is the table one right so we have to make it here premium visitor all right so if I now go here we have premium users this is fine so now what we are going to do for the first one will go here so having total premium user so we we have to basically pass the data here so data will be this all visitors and and all visitors dot length if this is true orders this will be zero so here what we are going to do we'll do all visitors dot reduce so to basically reduce all the all the visitors that we have all right so we'll take some AC system to parameter and and this name anything you can basically take and here we are going to do this one as percent so this will be our this object which is basically the visitor item or let's make this one as visitor item this will visit our item dot premium user number so this is the property name all right and default value will give this one as zero let's format this let's save it let's see awesome so you got our total premium uses all right now next is our products how many total products we have now this is pretty simple what you can do will do these all products and then all products dot length that's it so this will give us sorry we have to refresh this sometime you will get this kind of error so you have just have to basically refresh probably all right so we are getting total products here now next thing we are having the uh sales now for sales also what we need to do we can basically take the same logic so sales is basically all the product sales that we are having instead of all visitors have to do this one as all products and here this will be product item and this will be dot sales how many sales we are having save this we are going total 420 sales these cells is coming from this product sales all right these cells here that's it next we are having total visitors now total visitors is pretty simple here we can copy this and we can basically pass it here so instead of Premium user this will be our visitors it is coming not a number the reason is because for two we don't have so what we can do to fix this we can go to our visitor list and here we can basically take visitors this will be if this item dot visitors is true or means something like first let's see what we are getting in these visitors then it will be easy to understand uh let's log let's go to our table component first we already have this data here so let's open console so here we are having visitors zero see we are having this visier the spelling is wrong so let's do one thing let me just quickly delete these two from our database and then we will be getting the correct result all right all right everyone so you can see that I just deleted those two uh item from there so now it's coming correct so 200 and 1000 so if I now go to dashboards we are getting 1200 let's try to add another one so I'll add let's say more 500 300 premium will give some like for example Germany will give a device of tablet and let's give August let's try to add here so you're giving 500 so now there it should be 1700 so now you can see that this is updated here all right so now let's try to pass the icon here so I think for now we don't have to do any change in this part we go to dashboard and here we are going to we have to basically pass the uh all the icons so we'll first we'll import something from our react icons slash so the first package is fa copy this and we'll paste it here so the second one is bi then next we'll paste it and this will be MD and the last one is BS so the first one uh the name of the icon is if a users next we are having MD outline this is products and quantity and after that we're having BS fill person check fill and then we are having this one is b i money withdraw so this will be our icon so for this one will pass icon and this will be our fa users pass a size of 25 let's copy this let's pass it here for the second one we are going to call this MD outline this one then next uh we will pass this bi money this one and at the end we are going to pass This is BS fill percent check fill this one it's format and save this let's see what you're getting let me replace this awesome so now we are getting all right so we are getting all the icons and the data is also coming from the database we are calculating so now in the next video you will be start working on the uh three charts so let's do that in the next part all right everyone so let's start working with our first chart which will be basically our yearly and analytics overview so for this one what I have done you can see that I created the chart options now the reason why I haven't created because these all are basically the default configuration that you will basically get from the official documentation also so you can see that this will obviously take a lot of time so that is the reasons you'll get the sum of the options like Legend then we are having colors the main thing is that this is for the responsive part the thing that you have to notice here we are having the x axis which is the category so in the category we are having this all the months now these months is basically denote that yearly overview we are showing so for January what will be the sale profit revenue for February and so on something like that now here based on your convenience you can basically change this option whatever you like now here what I am going to do I'll go to these components and I'll create another folder here and let's give this one as yearly uh early Analytics chart something like that all right and here let's make this one as caps and here I'm going to do index.js let's make this one as a client component all right so here the first thing is it will look export default function this will be yearly Analytics chart all right and here we have to return something but for now I'll keep this one as div the reason is this one we have to do here so in our dashboard layout we have to render so after this card item we'll take another div here all right and here we are going to take a class name we'll do this on margin top four we'll do grid Columns of 12. we'll do grid will Gap of 4 for MD we're gonna margin top of six all right for MD we'll do gap of 6 for 2XL we are going to do empty of seven and for 2XL we are going to do gap of 7. that's it now here what we are going to do we are going to basically render the yearly analytics chart and also you have to basically pass the data so you're going to pass the products I will pass all products and here what we are going to do will pass this one as all products and and all products dot length if this is true order which will be empty so here what is going to all products dot map this will be our product item and here we are going to basically render the product item then we are going to pass the main Revenue all right now here what we can do simply we can basically do here item sorry this product item dot price into this is the price and how many sales this product has so this will be product item dot sales number of cells so here what we are going to minus we are going to minus the cost product now for currently we don't have any cost product by default we will consider this one as 10 so we'll do item dot sorry uh we have to do product item dot sales so this many cells now for this many cells we have to we basically have some cost right to create these products so by default we'll give take this one as 10 so this is the cost price and here also will pass the cost as this product item dot sales into 10 so this is the cost and this is the main revenue or we can also make this one as main profit let's save this see this is I already told you this is not a real website this is just give you some overview now some of the things you might notice that this is kind of weird that this is not happened in the real world but this is not like real website we are doing just giving some overview how to basically Implement those Concepts in a particular project or basically a Nexus project so we are basically passing this data in our early chart so if I now save this we'll get this I think we are getting some error here we have to save this that is the reason so now let's see now let's try to uh create the main structure so here uh we'll go to our uh this one and here we are going to take some class name all right so we'll do column span of 12. we'll do rounded SM will do border we'll do border stroke all right we'll do BG of white we'll do PX of 5 VT of 7 EB of 7 will do shadow all right and for SM we are going to do p e x of 7.5 for Excel we'll do column span of 8. that's it now after this we'll take another div here we'll take a class name we'll do this on Flex we'll do W full duplex wrap we'll do item start I'll do justify between gap of 3 and for SM we'll do flex no rep here we are going to take a paragraph and we'll do make this one as yearly Analytics overview and let's take a class name for this one I'll do font bold and we'll do text primary that's it and now here after this we will take another div and here we'll take inside another div let's give a ID so ID we are going to give this one as this one and for class name we'll do minus mL of 5. now here we have to basically call the react Apex chart that you have installed and we have to pass the options now in the options you have to pass the yearly options that you have created and also to pass a series series is basically the data all right so this we are going to create in some time then we are having a type so this will be a type of area chart and we're going to give a height of 350. now this series this series now we have to basically create and also you see here we are basically passing this all products as a data here so that will be receiving here so here we are going to clear this series so this series will be added of objects here we have to pass the name so we'll pass this one is for example sales and then we are having the data data is empty for example let's say then we are having cost and at the end we are having let's say Revenue something like that and this will be cost and here we are going to pass this series so let's format all of these for now we don't have any data that we are going to create but let's see what we are getting all right so this is let me just refresh this page all right so now this is coming also I think we are missing something here we have to give this one as Flex rep let's make this one as Flex column and also let's do one thing let's give here a class name of sorry we'll give a class name here of w full let's save this now let's see all right so now this is fine so now we have to basically uh clear the data so the first thing we have to create three uh helper function here so let's first one we'll create this one as function gate sales all right so we'll get the products here and also we'll get the month gate month something like that so here we'll start with this one so the first one will be let's say we're having get sales we'll pass this all products and the first one will pass this one is uh this will be like January something like that uh let's see what we are getting in the whole products first so we'll first comment out for now and we'll comment on this part here also all right so here what is the line number line number is 12. so line number okay we are having last month name and everything okay month we are getting that is fine so now what we can do simply we can basically check if these products dot filter all right so we are going to filter item item dot month is equal to equal to this gate month all right if this dot length if this is 0 so we are going to return simply 0. or else we are going to do products dot filter do item all right first we'll filter item dot month is equal to equal to get month then we are going to do dot reduce so do SCC and this will be our product item all right so here what we are going to do we'll do a cc plus product item dot sales here and then we are going to pass 0 as a value okay so this will be our something like that so this will be for our January if I now save this let's see what is happening see we are having something say list 200. so let's quickly do it for others also so I'll quickly do it so one two we have a three four five six seven or also you can do something like that I think that will be better I also have some idea so let's do one thing let's do const months array right so here we'll do Jan then we'll do fave then we'll do March April May June July August September October then we are having November then we are having December so now what we can do we can simply map this right so we'll do month added dot map so you'll get the item now this will call this gate sales we'll pass the products right all products will pass then you will simply pass this item this item is basically single uh month we are having if I now save this let's see what is happening so you are getting the data here 200 100 right so let's say if I try to go to products here let's try to add a new product so you're having let's say product six visitors is let's 1000 arriving price is 20 sales is like five five hundred something like that month is October let's try to add here product six we got now let's go to dashboard see now October is actually updated here the sales are updated okay so this is working fine so the same way what we need to do we have to do it for gate revenue and also you have to do it for get cost so here we'll paste it two times so this will be gate Revenue and this will be gate cost all right so for this one we are going to do this one as Revenue and this will be our cost correct and for this one we'll just use the same logic instead of gate sales this will be gate sorry this will be gate cost so this will be gate cost and this will be our get Revenue and this is done let's save this let's see awesome so now you can see that we are getting the data here so let's see what is happening so you're getting updated data here so if you want for this one you can also do one thing so we can go to our utils and here we are having Max as so you can give Max as 50 000. now let's see now see so we are having this one here also let's give this one as twenty thousand oh no awesome so now see so you're getting updated here sales cost revenue for month of February and this is updated so for others it is zero all right so this is done if I try to add for me see that will be deflected let's try to add another one I'll add another one here so this will be product 7 visitor 600 price is let's say 55 sales are uh how much like 120 and month is let's say for August or let's make this one for June let's try to add here this is added if I try to go here so for June it is updated you can see and each and everything updated here so one chart is done so this is yearly analytics overview now for the next chart and the below chart that we are going to do so the below chart will be so next one will be how many premium visitors and all the visitors we are having and the below chat will be uh what is the device analytics device means if I go to visitors you can see that we are having from different location we are having different visitors so visitors is 200 but premium is only 50. so this one we are going to basically render in the chart 2 and the below one will be chart three so that part we are going to do in the next video all right everyone so let's start working on the chart uh number two which is basically to get the analytics for the uh premium and the normal visitors and the third one will be for the device Analytics so again I can already created the config here you can see that for device we are having this desktop laptop tablet and mobile and this is for the visitor analytics now I already will add the code in the description so you can download from there or basically you can Fork it whatever your choice so now let's go to our component and here I'll create two more folders so the first one will give this one name as visitors Analytics and we'll create another one sorry this will be device Analytics all right so let's start with the visited one so create index.js so create this one as a client component so here what we are going to do for this one let's create the component first export default function this will be visitors Analytics and let's return here so for this one also we'll be having same structure whatever we are having here so instead of rewriting I'll just copy from here and we'll paste it here all right so this one we are going to import and this will be our visitors analytics chart options and for series we create here Series this will be so the first one will be our name which will be our normal visitors all right sorry we have to give object here and then we are having data we'll keep this one as empty next we are having the premium users so this will be our premium visitors so this is our series all right and for this one what we are going to do we'll be doing this one by Visitors by country all right so in this component we will be basically receiving all visitors so from where we will be basically receiving from our dashboard layout we have to basically call this uh so we'll go to our dashboard layout where is that so here and uh so I think not here I think yes I think in this part so here now what we are going to do so after this we are going to call the visitors Analytics and here we are going to pass all visitors as this all visitors that we are having as a prop all right now let's do one thing here we will create another div we will take a class name for this one and we'll make this one as column span of sorry do column span of 12. so for this one uh what we are going to do we'll be having this device analytics so let's quickly create this component also index.js so this will be use client so this export default function device Analytics and here we are going to return for now return some div and we'll basically call this one I pass this one and here we are going to basically call this device Analytics and we'll pass this so here also you have to pass the all visitors so pass the same okay and also let's do one thing let's check the length also all visitors or else this will be empty same we can pass for this one and this one we are going to receive here also all right so now let's go and let's see what we are getting so we are getting visitor by country here I think we have pasting in the wrong place let me just check uh okay I got it so you have to paste this one outside sorry this part you have to cut it and you have to paste it outside so this is fine and now what we need to do now let's go to visitor Analytics so here we have to make this one as four for small device so now this is fine so you're getting visitor by country and then device analytics here so now we have to basically create the data for these visitors so now how we are going to create that so let's see first what we are getting in this all visitors let's log it something like this let's open our inspect so we are having this data here and then if you noticed here one thing what we have to basically check we have to check that how many locations are there and so you can see that we are in Spain India and then we are having Germany for example now there can be a situation where India can be multiple times for example let's say for June there is a visitor from India for January also there is a visitor from India so you have to basically get the unique number of locations so how we are going to do that this will do a const unique location and this will be equal to so we are going to basically take a new set and here what we are going to do will do all visitors dot map so here we'll get item and this will be item dot location so this will give us unique location all right so if I now log this here let's see what we are getting so you can see that we're against Spain India and Germany now in that uh chart what we are going to do will be showing a maximum like four or five uh uh country so what we can do all right so now what we need to do we basically got the unique location so we have to basically update the options all right so for this one we'll take late uh updated options and these will be equal to we are having this visitor yearly chart options and then we are going to take x axis and in the x-axis we're going to pass the categories all right so in the categories what you have to pass you have to basically check if this unique location dot slice so we are going to slice this one so we can't so all the all the countries will only sow like three or four countries so we'll do zero and it will splice to if this dot length if this is greater than 4 so we are going to splice till 4 or else it will spice this length all right and these updated option we are going to pass it here fine and then if I now just give some random value here for example one two three and one two three let's save it and let's see what you're getting awesome so you can see that we are already getting Spain India and Germany so what will happen basically based on that we'll calculate the data here and it will basically return so now what we need to do we have to basically calculate the data so here I'll create two helper function so one will be gate all visitors by country all right so this will get the data and the country and next we are having get all visitors called premium visitors all right so this will also receive the data in country all right so here what we are going to do the first thing is that we will check if this data and and data dot length if this is zero so we're going to return zero models I think we have done this logic we have to filter and then just reduce so I think we can use the same logic from here and then we'll just return so this will be data.filter this item dot location is equal to this country so here we are going to take this item so this will be our visitor item so this will be visited item dot visitors all right let's copy the same logic from here and this will be premium user number and this is done so now what we are going to do we already have the unique location so we will simply map this unique location here sorry so we'll map this unique location so we'll do unique location dot map because I'll give you the example let's say in all visitors we are having 10 10 array of objects or basically 10 items now in the 10 items the three items is of of India and two of USA and rest is different so instead of showing three times India what we are doing here basically getting the unique location and based on that we'll just map it I hope you are getting so this is a location item and here what we are going to do simply will simply pass we'll map it and then we'll call this gate all Visitors by country here will pass the all visitors and here what we can do simply will pass this unique location or we can simply pass this location item also directly so this location items is basically these location items of the zeroth element first element and the last element and same thing we can do for this one and this will be get all premium Visitors by country now let's format this save and let's see awesome so now you can see that we are already getting the data here so now let's refresh this page all right so we are having Spain 200 premium 50 then having 1500 and then we are having five hundred three uh 500 and then 300 if I now go here you will get the same data here spend 250 one 150 now what will happen let's say I'll add another one so I'll give a visitor of 200 premium 100 location will give same as India device will give laptop and I'll just change this one to let's say December something like that if I now add this one so we are having two times India but the month is different so we should have 1200 visitors and we are having uh 600 uh premium so let's see if this is coming or not so if I go here see 1200 visitors and 600 premium this is for India if I just go to visitors again let's add another one so look at 500 450 USA will give and device will give laptop month anything like me try to add this one USA if I don't go to dashboard you will see four see now we are getting us also awesome so this is working fine so this is all about our visitor by country now in the next part what we are going to do will have to basically get the device analytics now device analytics is basically if I go here you are having this tablet mobile tablet laptop so this count we basically have to get and based on the tip to render that from which device the user is basically accessing our website so that data we are going to render in the last map so that sorry last chart so that what we are going to do in the next video all right everyone so let's start working on our last uh chart that we are having so we will be having basically the same jsx that we need so you can copy the this one and then we can go to our device Analytics here and we'll use the same here now here there are some changes we need to do so for Excel we are going to make this one as 5. and this will be our uh visitor Analytics by devices okay I'm going to import this one from here and this will be our device analytic chart options then we are having the series so for this one we will take series and for this one what we'll do will create a helper function here and if I now go to dashboard you can see that we are already passing this all visitors here so that will be receiving so we'll create a failover function so this will function gate device by visitors something like that and this will be data and this will be device or let's give this one is get device so here what we are going to do we'll check if this data and then data Dot length sorry length and and data dot filter item if this item dot device is equal to get device dot length sorry you have to give out site dot length I think we are doing something wrong let me just check to give here only dot length if this is equal to 0 so we're going to return 0. or else this will check if data and then data dot length screw or else this will be 0 and here we are going to do data dot filter item so this will be item dot device equal to equal to this get device dot reduce so we'll get the uh what is this this is uh something like what we can do we'll do this one as object something like that and here we'll do ACC plus obj dot visitors so this is the total number of visitors comma 0. so you're filtering based on the device it can be desktop it can be laptop something like that and then here in the diva in the series we will get device by visitors we'll pass this all visitors and the first one will pass this one is desktop all right and uh before that what we can do will make this one is empty first let's see what we are getting in this all visitors so this is device Analytics go to console now let's show here we are getting this is tablet this is mobile so this is fine so now what we can do we can basically take this and paste it four times so first on desktop then we'll do laptop then we'll do tablet and at the end we'll make this one as mobile and this is done and at the end we are going to pass this one as series let's save this now let's see all right so we're not getting anything I think the reason is because you have to change something so the first one is we have to make this one as type of donut and also we will change some other also so we'll make this one as device all right and what else will give some something like MX will make this an MX Auto Flex justify Center all right and for this div we'll make this one as margin bottom of two so let's format and save this let's see awesome so now you can see that we are getting the data here and this is fine so everything is done the only thing is that let me just check so visit our analytics by devices so this is also coming fine and you can see that this is also working so getting mobile 1700 desktop tablet 700. if I go here you can see that you'll be able to see the same data here so you can see that we are having 500 plus this one 700 for mobile we are having 1000 so if I now go here and you can see that we are having mobile 1000 if I try to add another one let's I'll add 500 visitors 250 premium location I'll give something like Sri Lanka this one I'll choose mobile only and month I'll choose anything let's add this so we'll get the updated data if I now go to dashboard so here now we'll see we are getting 1500 mobile and everything is working fine so now I think this is done so that's all for this particular video I hope that this will give you some brief idea how to use how to work with charts how to basically handle data using the snages and also mongodb database and also one very important point we have also learned how to integrate this Google auth so you can see that now if I just click on this log out let's see if this function it is working or not so it should basically go to the north page so you'll not be able to access it and you can see that now if I try to go to the products page so it's going to the unlock page if I try to go to the visitors it's going to the on off page and let's go to try to go to the home page which is the dashboard so it's going to the another page if I try to log in now or let's say it's going to the dashboard so this is fine also you can we can do another thing and that is let me just check in our package.json we are already having react Spinners so you can go to our context and let's take some kind of loader here so the const loader set loader this equal to use state of true right and here we'll be basically getting this status if this status equal to equal to loading will basically make this set loader S2 only once this is done then only will basically make this set load dot sorry first we'll paste this and we'll do set loader as false so this is basically means when the page will load for the first time we will basically show some kind of loader so let's see so now here what we're going to do will do if this loader is true we are basically going to return some leave and let's take a class name so we'll do W full we'll do here mean height screen we'll do Flex justify Center and item Center and here we are going to import the pulse loader and we'll pass some color so color will pass this one as black we'll do loading which will be our loader all right we'll pass the size of let's say 35 and we'll pass some data test ID which will be our loader so now let's format this and let's save this let's see so you're getting this loader I think it is coming as false all right so I think I got it so if this is authenticated also then also you have to make this one as false so what we can do we can basically paste it outside only or something like we can do something like if these status is equal to equal to authenticated sorry if this is equal to equal to authenticated then also I'll do the same thing so now this should work let's see awesome so now you can see that this is fine let's try to go to the products page this is fine visitors dashboard if I try to log out now so we are showing loader and now it should go to the another page it's working fine if I now try to log in now it should go back to the dashboard so it's going to the dashboard page and everything is fine now let's do one thing let's go to our another page and here what we can do first thing is that we'll take this one we'll copy this class name here and we'll paste it here sorry let's save this let's try to log out here and let's give some class name here we'll do text as how much we'll leave this one as 50px we'll do font bold uh let's make this one as 30. all right you are not authenticated something like please login and I think this is fine all right so I think almost everything is done hey everyone before closing up I just noticed uh one issue that we need to fix so in this uh chart two where basically we are showing this visitor by country you can see that we basically need to show four countries here but if you see here we are getting one extra space the reason is because here what we are doing we are getting the unique location but for this updated option we are actually slicing this to uh till four basically we are basically taking the four location if the length is greater than four but if you see for series we are basically mapping the whole uh array here so what we can do here basically we can take another constant and something like const Maps Max unique unique location to so and here what we can do basically we can write this particular logic this one so here we'll copy this or cut it from here and we'll paste it so this is the Max uh unique location to show here and here we are going to pass this one and instead of mapping the whole location let's say there are 10 location so instead of mapping the all the 10 location will only uh basically map the forward location or basically the maximum unique location now let's format this let's save it now this should work so let's see what is happening awesome so now you can see that we are only getting four uh label here and at the same time we are only getting four data here so this is correct so this is just one thing I just noticed another thing I want to mention and that is first time while creating all the folders we created this dashboard folder here but because we are not using any dashboard route for the dashboard we are basically using this home route or basically the slash route so that is the reason this dashboard folder that we are basically having this one we can basically delete so we'll just delete it from here all right so this we don't need awesome so I think now each and everything is now correct so everything is done so this is the two points just I want to mention 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'll see you in my next video till then good luck and peace

Channel: Sangam Mukherjee

Views: 24,104

Keywords: next js project, nextjs admin dashboard, next js 13 projects, react js admin dashboard, next js 13, next js admin dashboard, next js dashboard tailwind, next js tailwind css projects, reactjs admin panel, reactjs admin dashboard, next js 13 fullstack admin dashboard, next js tutorial, next js admin panel

Id: spkL28fcUIU

Length: 182min 52sec (10972 seconds)

Published: Mon Aug 14 2023