So far, we worked with tables, columns, badges, actions and form fields. The user can now browse all the books, request for a book, return a book and so on. But the only page we haven't looked at so far is the view page. This one. This is not how we want the user to view a book, so let's change this. Let's go to the code, look for book, info list, yes. So this is what filament has auto-generated for us, which is why we are seeing all these text entries and this image entry right here like so.

all these text entries and this image entry right here like so. This is the default display of an info list. We can customize a lot of it. So first thing I would like to do is add all of this into a section within the components add a section, schema is where we add all of this and close it, import the section. So this is what we get by default looks like the section occupies only one half .

So this is what we get by default looks like the section occupies only one half . So let's stretch it using call in span full, okay. Now let me remove created at an updated that also put image in the end. We only need title, author, description and image. Remove these two, take the image and put it in the end. So what we'll do is we will add these three into one column of a grid and image in another, but not equal sized columns. What we can do is we can divide this entire section into four or five columns,

but not equal sized columns. What we can do is we can divide this entire section into four or five columns, make these three occupy three or four columns and image occupy the last column. So we'll make it responsive. Let's add columns SM four, yes. So we will see four columns in after SM breakpoint and five after Excel, but actually not four or five because these three will occupy three fourth or four fifth of the space .

or five because these three will occupy three fourth or four fifth of the space . So the way we do that is we add a grid grid make schema wrap all of these within the grid and then the images separate import grid. Yeah, it's the key mass components grid and here we want this grid to span across the first three or four columns. Now, let me say column span need to specify SM three and XL should be four. Yes, like this, let's see what we've got so far fresh, yeah, pretty much.

Now, let me say column span need to specify SM three and XL should be four. Yes, like this, let's see what we've got so far fresh, yeah, pretty much. We want the image on the right and these three on the left. The only thing is we want the title and author also one below the other. So the way we have callspan full for description, let's add that for author as well. And the title now we have the title and author in the separate lines, but we want the image also to occupy full width. Let's change that using image with method.

also to occupy full width. Let's change that using image with method. We did this for the table columns as well. And here we say hundred percent. We also need to set the image height as auto, otherwise it will stay cropped refresh. That's better. And now I don't want these labels here. I just want the content, but to hide a label, you can't do label and set it to blank.

I just want the content, but to hide a label, you can't do label and set it to blank. See what this gives us so this doesn't give us anything and it's also not accessible. What we use is the hidden label method. We add this to title, author, description as well as the image refresh. This looks much better. We just have to add some CSS classes to make this look more prominent like a title. Let's do that now add extra attributes.

title. Let's do that now add extra attributes. And that could be yes text, three Excel Excel, yeah, it's good. But fresh for the author, let's add text, primary, six hundred font. It could make this medium text LG refresh. And for the description, I think it's too small, probably it's using text SM. So let's just change that to text base. Okay. Now this is okay, but we see a lot of gap between each of these entries. So we can use this method called dense right here after schema.

Now this is okay, but we see a lot of gap between each of these entries. So we can use this method called dense right here after schema. You can simply say make it dense. So we see much lesser gaps. Let's make the image also have some rounded corners and a shadow right here. Let's add extra attributes plus rounded LG and maybe a shadow MD doesn't work. I think we need to use extra image attributes method. Yes, for the image that works. Now let's add the rating here and how many times the book was borrowed. So below the title, author and description, let's add a text entry, make rating

Now let's add the rating here and how many times the book was borrowed. So below the title, author and description, let's add a text entry, make rating , which is average, average rating, labels would be rating this holder is no rating extra attributes. We don't need that because we're going to change this anyway. And then another text entry, make borrowed to show how many times this book was borrowed, borrowed count, we could just say borrowed, no placeholder and the state here may be after

borrowed count, we could just say borrowed, no placeholder and the state here may be after label at the state function record, not borrowed count. We get the users count. This would be zero anyway. Let's see. Yeah. So we see the rating number here and it was borrowed to let's add a string times or something here because just to doesn't look good, appended with times.

times or something here because just to doesn't look good, appended with times. That's better. Now, we obviously want to show rating as stars just the way we're doing everywhere else. So let's create a custom info list entry. Let's use the command php artisan, make filament info list entry and the name of this is rating again. It was created successfully, open this.

