Build a NEXT.JS User Dashboard - Tailwind CSS - Chart.js

what's going on you guys Claire welcome back to the channel code Converse and in this video I'm going to show you how to create this Enterprise level dashboard in next.js styled with Tailwind CSS let's have a look at what we're building so this is the main page this is the dashboard of the dashboard okay so top cards component here we're using chart.js for this bar chart component then we have a recent orders tab off to the right then we do have a customers route and then also an orders route as well okay and everything is mobile responsive you guys you notice as I shrink this thing down everything displays just beautifully okay so if you're gonna see how I built this from start to finish next.js Tailwind CSS let's go okay so here we are in vs code now I'm already in the working directory the folder I want to be in next Dash Dash Okay so first we need to do what we need to do is create our next JS application so I'm gonna do that by typing npm sorry MPX create Dash next Dash app okay I'm going to say at latest to install the latest version of nexjs now I'm already in the directory I want to I want to put it in so I'm just going to click the put the period there so no no no no no okay and that's going to install pretty quickly here now um guys this is a perfect project to put on your portfolio website and showcase this to potential employers okay a lot of you are asking you know what should I put on my on my portfolio you guys this is a good project to Showcase okay so here we are let's go ahead and start up npm run Dev it's going to start our development server for next JS yours is going to be on 3000 mine's starting on 3001 because I'm showing you guys the demo here so this should be what you see here this is our next JS create next app this is what it should you should see okay so what I want to do first you guys let's go ahead and stop this thing here and let's go ahead and install Tailwind CSS okay so let's go to tailwindcss.com okay go ahead and click get started and we're going to click on the framework guides okay so next.js should be at the very top so go ahead and click that so first few things here it wants us to create our next app which we just did that so let's move on to step two let's just go ahead and copy this in here to install Tailwind okay so let's just go ahead and paste that in there great now this next step we're going to copy over this npx Tailwind CSS init and that's going to create this file off to the left here your tailwind.config file okay and next what it wants to do is basically just replace this what's highlighted this content here so I'm just going to select that there and paste that over there perfect I'm going to save that gets nice and formatted then our final step here almost final step is to copy this over into our globals.css file okay so let's go into our Styles we can actually delete this home dot modules okay we don't need that let's just go ahead and remove that that our globals.css we're just going to replace all that with our Tailwind base Tailwind components and our utilities these are all of the directives for Tailwind go ahead and close that you can close that tailwind.config file and you guys that's it that's all we need to do to install Tailwind CSS okay so let's go ahead and run our server here npm run Dev okay now um we're gonna see some errors okay we're going to see some errors because we just deleted some things and it's looking for stuff that that we just deleted okay so our index.js let's go ahead and see and we're going to need our pages and then also we're going to use our public here in a minute in our index.js let's just go ahead and we'll leave the main leave the head leave the main let's just go ahead and delete everything else where we go there we go we'll just go ahead and delete all of that there go ahead and save that perfect okay and we can we'll remove that just leave it as empty for now and we can delete this enter and then we get rid of those two the enter and the styles and okay yeah that should be good right there okay so what I want to do first is let's create our let's create our little our header here okay this is our header this is our sidebar these can be our top components there so let's do our header okay so I'm going to go ahead and create a another folder here called components okay now inside of our components folder I'm going to create a we'll say header dot jsx okay so RAF CE is going to generate our functional component for our header now let's go ahead and import this inside of our main our index.js okay so I'm going to say import header from and then we'll say dot dot components spell that so go outside of our current directory then we're looking for our header and we'll put that in here inside of our main here just like so so now we should actually see it off to the right and there it is perfect okay so for our main let's go ahead and give uh some some styling here to our main okay so what I'm going to say is BG gray and this is Tailwind right here you guys we're saying a background of gray 100 and it goes up from 100 I think to 800 or 900 the higher you go the darker it gets so as you can see it's over here there it is header perfect so next I want this to say a minimum height of screen which is 100 minimum height of 100 viewport Heights and basically what we're styling is everything you see here that's not in our sidebar there okay so that's perfect that's what we want right there you guys that is perfect so we have our header now let's go in here and actually add add some stuff so in here we're going to have two H2S we'll have a dashboard okay then let's just copy that down and this one's going to say we'll say welcome back there we go see what we're doing there perfect so let's just style this where we give some more Tailwind classes in here I want this to say uh I want to split displays flex and we'll say justify between which is saying space between then we'll say PX4 and then a padding on the top of four which Tailwind goes in multiples of four so by saying four that's actually one Rim as you can see there when we hover there you have it you guys that looks pretty good so let's go ahead and we can go ahead and just close that header okay so next one I want to add in let's do our sidebar okay and we're using react icons for the icons you see there then you see a little profile image at the bottom okay so let's go ahead and I'll tell you what let's go ahead and install react icon so let's just type in oh we're going to go there later we'll say react icons go ahead and click that there let's stop our development server and I'm just going to copy this over here what it's going to do is just install our react icons package so we can have access to all of all these icons okay so we just installed that we'll say npm run Dev let's start our server back up okay so next I'm going to create another component this is going to be our sidebar component so I'm going to say sidebar.jsx rafc is going to generate our functional component in here okay now a few things we want to do is here so we're actually going to wrap our our app.js so let's go ahead and pull that open here we're actually going to wrap our app.js with our sidebar component okay then everything else uh that's inside of our our sidebar are actually going to be Children of the sidebar okay so what we're going to do here is actually right now we're just returning this component but we're going to return multiple components here and if you do that you need to actually use the parentheses here so we're going to say sidebar and sidebar just like that okay but let's just copy this and place it right there then of course we need to import it here so we'll say import sidebar from components I'll slash sidebar so go ahead and click save that's look good there okay so we have our sidebar there you go perfect now we need to add a few things here okay because it's not displaying properly and that's okay so let's go into our um our sidebar here and what we're going to take in here I've taken some children there we go and for our sidebar we're going to style this a few different ways here we're gonna have two main divs okay so we have our sidebar I'm going to put this sidebar down here now I'm going to create another element here this is Main and this is where our children so now we should see there we have it the rest of our application so our sidebars displaying properly however we need to add some styling to it because we only want it display on the left side of the screen so let's go ahead and we get rid of that there and what we're going to say let's go install this thing out so this is actually going to be displays as Flex so we're gonna have two divs here class name Flex okay there we go so we're gonna have one main div over here okay and everything is going to be inside these are our two divs that are displaying as Flex okay so this one over here let me give this a class class name there and I'm going to say fixed I'm going to say width Dash 20 if we hover over that it's going to be 80 pixels there we go and then we'll say let's say h yes screen there we go perfect so height of 100 viewport Heights say p dash four for some padding b g of white we'll say border right okay and I'm going to use some brackets there so we can use a custom values until when Flex Flex column there we go and we'll say justify Center or sorry I'm going to say justify between okay perfect that's what we want right there so there we have it you guys now for our main we're gonna actually have to give our main some uh some styling here because right now it just looks kind of funky we actually want to display the full uh width of the screen so let's give this a class name here and I'm going to say margin left of 20. I'm going to say width full okay so that's looking pretty good so far you guys awesome so next let's go over here I hate it when it hate it when it breaks everything up like that I don't like that there we go Okay so inside of this div so we're gonna have basically so this is our our sidebar right here and the main is is this part so for this div inside this div we're gonna have basically two more dips we're gonna have this top little div here then our bottom div here with our with our profile image so let's go ahead and we'll say div and I'm going to say class name here this is going to be Flex Flex column items Center okay and now inside here we're going to have a link here so link href and we're going to need to import this so we're going to import link from next Dash link and let's go ahead and copy this down because we're going to import also an image as well so we'll say image just like that it's the next JS feature that we're going to be using okay all right perfect that's what we want right there you guys now so for our link I'm going to go ahead and save that so it gets formatted inside of our link okay I'm gonna have a div and this is going to be our right there kind of like that top icon kind of home button I guess okay so what we're going to say in here I'm gonna have a div and this is this is just going to go to our home page okay so we're gonna have a div and then we're gonna have our RX this is our react icon sketch logo just like that and we need to actually import that so I'm just going to copy that right there and we'll import from react Dash icons slash RX okay so now we should actually see our icon there it is perfect and I'm going to give this a size property of 20. there you go just a little bit bigger now for this div we want this to be purple I think it was right yep purple so let's give this a class name here and we're going to say it's BG purple and there you go yeah it goes up to 900 so 50 to 900 I'm going to use 800 there you go text white it's going to make everything in there why perfect there you go now I want to say p-3 I'm going to say rounded large inline block that is perfect that's what we want right there you guys looks good now next we're going to want to add probably a little span underneath we'll put this underneath the link here so I'm going to give it a span here and we'll say class name I'm gonna say border bottom I'm going to use our brackets again so I want it to be a pretty thin line one pixel then we'll say let's see here border gray 200 width full P2 all right looks good there so underneath this span we're staying within this div here underneath this span what we're going to create is some basically some more links and I'm just going to copy that for now paste that in there but instead of purple let's change this to Gray gray 100 there we go perfect and then I'm going to add a hover effect as well hover and then we'll say gray um BG gray 200 Maybe we'll say there you go perfect that's good right there perfect gray 200 text white everything else is looking good there um let's have let's get with that text white I'm going to say cursor cursor pointer and give it a little margin on the y-axis of four so it kind of bumps it down oops there we go all right perfect now um everything else looks good however I want to change that logo we're going to use RX dashboard so let's go ahead and import that RX dashboard oops there you go this might be this is a lowercase all right looks good right there awesome you guys so next let's just go ahead and copy this down a couple more times so we're going to have our dashboard we're gonna have our little person there our shopping bag and our settings so next what we're going to use is rx dashboard we're going to have an RX person just like that and then we'll have this one's going to be hi outline shopping bag and then the bottom one is going to be fi settings okay so let's go and import those so we can get rid of those errors so we're going to say import fi settings from react Dash icon slash fi and then what else RX persons not defines we'll say RX person and then the hi outline shopping bag I'll just copy that over so let's import and you guys these have to be on see we can import them on the same line if it's that same from that little same Library see this one's fi that one's RX this one is hi so we have to do that on a separate line from react Dash icons we go um and slice of hi okay there you go perfect so look at that you guys that's perfect right there now um let's go ahead and add in uh some links here so this is the dashboard that's perfect um we're gonna leave that to the home page so for this one for the person we'll link this to customers now we have it actually set up any routes yet so that nothing's going to happen for now and we'll say person for the shopping bag or sorry we'll say orders all right you guys that looks good so that is it for our sidebar quick a little water break there that's it for our sidebar now next what we probably want to do is let's do these top cards here at the top so and this is going to be we're using the grid for this we're going to use five columns so each one is going to take up two or the first two are going to take up two columns this is just going to take up one then on the on anything below that this break point they're just going to take up just one column so let's go ahead and do that right now so we'll go ahead and go create our top cards here and we're going to create this in our components here topcards.jsx okay raf-ce get our functional component in here now let's add this okay we're going to add this to our index and we're just going to put this right below our header okay so we'll say top cards just like so let's go ahead and save that and we need to import this we'll say top cards whoop okay there we have it you guys looks good there now let's go ahead and where's our top cards let's close down our sidebar for now and we can close this app.js okay um we'll leave this index.js open for now so we're going to come back to that in a minute so for our top cards okay for our top cards let's go ahead and add some stuff in here so basically it's going to be one parent div there then a few below there so for this one let's give this a class name okay so for a class name we're going to display this as grid anything above that large break point we're going to say grid columns five and then we'll say gap for otherwise you're just going to be one by default and then we'll say p dash four okay so for our divs here let's go ahead and header top cards top cards so if we're gonna have something in here let's go ahead and do this first one here okay or you know what let's yeah let's go and do this so let's give this a class name okay and these are actually both going to be the same here so we can just copy these down this one's going to be anything above large we're going to say column span two right let's just Comm span one we'll say BG white we want to display this as Flex justify between so the contents and they're going to be spread apart and say width full border then p dash four rounded large okay that looks good so let's go ahead and copy that down and that second one is going to be basically the exact same okay but for this last one this one on the end um it's going to be pretty similar however when we just minus that break point okay so I'm just going to copy this here basically and we'll say class name BG white Flex so it should look all the same there and then when we open this thing up there he goes ah perfect that looks good looking good all right now let's add some contents inside here I'm going to shrink that down so for this top one you know what I'm just going to type on multiple lines here so I'm just holding down the option button that way just a little Time Saver I can type on multiple lines and then um because the majority of this is going to be the same then we can come back and and edit what we need to so what I'm going to say in here we're going to have a div okay and for this div we're going to have a class name and this class name is going to be flex and we'll say Flex column and with full then I'm going to say pb4 just like so okay perfect now go down one inside of these we're going to have a P tag we're gonna have two P tags actually and then so we're going to have we'll say again I'll come back and change this in a minute this first one is going to be 846 just like so and then we'll say uh daily Revenue just like that perfect now for this P tag let's give this a class name this first P tag we'll say class name and we'll say text 2XL so it's a little bit bigger there we go let's say font bold looks good and then let's go down to the second P tag here and for this one we're going to say class name we'll say text Gray 600. all right looking good there now let's add a uh let's add let's see underneath this div here we're going to add a P tag and inside here we're gonna have a span and we'll just say Plus 18 percent there we go and let's go ahead and style this as well class name for this one I'm gonna say BG green 200 Flex justify center items Center padding two then rounded large perfect and for this span I'm going to say text green 700 then text LG for large okay now I'm just going to copy this right here and I'm going to paste one right there and we'll paste one right there perfect so that is what we want right there you guys look good all right but let's change out these values because we don't want the daily revenue that's we're going to have let's change this one to we'll say one four three I had like a seven in there then instead of daily revenue we'll say year to date year-to-date revenue and then down here we'll just say maybe this can be the amount of customers we'll say we have 11 for okay we'll see okay instead of 18 we'll say this one's up 17 and then this one can be up 11. all right you guys so let's open this up looking good so far you guys smash the like button if you feel like you're getting some value out of this I'd appreciate it you guys we are done with the sidebar we're done with that top bar next one I want to do is let's go ahead and create our bar chart component using chart JS and also our recent orders component off to the side okay so let's just shrink that down we can close that okay so next what we want to do let's go ahead and we're going to create our bar chart and also reset our recent orders components so let's go in here for components we'll say bar chart Dot jsx and then let's say rfce there and then let's do another one real quick we'll say uh recent orders.jsx rfce get our functional component perfect so next let's go into our index okay so we're going to stay inside our index here inside of our main now we're going to create a div because this div is going to be you basically just right below our dashboard here okay so these two here so still going to be within our main okay and then we're going to create a div right here and inside here we're going to have our bar chart and then we'll have a recent orders okay perfect now let's go ahead and we need to probably need to import those okay so let's just copy that down this one's going to be bar chart just like so cool copy that we'll paste that in there then this one is going to be recent orders cool let's paste that in there all right perfect there we go you guys looking good all right so next what we want to do is next what we can do let's go ahead and style this div here so I'm going to give this a class name we're going to display this as grid okay so we're going to say P4 for some padding let's say grid okay there we go I'm going to say anything above medium we're going to say grid columns three else just grid Columns of one and we'll give it a gap of four perfect so let's open this up there you have it so now we can go in here and we'll add some span to our bar chart and then also to the recent orders um as well so let's do our let's do our bar chart first okay so for our bar chart we're using chart JS and it flashed over here on the screen see chart js2 this is it right here react chart js2 okay so we're going to be using npm so what we're going to do let's go ahead and just install um this this react component okay this component Library so go ahead and copy that let's stop our server real quick okay I'm gonna go ahead and paste that in there npm install Dash save chart JS and react Dash chart js-2 okay npm run Dev to get our development server back up here okay so for our bar chart we're going to need several things here okay so let's just go ahead and copy this one here we're going to import that there so let's go ahead and save so chart as chart.js we're going to need you know what we're not going to use that let's get rid of that let's go find we should have a bar chart here so components yeah there it is bar chart perfect okay so this is where we can basically import a lot of things that we're going to use we're going to use this one so let's import that import the bar now down here we can actually import all the things that we're going to need here see let's just go ahead and Shrink that down so what we're going to need let's import so we're gonna need a few things here chart as chart JS just like that we're going to need category scale we need linear scale we're going to need a bar element we're going to need a title a tool tip then we're going to need a legend there okay so and this is going to be from chart.js okay so go ahead and save that okay perfect that's what we need there now we need to import the bar we got that one perfect okay so that looks good for now um I have all these imported so next what we need to do what we're going to say is chart js.register okay and then what we're going to have is category basically everything we just imported category scale the linear scale but tell you what here we go we'll just copy this over all right so make sure we import those six things there or register those six things perfect linear is not defined do we leave that one out okay but no okay we're good we are good all right so we're gonna have some state in here we're gonna have the use effect hook to basically load our our bar component whatever our page loads so let's go ahead and import the use state and also the use effect hooks here and react now inside of our bar chart here inside of our bar chart let's go ahead and let's have a div here and let's save this one we just leave this one as a fragment here now inside here we're gonna have our bar okay just like so and that's fine can't read properties of labels that's fine here let's go ahead and add a [Music] let me give this a class name I'm gonna say width full anything above medium I want to say column span 2 okay display this is relative anything above the large break point we're going to say height of 70 viewport Heights using our brackets in here okay for custom values and we'll say 50 viewport Heights there margin of Auto then we'll say p-4 for some padding I'm going to say border and then rounded large and PG white okay so let's go ahead and save that perfect that's what we want right there now what we need to do let's go ahead and import some stuff for our for our chart JS okay oh right so legend legend perfect so what we need to do here let's go ahead and add this this is going to go inside of our bar chart component so we're going to have a const here whoops now there this is going to be our state here so we're going to say chart data set chart data like so and this is going to be equal to use State okay and then we're going to have just an object of data sets and we'll just set this equal to an empty array just like that okay so let's give it a little space there so next we'll make sure so next what we want to add in is our chart options we are going to pass through some options for our bar chart here so we can go ahead and say I'm gonna go and pass those in here before I forget I'll say data equal to chart data and then we'll say options equal to chart chart options and let's go ahead and create our chart options right now okay so const and we'll say chart options and set chart options okay and this is going to be equal to use State and mostly of an empty object for now okay so there we have our bar charts not displaying yet but as you can see that's where it's going to go there shrink that down so we're going to add in some data and we're just using some static data for our chart okay we're not actually pulling this data from anywhere we're just going to code it in and we're going to do that right now so we're going to put this in just below our um our last state here and basically we're going to wrap this in a use effect so whenever our page loads or our component loads rather our our use effects going to run okay so we'll say use effect like so and then we're going to have a here we go at our dependency array so it only runs once make sure you add your dependency array otherwise you'll get some some errors in here so what we need to do is our set our chart data here and I'm just going to add in the data that we're gonna that we're going to be setting here so we're going to have labels it's going to be right here and then we're going to have a data sets as well and inside here I'm going to go ahead and paste this in and feel free you guys I'm going to put a link to the GitHub again like I said I'm going to put a link to the GitHub down in the description below so feel free if you want to copy some of this stuff right here don't copy everything you guys you're not going to learn by just copying it you need to actually type it out but some of this stuff here feel free to just copy that over um just just to save a little bit of time okay so um for our labels these are going to be uh just the um that right there and look at that it's already pasted in there pretty pretty good there so whenever we hover you can see the twos Tuesday Wednesday Thursday okay looking good there so next we need to set our chart our chart options okay so we're going to set this and this is going inside of our use effect so for our chart options are going to cut basically um allow this thing to be responsive and make sure it displays displays right okay so that's looking good so far but let's add in these options and again this is going to be inside of our um inside of our use effect okay so we're going to add this in just below our chart data okay so we're going to say this is our set chart data next we're going to do our set chart options so we're going to say set chart options and inside here what we're going to have is scroll that down some plugins okay then we're gonna have our Legend now for our Legend we're going to have position set that position to top just like so then we're going to have just under Legend we're going to have a title now for our title we're going to display true and then we'll say text we're going to say daily Revenue for our title there we go and then next what we want to have is let's see here next we'll have after a title we're going to have Main tane aspect ratio just like that we're gonna set that to false and then we'll have responsive set to True okay so let's go ahead and give that a save looks like let's see plugins that mess something up here bar chart failed to compile our title there we go let's go ahead and refresh that okay so that is looking pretty good and we don't have anything in our recent orders down there so let's just open this up look at that you guys looking good so far all right so let's add in our recent orders okay so that's all we need to do for our that's all we need to do for our bar chart you guys so that looks good right there awesome good work you guys everything is looking good now for the data okay so we don't actually we're not connecting to a data so and you know in production of course you can use axios or some some sort of library to make a um API call so we're actually going to have all of our data inside here locally so let's go ahead and I'm going to create another folder here okay by the name of data and then inside our data folder I'm going to have a data dot JS okay so let's go ahead and I'm going to import some data in here I'm just going to copy it over again feel free to copy this part from the uh from my GitHub don't copy everything you guys you're not going to learn everything like that so we'll say export const data okay now this is just going to be an whoops this is just going to be an array of objects okay so just to go over this I want to spend too much time here but basically we have an array of objects we have about 10 objects each object has an ID a name by the first and last then we have a total the status if it's on hold if it's processing if it's shipped and then we have a method like a payment method PayPal Visa whatever then a date and for the date um I just said you know one hour ago two hours ago and whatnot okay so that's all we need to do there let's go ahead and close that bar chart and we're going to go into our recent orders here okay so for our recent orders I'm going to open this up and leave it right there so we can just kind of see as we're as we're coding this out okay so for our recent orders let's go ahead and so we need to actually import our data here so I'm going to import uh we'll say data from whoops from we're looking for data slash data JS okay that looks good there now we're going to use some icons here as well okay so we're gonna use a little shopping bag there so let's go and import that as well we'll say import uh fa shopping bag I believe from react Dash icons slash fa okay perfect all right so now let's go ahead and trying to give this some room here so let's go ahead and give this a H1 I'm gonna say recent orders and I'm gonna go and style this thing class name what I'm going to say here what I'm going to say here is with full went column span one I'm just position relative anything above large basically we're going to do the same thing that we did on this so anything above large we want the height to be 70 viewport Heights which we're going to add in as a just a value like that so um viewport Heights then every else we're going to say height of 50 viewport Heights there we go then we'll say margin Auto padding of four which is one Rim let's say a border there and then rounded rounded Dash large perfect that's looking good right there BG white and then we want it to be able to flow or uh scroll sorry so we'll say over flow scroll okay perfect now that we can't see it scrolling X we'll have anything in there but as you can see we have a scrolling capability all right so next so we have our recent orders in there so next we're gonna have unloaded lists here and here we're going to map through our data okay so um let's go ahead and do that so we're gonna have we'll say data X we imported this with data right so we're going to say data dot map okay and we'll say and put map it through his data we need an ID and then we'll say use some some parentheses there so we can just kind of map out elements on the screen we're going to map through each one is going to be a list item so just create a little list item like that and let's just give this a key react likes to give keys key of ID just like that and let's give this a class name while we're at it here so I'm going to say BG gray 50 on Hover I'm going to say BG gray 100 rounded large okay my three give a little margin in between there padding of two Flex item Center then cursor pointer okay so each list item as you can see there's our list items in there and it's going to each list item we're mapping through the exact amount of objects inside of our data array there so I hope that makes sense so inside of our list item okay each one we're going to have a basically a div with a shopping bag here so we'll say if a shopping bag and let's go ahead and give this a class name BG per bull uh 800 perfect perfect uh sorry not BG this needs to be text there we go that looks good there okay perfect yes so now um let's go ahead and give this div a class name so we want this to be basically a purple as well would probably be 100 or 200. it's going to be our little icon container I guess you would say so next we'll say BG um BG purple 100 and there we go rounded large we'll say P3 all right there you go everything's scrollable perfect so it's actually mapping through all of our data right now um we haven't we're not displaying any information on the screen there but we're going to go ahead and do that right now okay so just below this little icon container still inside of our list item what I'm going to say here is flown out of the screen here sorry about that yes so what I'm going to say just below this but it's still inside of our list item what I'm going to say here is we're going to need to create another div here and we'll say this is going to be a P tag here this is going to be our order total so I'm going to give this little dollar sign there and what we're going to say is so we're mapping through our order so I'm going to say order dot total and we're getting that total you guys from right here so now you can see we're getting some information on the screen then the next what we're going to grab is the the name so we're going to say order dot name DOT first and it's going to grab the name so let's go ahead and do that right now so we'll create another P tag just below this one and what we say is order.name DOT first there you have it that looks good there so next let's go ahead and create another P tag still within the list item and this one's going to be the date so we'll say order dot date of course just to be redundant here there it is all right so let's style this thing so this is going to be the div that surrounds uh our text here or our order total and the first name we're going to say padding on the left four there we go now for the P Tags I'm going to say text whoops class name text Gray 800 we'll say font bold there we go and for this one give it a class name this one's going to say text Gray 400 text small there we go looking good now let's style this P tag over here class name and we're going to say this is going to be we're gonna have some mini queries here so anything above large we're going to say display Flex else mediums would be hidden that's going to be absolute right six whoops right six and we'll say we'll shrink it down some text small look at that you guys that was looking good so far let's make sure it is responsive as we shrink it down so look it's hidden and then as we get above our large break point is going to be displayed as Flex look at that and feel free to add your own style if you don't like the way it looks feel free to change all of that up as well okay so look at that you guys smash the like button if you feel like you're getting some value out of this I appreciate it thank you for sticking with me so far so next we have our dashboard but we need some more routes okay we need a a um I guess a customers there and then we also need what a uh an orders tab route as well okay so let's go back to our main page there don't worry about that so next let's go ahead and create these routes so what we're going to do next let's go into our Pages here okay we can just close that so for our Pages let's create a new page and we're going to need our customers.jsx okay ref CE get our customers then let's go ahead while we're at it here and we'll create a new file of um we'll say orders.jsx okay so RAF C get our functional component there so let's see did we add in where's our sidebar I think we did so if we go ahead and click customers there we have it so it's this is the beauty of nextjs you guys since we created these components in our Pages folder that automatically creates a route that's why we don't have to mess with react router Dom or anything like that so customers and remember we already set this in our sidebar to to the correct route and we did at the beginning so this should be orders that's how awesome next year is you guys are so fast so so fast so let's go ahead and we'll close that recent orders um we can go ahead and I think we close this index.js for now I'm going to leave that data open because I'm going to come back and reference that um so let's go into our let's go do our uh customers first okay so for our customers having some media queries that's what we're gonna do again we're going to map through those as well okay so let's do that okay so let's go into our customers here I'm going to shrink that down a little bit so for our customers we're going to be using some react icons let's go ahead and import these and again these are we're importing BS person fill and bs3 Dot vertical and whoops spell vertical from react icons and you guys again since this is the same icon package they can be imported on the same line okay so and then we're going to want to get access to our data that we're gonna we're gonna map through our data here as well so um we have to import that again so we'll say import data it's me from it's going to be data and then again it's ourdata.js file okay Okay so look at what we're doing here perfect so okay so what we're going to do here let's go ahead and write out some jsx here so we're gonna have a div here and then we're gonna have an H2 that says customers whoops and we'll have another H2 that says I didn't add in anything Dynamic so this is going to be basically that that top bar again here so for this H2 we'll say or for this div here we'll say class name damn it we'll say Flex justify between and then p-4 for some padding okay perfect that looks good let's give some class some some some styles to this outer div here we'll say BG gray 100 then again minimum height up screen so 100 viewport Heights so there we go we have that gray background I think that looks pretty nice there so next let's go here below this div okay we're gonna create another div and let's just give this some padding let's say p dash Force we get a little padding on this div here now um we're going to create basically this little top I guess you call it like a legend this top bar the labels I guess is what I'm trying to say the labels and then we'll map through everything okay so for the labels here I'm going to create a div here and I'm going to say class name this is going to be width full margin Auto okay and then what we're going to say here is padding we need some padding p-4 was a border rounded large okay and then we'll say BG white and then we'll say overflow y to Auto okay looks good there all right you guys so next what we want to add is let's do our our actual label in there so we'll say div and we'll have our span this one's going to be a name and let's just copy this down so we're gonna have a name we're gonna have an email we're gonna have a last order we're gonna have a method there we go and okay well I want to stay above this break boy I want to stay above this breakpoint we're gonna add it there we go that's where I want to stay just to see here so next what I want to say I'm going to shrink this down just a little bit well we'll leave it there so next what we're going to say here sorry about that you guys let's give this a class name and we'll say margin y on the y-axis of three padding of two I'm going to display as grid um actually we're going to make it this medium break point anything above medium break point we're going to say grid columns for there we go and then we'll say I need I forgot to display this is grid grid columns four uh else we'll say anything it was small we can say graded columns three and else we'll just say grid columns two on the on basically the smallest of of width there items Center justify between and then we'll say cursor cursor pointer okay so we have no pressure pointer everything looks good looking good all right so next let's go ahead and add some stuff here so for our name we're not going to add anything there for our email so on smaller devices basically on the very on the smallest device we're only going to display the name in the email okay then we're going to display name email and Method and then basically the last order as well okay so I'm gonna leave that right there so for our email let's add some class name in there now I'm going to say anything above small will say text left okay else we'll just say text right perfect now for the last order I'm going to say class name we want this to be hidden then anything above the median breakpoint just display grid and you guys let's just do we'll copy that display that or put that as well so for the method uh but we'll change this to small okay so let's have a look here name email then we're gonna hit the method and then last order as we get up in size okay perfect so next what we want to do is actually map through all of our data okay so we're going to do that just below here we're going to have an unordered list and again we're going to map through all of our list items so what we're going to do here we'll say open up some curly brackets we'll say data dot map okay and then we're going to map through we'll just say order and then we'll give an ID and then we'll say use a parenthesis there since we're basically rendering out data onto the screen and what we're going to render out is a list item and in our list item we're going to give this a key so we'll say key equal to ID just like that and let's go ahead and give this a class name as well and for the class name we're going to say BG gray 50 then we hover we're going to say BG Gray 100 rounded large margin on the Y of three padding two grid anything above medium we'll say grid columns four anything above small we'll say grid columns Dash three else just grid columns two and say items Center justify B tween then cursor pointer so you can see we're actually mapping through we have that little hover effect on all of our data now we haven't displayed any data on the screen but let's do that right now so just below are contained within our list item what we're going to want to add here is let's create a div and we're going to have another div here and this is going to be our icon so we're going to say BS person fill and let's go ahead and give this a class name we'll say text purple 800 and this div here is just the icon container so let's give that a class name I'm going to make that purple as well so we'll say BG purple 100 Perfect all right and then we'll say p-3 give it some padding and then rounded large okay so let's it looks kind of funky though let's give this a class here to fix that and we'll say Flex item Center all right look at that looks good so let's actually access some of the data inside of our our data.js and what we're going to be accessing is the first well we're going to be accessing a lot first name the email the last order in the method okay so let's go ahead and do that right now and again this is our customers okay so just below our um just below this BS person fill diff we're gonna have a P tag and this is going to be our order.name DOT first okay then let's give plus well a little space there and I can actually leave that there whoops there we go and this is going to be order.name dot last uh-oh I need some back ticks in there order there you go using refresh all right that looks good let's add some class to this P tag I'm going to say padding left of four all right that looks good there perfect so just below that we're going to add in another P tag and this is going to be our email so let's just say I'm going to give this a class name so for our email we'll say text gray 600 anything above small we'll say text left and we'll just say text right okay whoops now in here what we're going to say is order.name DOT first we don't have an email address stored in here um so I'm gonna say we'll do we'll grab their first name and then we can just say after this everyone's gonna have an email at gmail just like that that works right okay perfect so that's good for our P tag there now next let's do our date the order date it's not actually a real date it's just going to be the basically we have it stored as you know an hour ago 15 minutes ago 23 minutes ago um and that that'll suffice there so let's give this a class name again this is our date here and what we're going to say is hidden then anything above medium will display as Flex okay and let's throw in here order done date are we above our break point there we go there's our break point right there that's looking good right there you guys perfect so that's good for our date there now let's do our add another div here and this is going to be our uh our method so day we'll say order dot method there we go then we'll use BS three dots vertical to have kind of like I guess what you would assume a clickable icon so let's give this a class name displayed as Flex anything above small we'll say Flex otherwise hidden justify between items Center there we go so if we shrink it down small looks good let's open this thing up we're hitting our midi queries look at that that looks good you guys perfect smash the like button if you feel like you're getting value out of this thing and let's finish this thing up with our orders tab next okay our orders route so let's go ahead and close our customers there and let's go to our orders so for our order it's gonna be pretty similar um we're gonna need to import some icons we're gonna need to import our data so let's go ahead and do that right now we're going to import our um import let's do our icons first we're going to have fa shopping bag from react Dash icons slash fa then we're going to also import fa or sorry BS three dots vertical again from react Dash icons slash BS okay let's go ahead and save that and let's get our data here so we'll import data from our data.js file okay all right so orders so this is what we're gonna have for our orders a little shopping bag there then a status whether or not it's on holds processing or completed then the the method there okay so let's go ahead and do that so for this here again we're going to have to wrap this in um there we go I have to wrap that like so whoops put that on the outside there we go so inside here okay that's gonna bug me let's fix that okay so for this div here we're gonna have another div and then we're gonna have an H2 this says orders then again whoops we're going to say welcome back plan okay so this one's going to be class damn it class name um flex and then justify justify between there we go then PX for them padding on the top of four okay now let's go ahead and give this outer one a class name as well BG gray 100 Min height screen there we go perfect okay so orders looks good uh welcome back that looks good so next get another pizza or sorry a div here and we're going to give this a clap some padding so class name we'll say just padding four now in here we're going to do this whole table again here so and this table is slightly different so I'm just going to write it over from scratch here so um it's not going to be too long so we'll say div and this one's going to give a class name it's going to be width of full margin Auto okay I will say p dash 4 for the padding border rounded large here okay BG white starting to see it there BG white overflow y Auto okay perfect that looks good I'm just gonna shrink that down a little bit looks good there perfect now for this inside of this div here let's create another div and for this class here say class name this one's going to be margin y of three and then we'll say p dash two I'm going to display grid anything above the medium break when we say grid Columns of four and we'll say anything I'm small we'll say grid columns 2 or sorry three and then we'll just say else grid columns too okay and then let's say item Center then justify between and then cursor pointer perfect so now we have our padding in there and then next thing what we want to do is um let's add in our top little area there so we're gonna have a span that says order let's just copy this down a few times so we're gonna have our order then we're gonna have our status and we're going to have our last order and then we'll say method okay so no styling for that first span the second span I'm going to class name here and we're going to say anything about small we'll say text whoops this needs to be a colon text left else will say text right there we go perfect now this class name here for this we're going to say hidden anything above medium display grid and we'll just copy that down perfect and let's just change this one to small there we have it you guys looking good so next that's kind of like our our span again that's like our Legend there so let's go below this div and we're actually going to map through all of our data on there and run it around the screen so let's say for data.map and we'll say order we give it an ID and then we'll say again we're using some parentheses there so we can actually render out some elements onto the screen and we're going to render out a list item with an Insider list item let's say give this a key so we're going to give this a key of ID and we'll give this class name and for the class name we're say BG gray 100 or so 50 then anything above we'll say a hover we'll say BG gray 100 rounded large myf3 so margin on the y-axis 3 padding of two then we'll display this as grid anything above medium grid columns for anything about small we'll say grid columns 3 now let's create columns two items Center and justify between cursor guys let me know if this is your first time using Tailwind let me know down in the comments if you like Tailwind if you think it's fast if you think it's easy to pick up if you're saving time I I love it the first time I used it I loved it so I'm just I love writing tell when it's so much easier in my opinion and I think it helps you like have a better understanding of CSS after you kind of like do both you know especially if you're first starting out so I I definitely wouldn't recommend if you've never if you're brand new to CSS I'd recommend learning that first of course but let me know what you think about it down in the comments below so next we're going to create a div here and I'm going to give this a class name of flex here and then we're going to create another div and this is going to be our um our little icon wrapper I guess you'd say and then we're gonna have an fa shopping bag give this a class name we'll say text purple let's go down here for that 800. now for our wrapper here and give us a class name this is going to be let's see BG purple 100 padding of three and say rounded large looks good there you guys it looks good so next underneath inside of this Flex div here but underneath our icon wrapper create another div here and we're going to give this let's see we'll say P tag this is gonna be our order total your little dollar what there we go dollar sign there and then what we're going to say is order dot total so if we see this is our total there perfect and then what we can just say to kind of avoid any bugs we'll say two locale string just like that this will if if it's ever you ever have any um if it's for some reason whenever you're making like API calls for from like a longer number this is basically can can format it correctly there okay so next let's go ahead and give this a some styling so for this diff here I'm going to give this a class name and we're just going to say padding left of four just to give it a little spacing and for this P tag let's give it a class name we'll say text Gray 800 and font bold all right looks good there you guys look good so next underneath this uh P tag there or another P tag and let's add the name okay so we'll say order.name dot first okay there it is let's give this a class name I'm going to make it a little bit lighter text Gray we'll say 800 let's do this that looks good there perfect and then below this div here let's create we're going to create another div in here and we're going to have the process the status and our method so for our for our status here we're going to create a P tag here and this is going to say we'll say class name we'll say text gray 600 and we'll say small we'll say text left X just text right okay now inside this P tag we have span and inside this span what we're going to say is the order dot status now what we want to have here some are going to have a yellow background somewhere I have a green and some are going to have blue but we're going to have that color based upon whether the order is on hold if it's processing or if it's completed so how do we do that how do we give it kind of a dynamic backgrounds in CSS based on the value so we're going to do that right now with our span here so what we're going to have let's go ahead and add a class name to our span and instead of using some quotes like we typically would we're actually going to write a little bit of JavaScript in here and what we're going to say is if order dot status here equal to processing which is if we go over here to draw data if it's equal to so we only have several values in here we have a processing we have on hold and then we have completed okay so if it's equal to processing basically we want to give it that green color so if order.status equal to processing if that's true we're going to say BG green 200 okay and then we also want to say we're going to say a padding of two and then a rounded of large okay and then we'll say else order dot status equal to completed if completed is true then what we want to say is let's see BG blue 200 and then whoops bg2 then we'll say padding to then rounded large and then we'll say else it's just going to be yellow because that's our only other only other options so BG yellow 200 padding of two and then we'll say rounded large okay so let me go ahead and just just to clarify on that in case it was a little bit confusing we're adding Dynamic values to the class name on our span so the span is always going to be the same this order status now like I said Dynamic values on the class name turnary operator here if the order status here is equal to processing okay if the order status is equal to processing then we're going to apply these values the BG green padding to round and large else if the Border status is equal to completed which is like one of these values here then we're going to apply BG blue 200 P2 in the padding else we're going to have BG yellow 200 so we only have three values in here we know that's on hold processing or completed so that's how we're adding in some Dynamic values with uh with Tailwind inside of our react component here so that's good you guys next what we want to do after the order status okay um we still need our date in there so after that we're just add this another P tag here so this one's going to be our order dot date okay and let's give a class name to this here so for our date what we're going to have is uh hidden but anything above medium let's display as Flex okay and there it is last order and let's do our method as well so we'll go just below this we're going to have another div here and inside here we're going to have order.method and we'll have a P tag or sorry this is going to be P tag this is going to be our our dots so we'll say BS three vertical dots there we have it let's add some styling now so class name win display as uh anything above small we'll say display Flex there we go now let's just be hidden and we'll say justify to defy between items Center let's go ahead and save that we have a nice hover effect let's open this up you guys and let's see I think we might be just about done you guys let's have a look at this here so I have our order I have our status on hold it's yellow green if it's processing blue if it's completed the last order 15 minutes ago 23 minutes ago again if you want to do this dynamically that'd be super cool as well then we have our payment method if you want to add in some extra functionality to be able to like edit these that'd be pretty cool um and look at that you guys that is looking good so this is our orders let's go check out our customers so we have our customer name our email our last order our method over here and then our dashboard look at that you guys everything displaying perfectly let's just make sure it is mobile responsive there you go look at that everything is displaying perfectly all right you guys I think that about wraps up our project you guys smash the like button if you feel like you got some value out of this I would appreciate it a lot of time goes into making these videos so very very much appreciated thank you for following along give me down give me a comment down there below if you have any questions and uh thanks for watching you guys I'll see you on the next one

Channel: Code Commerce

Views: 31,888

Keywords: react, reactjs, javascript, web developer, nextjs, next js dashboard, tailwind css

Id: KpGZjrrS3pY

Length: 72min 34sec (4354 seconds)

Published: Tue Jan 17 2023