All right. It's time to make our own dashboard. Currently, it's just a blank page. So let's add some widgets to display some reading stats, some progress indicators, new arrivals, currently reading books, and so on. Open terminal. Make a filament widget. Let 's call it reading stats. They would like a stats overview widget right now. I would like to create this in a panel. Yes, which is the app panel. And no, I don't need it in a resource,

create this in a panel. Yes, which is the app panel. And no, I don't need it in a resource, right? It's created successfully. Let's open reading stats. Here, a filament allows us a way to create stats very quickly. And it shows it very beautifully. So let's make three stats. One is how many days it's been since the user joined. Another one is how many books, total books the user has read. And the third stat could be an average number

books, total books the user has read. And the third stat could be an average number of books read per month. So let's make the first one stat. Make. We could say reading since. Yeah, let me just remove all of this. Reading since and calculate the number of days it's been since the user joined since the user has signed up. Another stat could be make books read till now. So count the number of books where the status is returned.

be make books read till now. So count the number of books where the status is returned. And the third one could be, yeah, the reading rate where we calculate the number of months it's been since the user joined. So days divided by 30 number of books read. And if the month since joining is zero, we return zero. Else we calculate the average. Okay. Now that's it. Let's see what this looks like. Since we are discovering widgets added in the path

it. Let's see what this looks like. Since we are discovering widgets added in the path automatically, we are able to see this already. We don't have to add it anywhere. Yeah, this looks good. But let's add some description here because reading since 68 doesn 't make any sense. We could add some more description to the stat using the description method like day since you join. We can also add an icon. We can add the icon either to the title or

day since you join. We can also add an icon. We can add the icon either to the title or to the description. The description icon looks good. So something like this description icon, a calendar one and we could even set a color to the description. So I'll show you what it looks like. Yeah, this looks really good. We can use color success danger if we are showing an upwards or downwards trend. We'll do the same for the other two stats as well.

showing an upwards or downwards trend. We'll do the same for the other two stats as well. Let's add a description. Total books read till date. The icon could be table a book and color primary here as well. Description average books per month. We could show an icon and primary. Okay, this looks really great. This is automatically responsive as well. Let me reduce it. Yeah, so it is responsive. Only thing is at this breakpoint, if you noticed,

reduce it. Yeah, so it is responsive. Only thing is at this breakpoint, if you noticed, it doesn't stretch full height and it looks slightly odd if the descriptions are not of similar word count, which is obvious. We can fix this immediately by adding some additional attributes like extra attributes and set a class of H full. Simply add this to all the three and we will not face that issue at an intermediate breakpoint refresh. See, that's

three and we will not face that issue at an intermediate breakpoint refresh. See, that's fixed. Okay, now let's create some custom widgets. The first one could be a progress indicator. Let's say we have something defined as a pro level that is if you've read 10 books, then you're a pro reader. So we could show the progress to reaching the pro level. Let's create a custom one. Let me close this. PHP Artisan make filament widget again. Let's

create a custom one. Let me close this. PHP Artisan make filament widget again. Let's call this a progress indicator itself. I would like a custom widget in the app panel, not in the resource. Let's open this in. Yeah, what did we call it progress indicator? Also the blade view. So this is a live via component, which means you can define public properties and access them in the view. You can use all the features of live via. So let's create

and access them in the view. You can use all the features of live via. So let's create some public properties like books read could be zero to start with. Let's create add a target of 10 and some percentage progress, which could be zero. And now we'll use the mount method to calculate all these and pass it to the view. So books read could be auth user books where status returned count perfect target. We have already set it to 10. And now

user books where status returned count perfect target. We have already set it to 10. And now we just need to calculate the progress, which is yeah, something like this. So we get the percentage here. But if the user has already crossed 10 books, it gets either 100%. So that it doesn't go to 150 or 200. It either gets 100% or calculates the rate and multiplies by 100. This is good. And here I will just paste the HTML because this has nothing to

by 100. This is good. And here I will just paste the HTML because this has nothing to do with filament. It takes a lot of time to create this. All right, I've just pasted the view. Let's see what this looks like. Yeah, great. Once again, it's gotten auto discovered and looks like whatever widget we add latest is the first one to be displayed, which is why we're seeing this even before the reading starts. Okay, so now let me add three more

