**The content of this video is intended for
educational and entertainment purposes.** **It is NOT production ready.** If you're new to the channel, welcome.
If you're not new, welcome back. Today we are continuing on with our Filament admin
panel series. I want to add the finishing touches to this project, and then at the very end I'm
going to answer some questions that you guys have been asking me. Now, the first thing that I
want to take a look at is the translations that we installed with Filament. A lot of people ask
me about handling translations both in Laravel in general, as well as Filament, but the reason
why I have been avoiding translations is because it is very, very simple but it is the most tedious
thing for me to do. Let's head over into the text editor and I'll show you what I mean. When we
installed the translations for Filament in the setup video that you can go and take a look at,
it installed translations for us. So what we can do is go to the language folder, and here is the
vendor folder, and there's a Filament folder with all of the languages that came with it. Now,
I know this is probably not every language. I mean it's a lot of languages, it might not be
every language, but it is here. I speak English, I'm going to show you the English version of this,
and if you take a look here you open up pages, and let's say you go to dashboard. As you can
see here, the title of our page is dashboard. Right up here, this is the title of the page, and
then there's a link as well. Let's go ahead and run a really quick simple test. All I'm going to
do is, I'm going to add "er" to this translation. Now if I refresh, you can see the title is now
"dashboarder", and the link is also "dashboarder". This has been translated in English just fine, so
I'm going to go ahead and turn that back, and then let's take a look. Here, you see we have
resources, we have widgets. Everything that is in those default Pages have these
translations, so that's basically how you would do it. Now if you want to do them in a
language that is not a language that you speak, for instance let's go to the Spanish folder
here which is ES, we open up pages and we go to that same page that we have here, this is the
Spanish translation for dashboard. In order to get this to a point where we can see it in Spanish,
let's go ahead and open up the config app.php. This is just a page where you can kind of
customize different things, so your environment variables are in here. That's pretty much it.
You also have the time zone which mine is UTC, we have the Locale and mine is for English.
Okay, so what I'm going to do is, I'm going to go ahead and put "es" in here for Spanish, and
then we're going to take a look at the browser. Refresh, and as you can see now everything that
is from the default. So everything that came with the default, not the ones that we did but
the defaults, have Spanish translations now. So these different pages that came with Laravel
have it, and if we go over here you see that the toggle button over here is translated,
and the log out button is translated. If you want to do it for the rest of these, you would
have to go in and add your own translations. How is this being displayed? Well,
if we go to the app.blade.php and all the way at the very top you see HTML
language equals, and then it has string replace and some characters in here, and then there's
the app get Locale and this is where that Locale is being rendered. It is based on the Locale
that you are currently in. If you were in a predominantly Spanish-speaking country, then
get Locale will indicate that the app should be displayed with Spanish translations. Let's go
ahead and close this, and I will turn this back, and I'll close that. Now if you do want to
translate the titles for the rest of your pages and the navigation, then you would have
to put that folder in here. The documentation will show you how to do this, but you would be
able to go ahead and add it in here, basically. Let's say you have a permissions page like we do,
okay so if we go to permissions, this permissions would then be in Spanish, and everywhere where
this permissions is listed, so this link here. Anywhere where we have permissions, then
that will also change the translation. Now as I said, this is really, really tedious, and
if you speak one maybe two languages, then maybe you can do those. Something that I use frequently,
especially when I'm adding subtitles to all of my videos, I use Google Translate to translate pretty
much everything that I have, so that's something that you can use if you want to sit there and do
that. That is completely and totally up to you. If you wanted to look at the Laravel
translations, if you open this up, in English we have the auth pages which these are
the messages and the pagination. Maybe, I'll do a video on showing you how to do these. It's pretty
much the same thing, you create a folder with the initials of the letters that you're going to be
using, so let's say for a Spanish was "es", and then you have -- I think this is French, Hindi,
Japanese, maybe Korean -- but you would just create those folders and then you would create the
translations like these have here. See, this one also has its own translations, so does passwords
in these basically reset, sent. All of this, you would have to have translated. They all need to be
translated for different languages, so you could do something like that here, and if you wanted to
translate your entire app, that means that every single reference to any word that you have has to
be in that language folder, and this way it'll be accessible to different people. It's really, like
I said really, really tedious. Now that it's done, let's go ahead and close these off, and let's
move on. The next thing that I want to do is, I want to create some new widgets for this dashboard
page. I want to get rid of these two, and then I want to add my own. Let's start with getting
rid of them first. If we open up the Filament config file, okay and we go down to the login page, that's the dashboard page.
These are the widgets here, so I'm just going to go ahead and comment these two out. That
should get rid of those widgets for us. Okay, good. Let's go ahead and build our own. Now, the first one that I want to do, it
is really useful, especially if your web page has Google analytics or anything like
that. Then this is a really good widget to use because it displays the stats overview. I'm
going to go ahead and copy this line right here, and then I'm going to open up a new terminal, and
then I'm going to go ahead and just paste that right here. We can keep it the exact same name,
it is fine. Are we using a resource for this? No, we are not. Just press enter and then it has
successfully been created. Let me close these, and then we'll go to app Filament widget stats
overview right now. In here, we don't really have anything listed, which is fine. I am going to go
ahead and just paste a bunch of stuff. I did this with the e-commerce series as well. It's fine,
just it's the same thing. I just want to give you a -- it's already imported the card, that's
fine. I just think it's a good indicator of how these stats are working on your website. So if
you do have Google analytics, then you can go ahead and include this information in here.
You would just use the information from the Google analytics in order to fill in all of this
information, but as you can see there's a chart, there's a description. It's make unique views
192.1k, and there's also HeroIcons over here. So now if we go ahead and refresh it, we should
see that new widget. We have unique views, the bounce rate, average time. This is something
like I said, you can get that information from something like Google analytics, and then you
would have it. I do want to see what this looks like in dark mode. Yeah, see? Very cool. Very,
very cool. So I'm going to go ahead and turn that back to light so that I can see it clearly,
and let's go ahead and work on our next widget. If we head back to the documentation, you can
see this is pretty much everything that we just did, which was just to add that stuff and then
we added the descriptions and icons. As I said, everything for this is in the documentation, and
this will help guide you to customize it for your particular projects. Now the next one I want to
do is, I want to create a little bit of a chart. If we head over to the Chart section,
admin panel go down to dashboard, charts. This is where all of that
information is. What I want to do is, I want to create a chart but I want to do a very
specific chart, and this one I want to do is the bar chart widget. Let's go ahead and bring
it in, and then we'll go ahead and adjust it accordingly. Now this is the command that I want
to use, but I do want to change the name of it so we'll go ahead for right now and paste that in,
and instead of blog posts chart I'm going to do users chart. This we will be able to track how
many users that we have in our database, and we can track when, well you can basically track
it on whatever you want. If you want to track how many there are that joined after a certain
date, or before certain date, or whatever you want to do. You can add something like that here.
So for us, we're not going to be using a resource so we'll just go ahead press enter, and the kind
of chart that I want to use is zero, bar chart, enter. Now we have the users chart here. I can go
ahead and drop this, we're not going to need that. For our heading, instead of chart I want to call
it users, and then we're going to work on the get data function. Now, what we can do here is just
use some of the dummy information from Filament. Right here, if you go down a little bit
you can see they have some data sets here, so we're going to go ahead and copy
this just so that we can see something, and go ahead paste that in, and now
you can see we have some data sets, blog post created. We don't have any blog posts,
but it's just like I said, dummy data. There's data with some numbers over here, and then there
are labels to indicate the months of the year. Go ahead and refresh that, now you can
see we have a chart here and these are the months that we just looked at, and here are
the the integers that we looked at, but as you can see here you see very closely, there are
these little bars here. This is great and all, but I mean that's silly, so let's try to look
at the dark mode, and that's absolutely fine. You can actually see the values here, but to me
this just doesn't really make sense to have it be only really usable for dark mode, so we're
going to go make some changes and customize it. Are there a bunch of different ways to do this?
Yeah, probably. This is the way that I'm going to show you how to do it. What we're going to do
is, we're going to create a variable, and we're going to call it users, and then we're going
to say that that equals the user. We can select the created at field, and then we're going
to get. Then we want it to group by function, and we're going to group it from the
variable that we are creating right now, and let me also get rid of these.
Next to users, we're going to return Carbon, import that and then we're going
to use the parse function from Carbon, and then we're going to say users created
at, and then we're going to format it with just the full month.
Let's do a semicolon here, and do another semicolon here, and then I
want another variable called quantities, and that's just going to equal an array
we're going to Loop over the user. For each users as user, equals value. We're going to have array push, this is just PHP, the quantities array that we have and
then we want to push in the value count. Now what I'm going to do is, I'm going
to copy a bunch of stuff because you've seen me type and talk enough today. We have
our data sets, the label is users joined, the data is from the quantities, so
we push the -- let me import this. We've pushed the user count
into the quantities up here, and then we have some background color. Now these
charts are basically being used from Chart JS, and so I just went to the Chart JS documentation
to kind of take a look at how to do these, and that's where I got these from. Okay, so we
have a background color, we have a border color, and we have a border width of one, and
then labels is just the user keys that we're getting from our loop over here. Let's
go ahead and see what this looks like now. Something to show you too, is that this
chart is being displayed in real time, and we're getting errors while we're doing it, so
let's just try to refresh it real quick and let's see. Array must be -- null given. Okay, let's see
what I messed up. Now that I'm looking at this, I think I did -- this should be a
capital "B". Let's try this again. Do I have an extra? -- Oh, I misspelled that. I don't know what happened there, but we'll go
ahead paste that and now let's try it again. So you can see, now it's October. I pretty
much did these in October, so that's our users, but if we had any other months, then they
would display here as well. Fantastic! Okay, so now that we've done all of that, to cover some
of the things that I really wanted to do with this project which was to 1, change these colors. These
colors are, I mean they're not my preference. They're not my preference, so I'll just leave
it at that but I did try to change them, and I got it working but when I did this turned to
Blue, and that's not the color that I had chosen for it. I hadn't chosen any of the other colors,
just the colors that came with the default colors. I could not get this to change. I don't know why
that is. I did everything, I installed Tippy.js, which was part of what the documentation said,
and I still couldn't get it up. I'm sure if I took more time with it, I might be able to figure
it out, but at this time it doesn't really bother me that this is the color, so I'm not too worried
about it. The other thing is that for the users, when we did our installation, we did
it with Jetstream, Fortify, Sanctum, all that stuff. Now Jetstream has its own
way of dealing with the user profiles, and I tried to integrate that method with the
Avatar setup that they have, and I kind of got it working but I couldn't get it to save to the
database, and for me it's no sense in doing that, so at this point the admins can't really do
anything with the user images from here. As far as we're concerned, I couldn't figure
it out, so I can't really show that to you. Now as I stated in the, I think it was either
the preview video or the project setup video that I did for this series, I mentioned that
I have other admin panels on my channel and they're all in different playlists. One of the
things that I do with those admin panels is, I keep it super simple. I just focus on the
core functionality that comes baked into whatever project that we use. For this one, I
did need to use Spatie's Laravel-Permissions, but other than that everything in this series that
we used was through Laravel or through Filament directly. I didn't install any extra packages,
any extra plugins, any of the bells and whistles because I genuinely feel that if we can understand
the core of what's going on with what we have, then adding plugins and adding different things
like that are not going to help us. They're just going to really going to give us permission to
skip through so many different steps to get to it. That's why I teach the things I do in the way that
I do it. So, no I am not installing any packages or plugins to this admin panel. Now at some
point, I might not necessarily to this one, but maybe we'll build a project you know with the
admin panel on it. Maybe I'll use Filament again, but I will be moving on after this project,
and I do want to show you a few things before I finish this video. The plugins, in the Filament
documentation there's a link to this plugins page right here, and if you scroll down you see a
bunch, a bunch of different packages that it has, and different things that you can use. You have
a Filament Tailwind Color Picker. Maybe that's something that you can use. There's some other
-- there's just a lot of other ones, and they're just little little nifty things for you to just
tackle this, and this, and this. But like I said, if you don't even know what's going on under the
hood, then when you run into a problem with these, you're not going to know how to fix them. There
are a lot to pick out from here. One of them that you guys asked me to take a look at was Shield.
From here you can just kind of do a search for it, but I'm just going to go directly to the page, and
it is right here. As you can see, it includes the authorization for you, it includes Spatie for
you, and now that we have built it using what's going on under the hood, then you'll be able to
use this package a little bit better. The only thing that we didn't do, which they happened to
do, is create a config file for certain things. This is the repo for it, and if you go down
you see. These are some upgrade informations, but it tells you how to install it. As I
said, it is already including the Spatie's Laravel-Permission package. You use it the exact
same way that we did, and then it will publish a shield config file, and these are what you
would use to do that, and that's all well and good. This is all well and good, but now that you
know what this package is doing under the hood, then you will be a pro using this plugin. I might
come back and do this at some point in the future, but I'm not making any promises about that. I've
already added that to the list of future projects, but it's nowhere near my calendar right now, and
I don't like to do the admin panels back to back because I did that last year, and then that's all
my channel was about. Was the admin panels, and I want to do a variety of different things on his
channel, so we will be doing something else soon. Now something that I do want to mention too, and
it completely skipped my mind altogether, but when we did the icons on the -- when we did these icons
over here, I told you what the icons were, but I didn't tell you anything about anything of them.
In the documentation, if you go under admin panel, and then you scroll down to navigation,
this is where we are here. You can see, right now under this getting started section,
it's saying that by default Filament uses the HeroIcons, and if you click this it'll take you to
this page over here, and basically you could just use any one of these icons. You can use outline,
solid. This is what I use for mostly everything, and if you go down you see that these are the
different icons. Now something to note. As you can see, some of these have hyphens in between
them. I noticed that when I tried to use icons that had more than I believe it was 1, so
bar three Center, then anything after that it would just not be registered within
Filament. Filament we'll throw an error, but you can use something like something with 2
words like chart bar Square. You can use that, and let's try this one. Just to test it out,
I'm going to use it for the permissions one, and this one is a key, so I'm just
going to go ahead and add that, but you do not need all those
spaces. Let's go ahead and try this, and it's unable to locate a class or view. It just
doesn't acknowledge this as a valid icon, but if you were to use something like this, it will.
You can just get rid of that, and try it again. As you can see, it's been registered right
here. As I said, just be mindful of which ones you use. I don't know why it does
that, but that's just a little tip for you, and I'm going to change this
back to key. I'm also going to be leaving the link for HeroIcons in
the description and as a pinned comment. If you're enjoying the content, please
go ahead and click that like button as it really does help out the channel.
Here's a video YouTube thinks you'll like, and here's a playlist to follow along.
Thanks for watching. I'll see you next time.