again. It was created successfully, open this. So there's a forms rating, there's an info list rating, open the info lists one and let's go to the view. So for now it just displays the rating like four. So if we simply replace the text entry with rating entry, it would give us the same check the browser. Yeah, but let's change this to the stars.

the browser. Yeah, but let's change this to the stars. We can copy this view from the rating plate dot php inside the columns rating column. That's exactly the same thing. So take this entire div here, paste it here and let's refresh. Yeah, we already have it. Now in info lists, we can also add actions. Let's go to the info list right at the end of rating and borrowed. Let's add actions make and this action can be exactly the one that we have in

Let's go to the info list right at the end of rating and borrowed. Let's add actions make and this action can be exactly the one that we have in the book stable. So let me copy that go to book stable, go to record actions. This is the one. So we can add the request action book here, copy everything up to visible as well. Go to info list, add it here only few things, few changes we can make. That is we don't want it outlined or size X's normal button would do here.

Go to info list, add it here only few things, few changes we can make. That is we don't want it outlined or size X's normal button would do here. So I think everything else could be the same. Let's go refresh. Looks like we're not able to see this because we might have already requested this book. So let's go to books. Yeah, this was the one it is already requested. Let's open something that has a rating. Yeah, something like this.

Let's open something that has a rating. Yeah, something like this. Right. So we see the request book action. Now another thing we can do is add the reviews right here because we are not showing the reviews anyway. We are collecting them. So this is the best place to show the reviews and since we have multiple of them, we can

So this is the best place to show the reviews and since we have multiple of them, we can use the repeatable entry of filament. So we have this grid, we have the image and then here we add repeatable entry. Make reviews and let's use a schema. Okay. First, even before we make the repeatable entry, we should be able to get the reviews. So go to the book model and use the has many to get all the reviews, where not now review.

So go to the book model and use the has many to get all the reviews, where not now review. That's perfect. Go back to the info list, yes, repeatable entry, make reviews. The state is function, record, reviews, maybe get the latest, take four, get. Okay. Let's add the schema. We would like to see the review and then the name. So let's use the text, entry, make, review, yeah, hidden label and HTML because we are

So let's use the text, entry, make, review, yeah, hidden label and HTML because we are using the rich editor and also the user's name right here with another hidden label, straw attributes, italic, text, SM, text, primary, 600 looks good. Let's see what this looks like. Yeah. We are seeing the reviews, but we're not seeing them next to each other because we didn't say call spanful.

we didn't say call spanful. It's trying to restrict them to one single column here. So repeatable entry column spanful, yes, we still see them one below the other. We actually need to use a grid if we want to make them appear next to each other. So after schema, let's use a grid, yes, where default columns is one and after MD break point, we have two columns. Now refresh.

point, we have two columns. Now refresh. Yes, we see the reviews like so. It's almost perfect except I don't like another, what do you say, line here, another border. We can remove this by setting the contained method to false. Yeah, this looks better. And only last thing we would like to change is this reviews title is too small. It's almost blending with the review itself.

And only last thing we would like to change is this reviews title is too small. It's almost blending with the review itself. So I will hide this label first. Whereas that repeatable entry reviews hidden label and instead of a label, let 's actually use the prime component text in filament and make our own label. So here we simply use text, make user reviews, let me import this. And here the last one, filament schemas components text, make user review, reviews text excel, one semi bold, there's no need for call spanful, I guess.

reviews text excel, one semi bold, there's no need for call spanful, I guess. So this is it. This huge card looks great. We will have to remove this because the title is repeating absolutely not good. Let's go to the view page to change this open view book and yeah, we don't need this header action, let's just use public function get heading. Yes, if we say if we return a blank string that should disappear fresh, but that's view

Yes, if we say if we return a blank string that should disappear fresh, but that's view the keeper of vanishing keys is still set as the title. We don't like to use view here. So let's change the title to a blank function get title this record title that 's it no view. So now fresh you just look at the title of the page. It is just the name of the book. So this view is a lot better. It's also responsive.

So this view is a lot better. It's also responsive. So if you just reduce it below the SM breakpoint, everything needs leaf fit into one single column. It looks great. All right, see you in the next one.