why we're seeing this even before the reading starts. Okay, so now let me add three more custom widgets, which is exactly the same way as we did this, create new widgets, they are live wire components. So create some public properties and views. Since it 's the same thing, I'll create it and then we'll continue. So I've created three more widgets, currently reading new arrivals and discover a random book. So let's see what this looks like by

reading new arrivals and discover a random book. So let's see what this looks like by default. Yeah, so like I said, it's auto discovered and put it in the order probably in which we created it or some random order, which I don't know. But now we want to change that order, right? Let's use this sort property to set our own sort. Let's go to reading stats. This is what we want first. So open reading stats and let's set the order to one using

This is what we want first. So open reading stats and let's set the order to one using sort. This is the first one. Let me copy this and paste it everywhere. We want the progress indicator as the second one, then currently reading as two. And the new arrivals could be three, sorry, four, and discover would be five. That's great. Now let's refresh and see. Yes, we do have the reading stats first. Did we set currently reading as two? I'm sorry,

see. Yes, we do have the reading stats first. Did we set currently reading as two? I'm sorry, currently reading should be three while progress indicator should be two. Yeah, that's right. So that's the right order we wanted in. This looks almost exactly like the way we want, but I want new arrivals to occupy a little more width, maybe two thirds of the space while this book of the month or I should change the title. It's not book of the month . It's

this book of the month or I should change the title. It's not book of the month . It's a discover a new book. Yeah, so while the discover book occupies only one third of it. If we want to customize this grid structure and how much space each widget occupies, we will have to create a new dashboard page. So let's go to the app panel provider and first remove this dashboard page from here, which is the default one. You have to create

first remove this dashboard page from here, which is the default one. You have to create a new page. So PHP artisan make filament page. Let's call it dashboard. And yes , I would like to create this in app panel, not in a resource. Open the dashboard page created. This should extend base dashboard, which is filament pages dashboard. That's right. And we don't we don't need a custom view. Actually, it has been created. So we can delete that

we don't we don't need a custom view. Actually, it has been created. So we can delete that which is need this for custom grid structure. So let's see what this looks like . So it is the exact same thing. Let's define a set of columns here using the get columns method by overriding this. And here by default, that is for a small width mobile or something. Let's have one column, but beyond the MD breakpoint, let's have six so that we can arrange

Let's have one column, but beyond the MD breakpoint, let's have six so that we can arrange the widgets the way we want. Once we have this, it tries to fit in everything in one single column. So let's use call span and change this behavior. Let's first go to the progress indicator. And we want to span it across three columns because we have six columns. Let's set the call span and make it responsive at the same time. So default would be one word

Let's set the call span and make it responsive at the same time. So default would be one word after the MD breakpoint. We want three columns. Let me copy this. This is the same for currently reading as well. And while for new arrivals, I would want to span across four columns while discover would be two columns. That way we get one third and two thirds. This would be one third with this would be two thirds. Let's see refresh. This is perfect. We 're almost there.

one third with this would be two thirds. Let's see refresh. This is perfect. We 're almost there. Let's try and make it responsive. See what happens. So this is what we have at the largest test top size slightly reduce the width. And you will notice that this is not of equal height. The same issue we faced here. And this can be fixed by adding a hedge full class to the section in the blade view. So let's go to each of the blade views right here. You see the section

section in the blade view. So let's go to each of the blade views right here. You see the section blade component. Let's just add class hedge full. We have to just do that to all of them. So we don't face that issue at all. And to the discover one as well. Okay. Yeah . Now this is perfect. We won't face this issue. Everything all the widgets height stretch. Yes. So here below the MD breakpoint, it looks a little messed up. That's because we didn't define call span

below the MD breakpoint, it looks a little messed up. That's because we didn't define call span for reading stats. We assumed it works fine. Let me open reading stats, which is here. And let me paste that default is one beyond MD. It's six refresh. That should fix it. Yeah. So at the smallest size, everything is neatly stacked one below the other. And as we move ahead, everything fits great. So we have a beautiful looking dashboard now. Play around, create your custom widgets, play around with the columns,

dashboard now. Play around, create your custom widgets, play around with the columns, add some charts and yeah, create your own dashboard if you like to. See you in the next one.