📊 Learn How to Create an Analytics Dashboard with Nuxt 3 and TailwindCSS! 🚀

welcome back welcome back uh today I want to share with you guys how I went about creating this UI what is analytics uh looking type dashboard um it was created with Tailwind knocks three and I think some of the the style and stuff from shot scene um if you're not aware uh schatzian is a real base component Library let's say library with air quotes because um it's not a component Library it's just a collection of reasonable components that you can copy and paste into your apps um I actually built one of these but I'm thinking about recreating it because of how the different components are structured in that app and whatnot but I'll share that some other day um you can actually find it here box UI is what I call it and essentially it's the shot C and stuff for Knox 3. so you can go and just copy and paste the different um components into your project whenever you need them so this is source code you can just install the stuff that you need copy it paste it and everything should work um but like I said this is work in progress it's nowhere near complete um so yeah that's that so back to this thing I'm going to start by creating a new um application so let me just create that folder and open it with vs code open that would vs code just put it over here and we're going to start the new Knox project npx not C at the latest in it dot decrease it in this um folder once the files are created we can go ahead and install the dependencies of yarn after installing the dependencies we can just go ahead and start um setting stuff up so I have an ox3 profile in vs code and these are the extensions that I use um the ones were mentioned in no um this one knock star retail um view language features what are the Tailwind CSS intelligence extension those are the ones that we'll be using for the most part all right cool so let me just go ahead and reload this page or this window once that's reloaded you can go ahead and set up Tailwind CSS so open the command palette and just type in framework and we have from the noxar extension and the option to configure a CSS framework now these are the options I'm using Tailwind so I'm gonna go ahead and check all three options click OK and that will install the Tailwind CSS module create the configuration file and create the CSS file and you'll see that in a bit all right so the files are created I'm going to convert this to a typescript file um so let me just edit this change it to.ts I'm going to import from Tailwind CSS the config type I'm going to export default this object 100 type is going to be partial config cool no return on CSS module already adds some defaults to this configuration and we can see them by going to let's see if I win no the documentation and you can see the defaults on whatnot um if you if you don't change anything in this file then it should work uh but we don't need all of this so from the shot CN website um like I said the configuration that I use is actually from here if you go to the manual installation steps um this is the configuration that I usually copy from but I don't need everything from this configuration in my project um the CSS variables I do need so I can actually go ahead and copy this and just paste it into my application which is this one here so come over to here paste that in hit save just remove that or okay let's just say that's fine um let's see what else do we need so let me just copy and paste the configuration that I need here and I'll just explain it after doing so so let's see what it is paste it in we need the font family from table and CSS default theme so let's import that all right so the first thing that we're extending is the container object we want it to be centered by default and this is the pattern settings that we want to use so by default meaning on mobile screens the pattern left and right will be one rim some more screens Two Rim LG forums xl5 to xl6 we are going to be using the interval font so we'll just set that right here and spread the default funds provided by Tailwind as for the colors um the philosophy used by shot CN is of foreground background concept where for each color that's defined we have the background which is usually the default color and the foreground which is usually detects on that um background color so in the CSS file here you can see where um in root we're defining these variables and to understand more about how to define CSS variables to use them within your Tailwind config you can just visit the Tailwind Docs and you can see more about that let me see if I go to Tailwind and go to colors let's see down here are using systems variables you'll actually learn more about how to define variables and use them within your um configuration file cool so back to previous code here we're defining the hsl values for background in root um so this is light mode color definitions or css variable definitions and this is dartmo definition well so each color is defined the background is the websites background color for grown is the website text color so let me just disable notifications you know no monitored fans are good so the music color for run for muted popover color problem for pop over border and input this this is different um this is self-explanatory we have an input field we give it this color and light mode this column dark mode cool um so that's basically it for Audi CSS variables are defined um as for the configuration file we use the hsl color function to register these variables so you can see we have hslvar and then we register the Border this is variable that's defined over here the beauty of this is CSS will actually take care of switching all these values once you move from light mode to dark mode so in light mode you'll register this border um value and in dark mode it will register this one so next we want to install the scroll bar plugin um and that's a Tailwind CSS plugin so we can do yarn add so Dev dependency scroll bar then we can import it up here and register it down here I'm going to pass an option to this um non-compatible and set it to rule and you can visit the doc to learn more about what this thing does um let me see Italian scroll bar this is a documentation for it um non-compatible mode see where is that so these signs are only available in the no compatible mode and they won't have any effect in Firefox so no compatibility no compatibles true We'll add a few um utility classes that are not registered if you don't pass this um object in to the to the plugin when it's registered so um let's say I think that's it for our configuration file here I think we can move on to the nox config yeah so in our noxconfig we want to add a few modules so I'm going to use the nox R extension for that I'm going to add the icon module so you can search for it and just click install and you can see it's added here to or modules array we want to add view use as well I usually use views for um light and dark mode instead of the color modex um module that's just a preference you can use a color mode um for light and dark if you want or headless UI because I'm going to use a headless UI in this project um usually I use the headless UI module oh let's just install that I think this is a book with um this extension each time I install a module I have to basically leave and come back hopefully gets um fixed soon next uh module is the transition view transitions module and for this one I think the issue is with the actual package and I'll show it to you in a bit whenever it's registered it doesn't register the next um version or the nox module you have to actually add that manually so to the end of this one you have to add forward slash notes for it to work as a nox module um next we want to configure the Tailwind CSS module so here we're just exposing our configuration file we want to also configure The Headless UI module and the only option that you get here is the prefix option so by default I think the prefix is headless UI or headless but I shorten it and just use a capital H so this will allow us to use like the menu by just saying H menu but that's what that does um next we want to configure the font for the website and the global Title so I'm just gonna title it Analytics that's how you spell it we'll put it that's how you spell it and I'm going to add the interfont so we wanna add an object to the link array within the head object that's inside the app object and we want to say style sheets and then that's the font that we're gonna link to and we also want to do the preconnect so change the relationship to pre-connect and that is it for the font setup um I'm going to get an icon from logo ipsum uh let me just go ahead and grab that real quick so logo if some uh this one so I can just go ahead and copy the SVG right and then back in vs code I can just come here create a new file click on notice with g and paste that in all right um I also want this icon to be the use as a fav icon I think that's how you pronounce it so I'm gonna come here and say ah thank you co-pilot so that's what I wanted to do except this should be icon that is 3G good so no we won't be using any the Pages directory in this application um we will definitely have the components follow so let me just use the noxar extension to create these folders so I want um components it's fine and in our app.view file we're just going to outline what the structural application will be so we have the header at the top that's going to be a component and then we have the sidebar I mean not just yet then we'll have the main section then we will have the within the main section we have the status cards right and then we'll have a little scroll up area with the custom release next up we will have the um sales cards and for this we'll be using charges and view charges and then we'll have a table with some orders no to the left will have another div and this is basically the profile section and let me see profile info and then a few reminders so let me just show you the application again so that we're not confused and we actually sitting over referring to here so this is going to be the the header this section this is the sidebar for the menu items the main section so we have the status cards we have the customer list we have the chart and the table with the orders and then we have the little reminder section here one so um let's jump back to vs code I start creating these components so first we have the handle so right click here create view component call this error let me just close the others and in this header components um we have quite a few things um let's first start by changing these two header thought header tag um across that we're going to apply is a sticky top zero Z Nexa 20. um we want to set the border to the bottom I want to give it a background of the background color that we defined in or um Tailwind config file give them that an opacity at 80 percent and give the block drop a little bit of blur cool next we want to add a fixed container that will pull the actual items within the header so we're going to give this a class of container clicks give it a height of 16 aligned item Center and justify until between now we want the logo so we're going to create another div Flex make it a fixed container align the item to the center give it a gap of World which translate to 12 pixels or 0.75 RAM for the ram people you want to add or logo but this is the logo and the page title and this is the logo we're going to add the image and we're going to point to the SVG image that we created earlier give this an ALT analytics logo we're not on a class eight seven with seven and object on TN because we want the whole image to show at all times we don't want to get um trapped or anything like that next we want to add the page title which is essentially a not sleep that's going to go to forward slash and here we have Analytics let's add a class XXL and make it bold no we can go ahead let me change the language to typescript you can go ahead and register this in or right here so we can say hello save that and let's run this and see if it's working as it should let's close the live one and take a look at the one that we're creating now and there we have it looking good so far we can close this so back in vs code header let me minimize up so we're done with the title and the logo um next we're going to tackle the right side of the um the flex container so here is where we want to say so this is the right side right side of the editor I don't know why this is green that's weird but um whatever let's create another div wait what's happening if you know okay we need to reload this thing okay seems to be working after the reload anyways new div made this a flex container as well item Center yeah five and in here we're going to have the button that will toggle between lights and dark mode so create a button and remember we added the icon module earlier we're gonna give it a name it's gonna be hero icons I'm going to say son right I'm going to give it a class of H5 with five now for the button itself let's add some classes to the button we're going to make it a flex container give you the height of 9 always of nine um set the shrink to zero item Center justify Center make it fully rounded add a little border and give it a background of the background color that we set um in our Tailwind configuration now we're going to use like I said earlier view use to change between light and dark mode so we use actually has a composable or used color mode right and with this we can create a function called toggle beam and this is what it will essentially do um it will set the mode value it will check if it's currently light and switch it to dark else switch it to light let's go ahead let's save this and add the click event here toggle theme I guess we can set this label as well sorry a label as well let's take a look at the website to see what it now looks like and by default once this composable is used in on our page it will check to see if your system is using like light or dark mode change your website to match your system settings and then you get option of switching between the tool some active vs code um now we have Team switching out of the way we want to add that little drop down um that's the drop down to or navigation and we're gonna add it within this flux content or that or button is in so right here we want the profile drop down menu and we're going to use the Headless module for Knox so we're going to say h and once I type h you can see where I'm getting the auto completion for all of these headless UI components the one that we want is the menu component and we're going to use this as a div for no because we want to add a class to it um most other root elements for headless UI view their renders rendered as templates and we can't add classes to templates so in order to add the class to the root element which is going to be relative we have to render it as a div well if you try to add the class without changing the element that it's rendered as the app will just crash yeah all right so next we want to render a button and this button will be used to trigger the drop down menu I'm I'm not sure why copilot is suggesting this code but that's not what we want so Let's Escape that H menu button yep and we're going to use the same class as we did for this button up here let's just copy this known and within this button we're gonna render an image now this image will be coming from um the random user API So Random user dot me API and just get image of a man and we're gonna give this one out of logged in user and add some classes so we want it to be full width and Heights now if we save this and go to our website we can see where um this is square it's not it's not rounded and that's because its parent is not clipping the Overflow content content so we have two options here we can either make this image rounded or we can add the overflow hidden tool for parent container so let's just go with that option overflow hidden hit save and if we go back now when I click on this nothing happens because I haven't defined the menu items just yet so let's just go ahead and do that so and let's see why menu items let's go with h menu items right and we want to add some access to or menu item wants to be absolutely positioned zero pixels to the right let's give it a z index of 10. margin top of three and a width of 48 which translates to 192. pixels next we want to add some water radius so rounded MD we want to add a little bit of border set the background color and for focus we want to set the outline to none Focus visible so this is when Focus visible is when you use the keyboard to navigate a focusable element so these are the styles that we want to add when that happens so when I set a ring of two and focus visible ring should be the ring color should be the ring color variable that we set here where is ring ring ring ring this color so let's see if that and then we want to add a little header to this menu so I'm just going to go ahead and create a div um add a board of bottom add some pixels to the left and right to the top and bottom and make the text small so let's save that and the first thing that we want to add is a text that says hello John this would be your logged in user's name we want to make this um semi ball and below that we're gonna add the email um or John so we're gonna say email to and let me use a multi-cursor feature to type in the email so it's going to be John no .test.com and of course we're going to go ahead and add some styles to the email so we're gonna say letting none X muted foreground and that should be it for the header section now below this we want to add the actual menu items that we can navigate through so here we create a div add some padding and then we want some many items to Loop over so instead of writing out each menu item like this right one two three I'm going to create an array and then Loop over these items so the profile menu items is what I'm going to Loop over and you can see here we are I have this divider set to true this is just the other divider in the items and you'll see how I do that just now so up here we create a template and we say V4 P which represents the actual item that We're looping over I representing the index of that item in the profile menu options of course we want to set the index as the key and then we're going to say render to this line if the items divider is set to rule but only when we have P dot divider set to True should we render this line I'm going to give it a plus margin top on bottom so let's hit save right there no for the actual items we want to use the H menu item component and inside of this we will render P Dot title now for this to look good of course we have to add some classes um let me see do I want to add the classes here no so let's create an actual button because I think this component will be rendered as a template as well so let me create a button bring the pdot title here and add the classes here so on the button we want to be inline Flex with full align the item Center give it a little border radius give it some padding make the text small make the font medium now the Headless menu item component actually provides um some items via V slots so here we can actually get the active property for the current menu item and what I'm going to do with this is I'm going to change or add a class based on this active State and this I think this can be true or false let me just look at the docs so I'm not telling you rubbish The Headless UI view tab menu and if you go down to the API the menu item provides an active slot which is a Boolean right and it states whether it lets you know whether or not the item is active or focused right we also have the disabled Boolean property so if an item is disabled we can use this to style it and the close function so this will let's say you want to render a link inside the menu item and that link will navigate to somewhere else on the in your application sometimes that because a link is clickable it won't actually close the menu um so this is just so you can manually close the menu all right back to the code here we're going to say we're going to bind this class and I like to use the array style when binding class because I can do stuff like if activists true then apply these classes and the only class that we're applying is BG muted so let's save that and see what it looks like so when you click on this thing or menu pops up and this is the header section for the email and of course you have the menu items um we can see here where we have this been rendered and that's because the H divide the divider object within the array is being registered as an item no we don't want that so what we're going to have to do is or an if statement here that says if not P dot divider in render this and that should fix that so if I go back here you can see that it's done and or divider only gets rendered here because in our code we put the divider between sales and log out and of course you can add a click function here if you want and do something um let's just alert logos for demonstration purposes um so here in the buttons click we can say hey dot click and if it's there call the function if not we do nothing so now if we go back to the website and we click on this thing we get the alert and the menu closes well so let's just just remove that we don't want that functionality um yeah let's remove this as well there's no click property on any of these all right um as you can see when the menu entered or got displayed on the website there was no transition and that's why I always use this package when I'm developing applications because it's it's an easy way to add nice transitions to your next application so this package actually provides a few Transitions and let me just go to their documentation so I can show you view transitions here it is and you can take a look at the playground to see what the different transitions are we have the fade expand slide and scale um you can use them in a group mono you can use them as a single thing so that's all that worked um of course the documentation will tell you how to install it how to use it with nox and all that good stuff so back to or code the transition that I want to use is the scale transition um I'm going to put it over the many items because this is what we're actually transitioning into this into the view so we're gonna say transitions scale and we can set this scale we're going to set it to 0.8 and I'm going to set the origin so I want it to come from the top right yeah now let's just close that up there and close it down here so now when you go back to the website we have this nice transition the menu items coming in and of course clicking away does the same thing yeah also to note we can actually once you bring out the menu we can use our keyboard to go through the different items that are um in the markup under the H menu item component so you can see that I can't navigate to the header up here because this is in a div it's not in an H mini item well these are so I can use my keyboard to go up and down cool back to vs code I think that's it for the header of our website next we can move to the sidebar so the sidebar is going to be its own component right um just go ahead and create that right here so we say sidebar and let's just register it right here let me just reload this so I don't get any weird typescript stuff happening with vs code so we're gonna use an aside tag add some classes to it so we want it to be sticky sticky we want it to stick to the top what 65 pixels from the top and we're gonna give this a height and I'm going to use an arbitrary value here it's going to be a 100 ritual Heights minus a 65 here all right that's going to be the height of this container and we want to give it some padding up and bottom of five one let's change this little typescript next we want to add a div here and this div will actually have the items that will be displayed in the sidebar um the sidebar is going to be let me see let me just go ahead and add the the classes to it so we want it to be a flex container we want it to have height and width of a hundred percent and it's going to be the fixed direction is going to be column right because what we're going to do is we're going to add two sets of Many Items one at the top one at the bottom so the first um let me see overflow y EP I'm gonna set that to Auto I'm gonna give it some border radius I'm gonna add a portal and we're gonna set the background color to card right and this color was actually defined as well as you can see here we're gonna give it some pattern padding at the bottom and we're going to use the scroll bar plugin to customize what our scroll bar would look like so without the scroll bar I'm going to show you what that looks like and then I'm gonna add the classes afterwards so you can see um how exactly it changed now for the items that will be rendered I have a few menu items here let me just copy them over quite a few um what obviously in your application you would have different menu items um so here we have the bottom menu which just have one level of objects where we have a Titan icon that we want to render so we have settings help logo so this one is this one is basic for the menu that will be displayed at the top however you can see where we have items within the menu item and in order to render these properly so it will scale well so if we want this the items within this thing to have items of their own we can actually do that without breaking anything in our markup here so how we go about doing that um we'll have to use a recursive components or a recursive component and that recursive component I'm going to call Sidebar item cool no this sidebar item it will take in as a prop but let me just register the prop and drops equal to Define props and this is not it I'm going to say that I will take in an array of links right no I'm just going to type it as any but in your real application you should actually give this a type I could give it um a type of this title icon potentially items so if you want to be super type scripty you can go ahead and add your own type or interface here I'm just going to use any for now so to our sidebar item we're gonna add flex and flex column classes and then we're going to Loop over the links that are passed in so or l i in links we always want to set the e we're gonna say we're going to render a nox link and for now um this won't go anywhere let's just send it to the home page but we're going to say in this Knox link I want to only render it if we don't have um nested items so this looks link will be rendered if this does not exist so for these and for this we don't have the items array in it so you will render this nox link right and what we want to render is the icon so L icon will be rendered here um we're gonna give it something that says so a height of five was a five and we're gonna mute the text color so that's not next we want to render the title so we say that title and add the trunk it plus cool no in order for these to be displayed properly of course we have to add some classes to the nox link itself so we want this to be in line Flex inline Flex what items to be aligned centered here it's um yeah of four um let's add some putting to the left and right of four as well um top on bottom will be three we want the text to be on the left and we want to change the font height to 15 pixels yeah so if we go ahead and register or sidebar item here and pass in the items that we want to render so let's just go ahead and say sidebar item and what it links to be menu if we take a look at our website no we can see where we have this being displayed and it looks weird for now we're going to fix that in a few but you can see where only one item is being displayed despite us having many other items and that's because this is the only item that does not have the items array within it so now we're gonna deal with rendering the items that have sub items so to speak no we're going to use the why is this render lineup we're going to use the disclosure component from The Headless UI package so I'm going to say h disclosure right and we are going to say VLS so render this if there are no sub items or if all the items does not exist else render this thing and of course for this one we want to render pretty much the same thing that we did up here so we can actually copy some of the stuff from up here so let's just render the disclosure button this will be used to expand the collapsible area you'll see how that works in just a minute so we can copy this class all right and then no within the disclosure button we're going to render a div that will have our icon and title on the left and then on the other side of this um button we're gonna render the drop down icon so let's set the gap of four and in here we want to say render this thing and I probably should add an if statement to this because we may have items that don't have an icon so let's just add that condition right there so if l dot icon exists then we render this thing and to the right of the button I'm gonna add another div and we're gonna add another icon so this icon is going to be the just like it suggested here um let's add a transition to this because we'll be rotating this icon so transition nice so this let me just show you what it looks like no so you can see here we have some little drop down icons to the right of each of these items that have items within them cool no to render the sub items we're going to use the disclosure panel and we're going to Loop over the sub items and display them right so how this works right now um if we expand one of the disclosure funnels we don't have the ability to rotate them easily but the disclosure actually provides the open variable via slot and then of course we can use conditional classes to rotate this icon so if open is true then we want to rotate this 180. well below the disclosure button we actually want to display the items that should be rendered from this sub items array so I can come here and I can say that I want a disclosure a nil right um let's give it some classes so we want margin left and right of six it should be Flex next Direction column we're going to add a border to the left and cut in left and right of three um we also want this to have nice animation so we're gonna go ahead and use another component from The View transition module and we're going to use the X and one inside is disclosure panel we're gonna go ahead and render or Loop over the sub items so we're gonna say four um did I use I before I think I use I let's say i j in l dot items we're gonna set the key to J and then we're gonna render a Nooks link so what we're gonna do is add some classes to this nox link and it should not be navigating to anywhere um then we're going to render the title no I think this is one way of doing the um recursive thing we can use the sidebar item within itself um what I'm not going to go down that part just no so let me go ahead and save this this should work for what we want to achieve um if I should look back at this thing you can see where it's being rotated icon and the items are being rendered cool let me test it all to see if I added sub items to this what would happen let's see this is under right there go back to the website so which one of them was that this was customers okay so that's not working as intended so like I said earlier um probably what we need to do is instead of looping over the stuff um we could call Sidebar item again and pass the links this way I think by doing this there we go we can have an infinite um amount of nested items so if I should go here and add another nested item and let me just demonstrate that in the code but if I copy this and paste it in here save that go back to the website of customer list create and it goes on and on no no no no no no cool so let's just get rid of all of that Madness saved up and I think I missed our class somewhere up here hmm disclosure button in nine Flex item number ah this will be justified between I was wondering why the um the icons were next to the text what it should be on this side all right cool um for the sidebar that's it uh we want to know render the items at the bottom so let's go and add that over here we want to see let's render since this is a flex container and in the direction is column we can autoclass this to push it to the bottom of the container version Top Auto and then we can render the sidebar items again with these items as the links prop so if I save that come back here you see them down here alright that's it for the sidebar let's see what we have next we have the main section uh before I go to the main section let me just go ahead and add some classes to this div we want it to be container on large screens you want a grid and on large screens as well with column 12. and large screens want to give it a gap okay so let's save that um we're gonna add some classes to this as well we're going to give it a pattern top and bottom off no I'll put in we want it to be hidden on smaller screens and displayed on larger screens he also wants larger screens for it to take up um three columns so we give it a call spawn of three on large screens hit save and let's see what it looks like no and there we go we have our sidebar oh scroll bar so this is the native scroll bar to Windows um what we install the Tailwind scroll bar plugin so we could actually change all this thing looks right so let's go back to the code and change that so back in the sidebar component um we're gonna add the scroll bar utility classes no I'm gonna add scroll bar din and I think this will add an 8 pixel scroll bar I'm not mistaken let me just save that and look at the website okay something oh so the scroll bar is registered we just can't see because we didn't add a color all right so let's just add that color real quick so roll bar Tom and the thumb sorry about that the thumb is the part of the scroll bar that you actually drag to go up and down and we want to give it this input color and this is a color that was registered of course in our silver config file now in addition to changing the color we also want to change the border radius so we want to change the Border radius of the thumb so we're going to say score by thumb rounded MD hit save and of course you can add um utility classes for the truck color and all of that so if we go back to the website you can see where our scroll bar no looks a bit better and I'm not seeing the Border radius on the scroll bar Tom so maybe I misspell something [Music] important scroll bar um [Music] word is this a class not sure why it's not being registerable that's okay next let's see next we have the main section uh let's add some classes to the main section so pattern top on bottom of five and on large screens we want this to take up um six columns so the LG What's this called the modifier variant I think um on large screens we want this to have six columns so let's save that and we're gonna add or status card component so we can come here right click create a view component status card hit create and start adding the markup for or status card so this is going to be a section and it's going to be a grid container with a gap of five and on medium screens and up I wanted to of two columns cool uh I don't need any script in this file so let's remove that so we're gonna add the revenue card and the sales card yeah so the revenue card is going to look a little bit like this um we know how to start a car let's give it some border radius give it a border a background of card and some putting yeah no within the card we want to display some information so we're going to use our Flex container for that item Center and justify between and the items that we want to render the first one being a title I'm gonna say total revenue add some classes to this we want it to be smaller font size and font with medium next to this is an icon we're going to set this shrink to zero and render the icon here so it's going to be your icons um we're gonna use the bank notes um icon notes we have plus the one we're gonna give it a height of four and a width of four and change the color to this one of course you need to close up now below all of this we want to add the actual stats so we're gonna render some random dollar amount here and style it so we wanted to have some margin from the top we're going to increase the font size and we're gonna make it extra bold as for the text below it um let's add something like 20 more than last month and then we want to make this takes very small and we're gonna mute the actual color so here let's register that um component go back to our website and this is what we have so we can see the heading at the top the icon on this side the actual statistics and this little helper text down here so this in itself could be its own component for larger applications where you're going to be using using this type of card on let's say this is the analytics dashboard let's say you have a products dashboard and you need this card I recommend extracting this card itself into its own component and passing in the title icon stats and this was the thing here cool so because I'm only using it right here this should be its own component as a stat card um but I'm just going to go ahead and properties and change the different values so this is going to be sales the icon I'm going to change it to credit card and um let's say we had less sales and it's um the increase is less as well from last month so if I save that and go back to the website we have two cards essentially same structural just rendering different information this is why I said you probably want to extract this in its own component for larger applications all right so that's it for the status card um let's see what's next on The Chopping Block so we have the custom release right so this one is a somewhat easier to implement um we are going to let me see create a new customers components and this is going to be a section give it some margin from the component above it which is this thing let's just register it here I'm going to say new customers yeah and in the new customer component um let's give it a heading this this really should be like an H3 and it's going to say new customers let's add some style let's make it bold yeah and below this is where we want to add or listen new customers right now the information I'm gonna use or the new customers is going to be coming from the random user API as well um and I'm going to use the use async data composable from notes no I'm not sure if this is best practice I think this will work because I'm not using Pages I'm just using the one app.view file um but usually the user sync data composable should be used in page let me just confirm using data so it's the compostable mentally called directly in a setup function Plugin or wrong middleware oh so you can can be used in the setup function not necessarily aph iddage when the pH hydrates when the page hydrates okay so I think it can be used um in a composable um I know there are some composables from Nooks that can't be used um outside of pages like the Define page method like the name suggests Pages obviously it should be used in that page um I'm not sure the other ones but I thought this was one of them good to know that I can use it anywhere all right back to vs code um let's see use a sync data this certificate is provided by knock Star as you can see here so first we give it a key I'm gonna say it's new customers that's the key and the fetch request is going to be not from the Json API but from the random user API all right uh we're gonna pass some options in as well I want the defaults value to return an array empty array right so I'm going to call on the transform function as well which is going to be data dot results so what a transform function does is it passes the data that's returned from this fetch request and then you can actually manipulate and return the properties or values that you want to use or that you want to get stored in this data value right here phone so I'm not using these other things passed by the user sync data only interested in the data right now um but the random user API if I should click on it it showed return as you can see here it returns this object and within the object we have the results and some metadata and currently I'm interested in the metallic in the results array and not the metadata so that's why in the transform function I'm just returning the results and storing them here let me just just type this as any to get rid of that squiggly and I can go ahead and save that and up here is where I'm going to render this data so let me start by adding some classes to this so margin top five Flex control items start not Center Yap of six and because I wanted to scroll on the x-axis I'm gonna give it an overflow X of Auto I'm gonna add some border radios I'm going to add a portal change the background color add ing to the top and bottom left and right because this is going to and because this is going to overflow I am going to add the scroll bar utility classes as well again um scroll bar um input so that changes the color and scroll bar um rounded MD should change the Border radius let me look at this thing I think this is the problem it's not non-compatible it's no compatible should be no compatible not non-compatible let me just save that restart the servo to register the plugin all right so within this um container this Flex container here that will be overflowing we want to register another Flex container right shrink to zero set the flux the column the item should be Center and a gap of and this is going to be the button that will be used to add a new customer so to speak so if this were a real application this button would be used to add a new customer right so we're going to say the class is flex give it a height of 10. a width of 10. I'm gonna make sure that the items are centered we're gonna give it a border radius of um 100 rounded full or nine nine nine nine I think is what it's set to yep and then we're gonna give it a background color of muted now inside of this button I'm gonna register an icon I'm not going to change the color but I'm going to set the height and width to five and the icon is going to be the plus icon so let's save that it's registered let's see what it looks like on our website so I can close this now and as soon as we restart we now have this plus button here now after this plus button we're gonna add all of the customers or the users that are returned from the random user API within this container Cool so back to vs code the new customer um component we're gonna say below this button let's add the text add or I forget I'm going to give this a class text SM and middle font semi bold so that's it for the add button next we want to like I said render the users that are returned here so we're gonna say V4 n in data right and no shouldn't do this like this n i just so we can add a key let's ask quickly there anyways he's gonna be I and this is going to be similar to the content over here where it's going to be a flex item in the column Direction so next I'm gonna shrink zero clicks column item Center and a gap of two and we want to add the image of the user that's returned um so we're gonna bind this source data well and in this case because n represents a single user from this array so n dot picture dot um new yeah and the alt text is going to be n dot name DOT first so this is the first name of the person that's return from the API we're gonna add some styles to this image we want it to have a width and height of 10 is 40 pixels um we're gonna make it run it full and we want it to be object over so let's go ahead and save that and below the image want to display there name and that type of thing some other meta information so we're gonna say Center the text as displayed here uh this should be p and it's going to be n dot name DOT first and then n dot name dot Lots cool let's add some classes to this we want it takes to be small and the font to be semible next stop we're gonna add some meta information so let's say they were online 10 minutes ago of course this is probably not the best um without it because each record will have this 10 minutes ago a thing but that's fine so I want this to be excess and change the text color to that muted color now if we should go back to the browser then we should see a list of users and if we scroll across wait what's happening oh scroll across to see the different people yeah so these are the users returned from the API um and this is the scroll bar you can see now we have the Border radius on the scroll bar because we updated the Tailwind configuration and we should see the same over here nice all right so that's it for the new customer section um next we have the sales chart now for the sales chart we will have to install um the view charges package so let me just go ahead and grab that real quick so we want to save new chart Js and where's the installation guide this is the one we want let's just add these and while has been installed we can create or sales chart component and in our sales chart let me just go ahead and close this and register it here the yarn down so the sales chart like I said it's been rendered with chart.js um it's gonna be the mediator but at least you'll see how you can actually add a chart to your application easily so I'm gonna go ahead and add some margin top and give this a title sales over time add some class so I want to make this ball right save that and then no we're going to create the container that will actually render our chart so let's give this a margin top we're gonna give it some Heights 300 pixels to be exact you want to add some border radios so around the LG background color and on medium devices on up we want the pattern to be three all our own now here is where we'll add our line chart now from the chart JS documentation we have to import a few things so let's just change this and we want all these items from charges and then we want to import from the viewcharge.js package new chart.js we want to import a line right also we're going to be using some of the colors from or Tailwind configuration and that's why I added the expose config here so that we can actually reference our configuration within the application so I'm gonna say Tailwind config slash and we want the theme and we want the colors from the theme so we're just gonna let me just bring them in as colors and then no once um we have the line imported and the charges stop imported we can go ahead and register the different um logins from charges or components um you can learn more about this by visiting the visiting the charges website and the view charges website so here we have to register these things in order to use the chart of our choice so we say register and we want to register the category scale linear scale Point element line element title tooltip and Legend right no because we're going to use the color mode to display different grid line colors I'm going to go ahead and bring that in from view use so use color mode register that there and then we're gonna Define the different options that will be passed to or line chart so we're going to say cons options and this is going to be a computed property and it's going to be of type chart options of type line yeah so of course this is going to be a function and we're going to return an object so when you add a type like this we can press Ctrl and space and get Auto completion so we want this to be responsive we want we don't want to maintain the aspect ratio I'm going to set that false I know we don't want to display the legend so we're going to say plugins Legend and set the display to false and also we want to update all the tooltip behaves so in the plugin object as well we're going to set the intersect value to false when you said intersective files I think what this does like it says here if it's true the hover mode only applies when the mouse pointer intersects an item on the chart so unless your mouse is exactly over a specific point on the chart a data point on the chart you won't get a tooltip if this is set to true but when you set the files once you hover over the chart the tooltip will be displayed for the data point that your mouse is closest to cool now in order to change the color of the grid um we want to go into the scales object and for the UI object we're going to say that grid we want to change the color right and this color is going to be based on the current color mode so if it's dark then we want to say this should be slit 900 what if it's light we want it to stay at slate 200. now we also want to update the ticks so we can say fix and we want to update the color here to be colors dot slit 500. yeah no we want to do practically the same thing on the x-axis so I can go ahead and just copy this down change this to X it should be the same it should be the same and that's it for the options that will be passed to our line chart now for the data we're going to say cons data and this is going to be a ref of type you guessed it chart later or line yeah and this tool will be an object um the labels are just going to be the months so let me say let's do one more July and then the data set represents the it's an array of um different data that will be displayed on the chart so first let's set the label and the label is going to say sales time let's say the actual data that will be rendered so here we'll add the data array so we just create this array and add some random numbers of course these numbers would usually come from some API of the sort but for now we're just gonna add them and we can add other configuration here such as we can change the background color for the data set or for the line and I'm going to use colors dots background from our colors config up here next let's change the tension I'm gonna set this to 0.4 um this just determines how sharp the edges are the the connection points are going to be in the line chart um watercolor let's let's just use this color is a blue 500 I'm going to set the Border width as well two two the point background color I'm gonna set that to colors blue as well and hit save no we want to actually render the line chart here so we're going to come here and say line which is the component here let's import it from view charges and we want to pass in the data and the options and hit save no I think we already registered that the application is running so let's look at our browser to see what's happening uh just reload in because I restarted the app and we have this nice chart now when I set the option on the tooltip and set intersect to files if intersect was true let me just change it back to true so you can see the difference in Behavior so it's a true save and go back to this you have to when you hover over the line chart you don't get the tooltip you have to over on the exact point see Moen this is files thank you shows up for the data point that you're most closest to and you can see where the light and dark is actually being used um the color of the grid grid lines actually got updated once we updated this thing see cool all right so let's see what's next we have the recent orders table right um it's going to be a simple table let's just go ahead and create this so recent orders as always we start by units of margin top and giving it a title recent orders it's um it's bold save that uh we won't be using any data for it here we're just going to use the same data in a loop so for our table we want to if you want your table to be responsive um it is recommended that you actually put it in a parent that has the Overflow CSS property set so in our case we're going to give this margin top of five set the Overflow X to auto give it a little bit of water radius out of water color and then add the scroll bar utility classes so scroll bar um and one color to be input that's what we're using um Let's see we can set the roll bar um MD as well so this is the container that will actually hold the table right and of course we have the table um we want to set the width to full and set the border to the Border collapse to a lot first we have the head so that's the th we're gonna have um one row in the head and we're going to add some utility classes to this so we want the bottom to have a border the bottom of the first also have a border what it takes to be aligned to the left and what it takes to be small or extra small no for the th um these are the different columns so we have products payments status and we're gonna have this empty header um for the actions section Now using the multi-cursor feature we're gonna add the same classes to all of these hello stable headers so I don't know four wonderful to be medium I want them to be uppercase and we want to change the text color to text muted foregro you can just go ahead and save that and move on to the table body now like I said we're just going to Loop over the same items for um the table body so we're going to use a for Loop and say n and it's about six items and we're gonna add a plus to each row we want the rotor hoverboard at the bottom one it takes to be aligned to the left um we want the text to be small and we want the last item in this list to not have a border at the bottom right so I'm going to set border bottom zero and whenever we hover we want the background to be muted for each row now we're just going to go ahead and add um some data so we can just say something like choose uh let's give it some cutting so as I've pattern of four um so this will be under the products column next is the payment so we want to say it's paid or not the status column one is is it shipped is it pending whatever that status will be and they know for the last column this is going to be an action item so we're going to make this one um a button we're going to render a button in this or a few buttons inside of this column um for now we're just going to do one so let me just add this just in case we want to add more but for now let's just say we want a button and we want to render this icon there aim is going to be hero icons pencil and the classes I will be added height four with four and we're going to change the hex color so let's close that let's save and if we import that component for recent orders and Save back to the website this is what word table looks like so you see when we hover over each row we have this um BG muted color coming into effect um when we click on this thing we could add some action on the sort here let's do nothing no um this is what the header looks like and these are the items you can see the bottom the last row in the um table body it does not have a board or bottom if it did um it would actually clash with the Border that's around the entire table you know that the main section is done um the this side is done you can move to the information that should be displayed over here let's close this let's close this and for that part we're going to create a component within this div and it's going to display the profile information of the logged in user so let's add some utility classes to this so on mobile it should be hidden it should have parent up on bottom on large screens we wanted to take up three columns three of the grid columns because we assigned 12 the large screens so this is going to take up three of the 12 and it should be displayed on large screens as well since it's been hidden on all screens here we want to change that so on the large screens on up it should be displayed so let's create this component called profile info and profile info is a simple component it really is just going to have the image of the logged in user and the name of said user I can go ahead and get the link here and just grab the link under Alt from the header since it would be the same person um so let's skip that and let's change the classes applied so we want this to be centered let's give it the height of 28 and a width of 28. wants to have around um all water radius when I apply a light ring around the image just in case the user uploads an image that has white background or you know white background against a white website background you wouldn't be able to distinguish between where the image stops versus where the background starts so this is the ring we'll help with that so let's go ahead and save that and let's import the profile card here just a profile info and look at it on the website and this is what it looks like so you can see the little ring around the image oh when I zoom in the responsive thing is taking effect but there's altering around this image um back to the profile info let's add the name and that type of thing for the logged in user so we can go ahead and add some utilities across to this a series of margin top and center the text so first we're gonna have the name of the person that's John Doe has logged in and we want the phone that is to be medium below this we will have um a P tag we'll have some margin from the top the text will be small and the color of the text will be muted foreground um we're going to display John's email here as well so it's going to be changdo at test dot um and let's save that we can remove this it's not being used and take a look at the website again and this is what it looks like all right so that's it for the profile information next we have the reminders that will be here so let's get the reminders component yeah and the reminders component will just have a list of reminders for the login user we're going to start by giving the imperative class of sticky um from the top it should stick uh how many pixels is this 80 pixels from the top and we want to give it a margin top of five as well of course we add by We'll add this with the title that they use I know that these are the reminders next we want to render a list so let's go with ul and I'm just going to copy and paste in a few reminders that I have prepared here let's change the language that is the typescript and here we go this isn't necessary I'm not using any types um but I'm going to Loop over these so I'm going to use a template V4 on R for reminders index in reminders and let's set the key to I then we're going to say we want to render a list item and here let's create a flex container so margin top is going to be five I'm gonna say Flex item sent on justify between now within this container we're gonna have another Flex container item Center yeah three and we're going to render an icon and the name of this icon is going to be the check Circle icon so it's going to be here icons check Circle uh what did I spell wrong hero icons yep there we go and we're gonna add a class height four with four X muted foreground close up and then next to the icon we want to add the actual title of the reminder and we're going to make this text small right and then we want to add the time so outside of this we're going to add a span and it's going to be r dot time and we're going to make it take small and make the text color muted foreground so if we save that to the website here of course it's not here because we didn't import it so we're gonna say reminders save that up here and there we go you can see where it's actually sticking to the top or a bit yeah and that's essentially it for the um for UI if you have any questions just let me know um check out the source code um different article the shot CN project it's a really good one like I said the one that I'm working on I'll leave a link to it but it's not complete you can copy some of the components because most of them were I think the part that's not complete is the documentation for the most part just telling you how to get everything set up on working on the starter template isn't there but also that should be good let me see how responsive this thing is uh so this is a desktop view let's go to ah this is what it looks like on the iPad and of course it's going to be similar on a mobile device yep you scroll across chart and the table yeah that's it all right people so have a good one until next time bless up

Channel: Behon Baker

Views: 9,468

Keywords: TailwindCSS, Analytics Dashboard, Front-end Development, Data Visualization, UI Design, Web Development Tutorial, Vue.js, Responsive Design, Web Analytics, ChartJS

Id: 0ZwaOAlRAWA

Length: 109min 41sec (6581 seconds)

Published: Thu Jul 27 2023