Learn Laravel Filament full tutorial: Build powerful admin panels with ease

[Music] [Applause] Hello friends Tony here I have created some videos about the filament version 3 and I had a comments on YouTube if I can create a filament tutorial and that's what I'm going to start today so I'm going to create a full tutorial about the filament and I will cover almost uh everything so you can learn in this tutorial all about the filament we are going to build a employee management project and through the building a project will cover almost everything you need to know to build a project with a filament version three okay so let's open the terminal I'm going to use warp terminal here so let's say larel new and the name I'm going to name it filam man tutorial hit enter now if you want you can install a Bree starter kit or jet stream but I'm going to say no starter kit here I'm going to use best and no get repository okay so the application is ready and I'm going to navigate there and let's open with vs code I'm going to use the vs code as a code editor now first I'm going to go to EnV file and here we have the database name which is filament uncore tutorial I'm going to copy this and create this database I use uh table plus so here I'm going to say new paste that name click okay and yeah here we have filament tutorial and now let's close this and let's run Artisan migrate so Artisan I have uh alas for PHP Artisan I'm going to say myr here hit enter and yeah we have the users table reset tokens fail jobs and personal access token table in our database so if I refresh now yeah here we are now let's go and install the filament so I'm going to open filament documentation get started and let's Zoom it this one okay now we need to run the composer require filament SL filament and the version 3.0 stable let's copy this also we need to add the dash W here so let's space that that in hit enter and then PHP Artisan filament install dash dash panels now when we install the dash dash panels we have form Builder table Builder notification uh info list all the filament installed okay now paste that in hit enter and I have starting that so I'm going to say no now and we are okay now if I navigate the project so filament tutorial. test yeah here we are because we have install now the filament and by default filament has the path slash admin yeah here we have now the we need to log to navigator SL admin right now we don't have any user in our database so if I go to the users here it's empty we can create the user through the command so PHP isign make filament user is not necessary to create through the command line if you have installed jet stream or uh theb you can go to the register or you can create a new user on the database right here but I'm going to do in the terminal here PHP artisan make filament user give it the name and I'm going to say admin admin at admin.com hit enter and add the password okay now the success admin add admin.com let's copy that and paste it right here add the password sign in and we are in the admin dashboard this is what the f filament admin panel looks like we have here the name of the user we can change the Dark theme or light theme or we can choose the system also we can sign out here and that's it about this video I hope you enjoy friends and don't forget if you like such a video and if you want to learn filament subscribe to my channel like this video share with your friends and see you in the next one all the [Music] best Hello friends Tony here in this video now we are going to create the models and migrations we need for this project so I'm going to open the terminal here and let's Zoom it like this and let's say artisan make model as I said uh I have alas for PHP Artisan art and let's hit enter now the name the first one I'm going to start with the countries somebody to say country here hit enter and what we would you like any of the following so the database s Factory uh form request migrations or policy uh right now I'm going to select only the migration so let's say hit migration and hit enter let's create also for the state hit enter migration select and the same for the city so select migration hit enter also department so artisan make model the name is Department hit enter select migration and the last one is going to be the employee so employee hit enter select migration and we are okay now let's open the project with a vs code now let's open the project with vs code so I'm going to say code dot here and maybe let's Zoom it little bit this one and let's open first the countries migration okay and for the country we need only the name so let's say here dollar sign table is going to be string and say name here now this is not going to be newable so it's going to be required this one let's save close this and let's open the states here now we need the relationship so the state is going to belong to the country and let's say dollar sign table for reason ID for the country ID constraint and also with this say Cascade on delete and we need also the name for the states or dollar sign table string for the name okay let's save let's zo it so little bit like this let's let's close this and let's open now the cities migration so here now the city is going to belong to the state and the state to the country so let's create first the relationship dollar sign table for reason I did the same thing we had with the states and countries here I'm going to say state ID con straint and also Cascade on delete and here the same we need the name for the city so let's say string or the name let's save let's close let's open the Departments migration and for the Departments we need only the name so let's say here dollar sign table string name and now let's open the employees migration so employees now for the employees we need the first name uh last name middle name so let's say Here tollar sign table string first name okay last name and middle name little assign table string and here I'm going to say middle name okay also we need the address so the assign table string address I'm going to add with the Char for a zip code so let's say here a zip code and we need the date hired and date of birth which is going to be date so let's say the assign table date and say date of birth here and the last sign table date and here I'm going to say date hired now uh I have created this project many times and the first time I have created I had a document where the employees belong to the country also to the state and to the city and also to the department and I had the comments on YouTube if the employee belong to the city and then the city belong to the state and also the state to the country so we don't need to have the employee belong to the country but I'm going to add that the employee is going to belong to the country state city and Department the same I had in the document when I created this for the first time okay so let's say here dollar sign table version ID and first I'm going to say for Country ID and here I'm going to say constraint and also Cascade on delete and let's copy and paste this now this one is going to be for the state so let's say state City and Department okay let's save close and now R Artisan migrate okay hit enter and that's it about this video I hope you enjoy friends and see you in the next one where we need to create the filament resources all the best and don't forget to subscribe and like to the video Hello friends Tony here now in this video we are going to work with the filament resources but first I wanted to show you you can find this project in the GitHub so if you navigate to the GitHub SL code with Tony official slash and the project name which is filament PHP dvion 3 Dash tutorial okay let's close this and let's start and work with filament resources so filament allow you to generate resource colding with just a few commands resource can uh represent a data model in your larel application such as a database table or an eloquent model the default model Resource page is where we Define the database schema and is controlling what we can see on the admin panel page to create a resource we need to run a command in our terminal so let's open here and let's say PHP artisan make filament Dash resource this is the command we need to generate filament resource and then the name of the model so I'm going to start with the country country model and hit enter now successfully created the count resource this command will create several files in the app filament resource directory so let's open the vs code let's open the app now here we have filament and as you can see we have resources and this inside the Resources directory we have the country resource PHP and also the country resource folder inside the country resource folder we have the create country PHP edit country PHP and list countries. PHP now the classes inside the Pages directory are used to customize the pages in the app that interact with the resource there are full page Livewire components that you can uh customize in any way you wish now if we open this country resource first of all we need to see these two methods we have the public static function form method which return the form schema and here we need to populate the form with our fields we need and also we have a public static function tables which return a table and here we need to add the or columns what we want to display in the table but as you can see also the form and the table are empty now let's gener create the resource for the city but in this case I'm going to say here for the state first let's say State and in this case I'm going to add a flag I'm going to say dash dash generate if I hit enter and let's open now as you can see on the resources we have country resource and the state resource also country resource PHP and the state resource pH PHP let's open this state resource PHP as we can see now in this state resource PHP we have the form method but inside it's not empty we have the form components text input make country ID which is required as and is numeric also we have a form components text input make for name which is required and max length is 255 so if you'd like to save some time filament can automatically generate the form and table for you based on your models database columns using this generate Flag by default we will not be able to interact with the deleted records in the app now if You' like to add functionality to restore Force delete and filter trash records in your resource we need to add the D Das soft deletes flag when we generating the resource but I'm going to leave it as it is what I want to add also is the D- view flag well the D- view flag is going to create the view page for us so let's say now PHP artisan make filament resource for the city so I'm going to say City I'm going to out generate flag and also D Das view hit enter okay now we have also the city resource which uh also the city resource has this text input for state ID and name now this state ID is going to be a relationship but I'm going to leave it for now like this and let's create all what we need so let's say department and so Department generate also the view and also the employees and the user hit enter okay now if we go and visit the project I'm going to close this one and refresh as you can see here we have cities countries departments employees States and users if we go to the countries yeah here is the countries we don't have any country and you can see no countries here but if I go to this new country here we don't see the four if we go out to the states and go as you can see on the states that we have a search here because we added that flag D Das generate and if we go to the new state we have a form with country ID and name the same if we go to the cities we have the form here and if we go to the Departments the same thing and of course if we go to the employees new employee here is the form and for the users now here for the users we have one user as you can see we display the name email and the email verified ad and because we added that Das Das view we have this view here if I click right now we have just a name email here and the date verified that which is kind of a inputs we are going to customize that in the next videos now as you you can see we all the resources here have the same icon and we can change that so let's open the first one let's open the count resource and the first thing is we have here the model dollar sign model which is the country class is based on the name we added of the country and here we have the navigation icon property which support the name of any blade components by default uh hero icons are installed however you may create your own custom icon components or install an alternative Library if you wish and for the country let's open the arrow icon website so hero icons.com and I'm going to search for flag here it is and I'm going to use this just the name flag here okay so Arrow icon and say flag if I save see on the browser refresh as you can see now countries has a flag icon now filament will automatically generate a navigation menu item for your resource using the plural label as you can see here countries if you like to customize the navigation item label you may use the dollar sign navigation label property so let's open the vs code here and let's create that so I'm going to say protected static and this as you can see here also we have a question mark up here and here and the question mark here saying is not required so can also accept the N value so let's say here string and we need the toar sign navigation not Navigation icon but navigation label which is going to be equal with let's say count here now if I save and let's see on the browser if I refresh now as you can see here we have and let's Zoom it for you now we have count here now also we can custom the model label so each resource has a model label which is automatically generated from the model name so for example we have a user here we have a user label as you can see view user and so on the label is used in several part of the UI and you may customize it using the dollar sign model label property so let's uh do that let's customize also that so let's say protected static and also here we need question mark the same string and let's say dollar sign model label and for example for this one which is country let's say employees country okay now if I save that and let's see on the browser now if I refresh let's navigate to the country as you can see we have here employee countries and also employee countries right here now as you can see all the navigation are in the say in the list here if we want we can group them and that's what I want to do and the group then we need to use the navigation group property in the resource so here the same we have with the label and so on let's do that let's say protected static string and here we are going to say navigation dollar sign navigation group okay and I'm going to name it uh system management okay if I save that and let's see right now if I refresh as you can see now we have here a system manag ment and inside this system management group we have a country and we can close this and show now we can customize more but we we don't have the data right now but what I'm going to show also in this video is we can customize also the URL here so by default filament will generate a URL based on the name of the resource so you can customize that by setting the DOA sign slack property on the resource let's do that let's open open the resource one more time and let's say here protected static question mark string and here I'm going to use the dollar sign slack property and we are in the resource so let's say I'm going to say employees Country dash country or countries like this if I save and let's see on the browser now left as you can see we have now employees Das countries the URL but if you don't like that you can say countries which is the default here right now we have for for not found because this is not is not existing right now so let's change back to countries and yeah here we have countries but this is the same if we remove also so it's by default countries okay friends now let's move the Departments uh states and cities in this group so I'm going to open I'm going to copy what we have here and let's open the state resource and I'm going to paste it here all of them now we can change the Navigation icon the navigation label is not going to be country it's going to be state or you can say States here we can say employees States if you want but I'm going to remove the employees and just say States here and the navigation group is inside the system management it's going to be inside the system management let's save let's do the same for the city so let's come up here and let's space that in let's change that to B City and also here I'm going to say City not the employees City system management is going to be the navigation group and the department is going to be the same so let's remove that b in say Department also here I'm going to say department and the navigation group is going to be in the system management let's save and let's see on the browser now if I refresh and yeah as you can see we have a count City Country department and state but it's not ordered how I want for for example I want the country to be up here then we I want State then City then department and we can fix also that with the filament and as I said the count is going to be the first one so let's go okay so here now let's say protected static but now we don't need a string we need to add an integer integer dollar sign navigation sort which going to be equal with uh one because we are on the country resource and as I said the count is going to be the first one if I save and let's see on the browser now take a look to the sort here if I refresh the count now is at the end because has this sort but the others don't have if I copy this and paste to the state resource now and change the value from one to two save go to the city resource and change the value here the three save now let's go to the department resource and do the same thing change the value to four for this one save come here and refresh now we have country state city and Department okay friends that's it all about this video how to use the resource on filament and how to customize that all the best and don't forget if you like such a video subscribe to my channel like this video share with your friends and see you in the next one all the [Music] best Hello friends Tony here now in this video Let's Take a look to the filament forms so let's get started here and we are inside the panel Builder let's go to the getting started inside the resources and here I'm going to select a resource forms I'm going to zoom it this one and here we have now resource classes contain a form method that is used to build the forms on the create and edit pages and here is the example and we saw also on the previous video this form method here inside the resources we have created but we can use the form if we go here the form Builder we can use the filament form Builder also without the panel Builder so as a separate package so if you go right here we can install with composer so composer require filament SL forms and right now we need to specify also the version okay now filament form package allow you to easily build Dynamic forms in your application you can use it to add the form to any liveware component and we can use also on app resources action models and table filters Al and more now let's open the vs code and here we are inside the country resource and all filaments form has uh schema now this is an array which contains fields and lout components and if we go to the employee resource so here we have a form schema and here we have a Fields now fields are the inputs that your user will fill their data into for example here we have text input and each field has its own PHP classes as we can see so for example the text input class is used to render a text input field we have also we can add inside this schema uh layout components and if we go to the form Builder scroll down here we have a layout now lay components are used to group Fields together and to control how they are displayed for example you can use uh grid component display multiple Fields side by side or uh you can use a wizard to separate Fields into Multistate form you can deeply Nest lay out components within each order to create a very complex responsive UI now forms within a panel and other packages usually have two columns by default if we go here and this Navigator employees call the new employee here as you can see we have two columns by default but we can change that if we go on the employee resource and here we have a schema and in the schema we can chain a columns method and we can specify how many columns we want so for example let's say three and if I save and come here and refresh now we have three columns as you can see here now because this is a loan here we can make this take the full width so only this field to take the full width and this is the date hired so we can go to the date picker which is for the date higher here and in this input field we can chain the column span full and this is going to make this take a full WID as you can see now let's add the section uh layout component so let's so I'm going to cut the first name last name and middle name cut them and add forms back slash components back slash section and call make here and inside this make we can add also the title so let's say for example user uh name also we can add description so let's say description and say put the user name details here and then we need to chain the schema which is similar to the form schema contains an array and let's add the first name last name and middle name let's save and let's see now on the browser what we have so if I refresh yeah here is the section as you can see here with a title username and here put the username details now the first name last name and as you can see here takes the full width and if you don't like that you can go here and you have a section and change the method columns and specify how many columns you want so let's say for example three and if I save and refresh now we have three columns here okay let's do the same thing for the others so I'm going to cut the address and zip code together say forms back slash components back slash section make and here I'm going to say user address and then change the schema and add an array with these two fields and also because we are here let's cut this one and we need to add a comma here and do the same so forms back slash components back slash section and say make here and just I'm going to say dates and here chain the schema add an array with these two fields and let's save now come here and refresh and yeah here we have now I want the this one to be two columns so let's go to the user address section and chain The Columns to be true save come here and refresh okay now also for this one let's make this two columns so here I'm going to chain columns to be true and remove this one save and refresh and yeah we have this full width because we are that column span full so let's remove and refresh now and yeah here we have dates user address and so on now as you can see we have this red uh Astic here which mean is required and in larav validation rules are usually defined in Array so let's come here and let's scroll up and in L we have for example an AR and specify here the rules required also for example Max 255 or we have a combined string so let's also show that one required pipe and Max for example to 55 now this is fine if we working with the back end with simple form request but filament is also able to give to us a fronted validation so we can fix the mistakes before any back end request are made so in filament you can add validation Rules by using the methods uh required as we can see here or max length for example 255 so the same we have here here we have a text input the text input allow you to interact with a string so in this case we have a first name last name middle name if we go to the let's save this first and let's go to the user resource here we have email and as you can see here we chain uh email method so here you miss set the type of string using a set of methods so in this case email or a password we have also a numeric like this also we have D for the phone number we have URL for the URL type also we can specify the type by saying type here like this and on string specify for example a color and if I save like this and let's open the user resource so here let's go to the users new user and as you can see now the password because on the password we say type color if we click this is uh type color okay let's remove this go back to password that's it all about this video to show you the form in laravel filament version 3 all the best and don't forget if you like such a video subscribe to my channel and share with your friends see you in the next one [Music] friends friends Tony here now in this video Let's customized all dashboard so first I'm going to change the colors if you go to filament documentation and if you are inside the panels scroll down here we have themes and we have an example how to change the colors here inside of the configuration files in the color method we change the colors like this so we specify the danger or a primary color for example and say it's going to be color indigo now let's open let's copy this because I'm going to do the same let's copy this one here and let's open the VSS code let's open the configuration file which is admin panel provider and this file is inside the app providers filament and here we have a colors method and inside we can customize the colors we want so I'm going to add this one and for danger we have rows here but I want have red instead now you can go to this color class and find all the colors we have here so I'm going to choose red the gray is going to be not gray but I want the gray to be slate the info is going to be blue primary is going to be indigo and success Emeral and warning is going to be orange okay now if I save that and refresh yeah we have a different color also if we go in the dark mode yeah good now let's go and I want also you can change the fonts so we can change font and specify the fonts you want I'm going to copy this and let's do that let's come here paste that in hit save and let's see on the browser now refresh yeah we have a different phone and uh you can here we have all Google fonts are available to use so you can go to the Google fonts and choose what you like so for example let's say enter here okay now let's save this and let's say on the browser we have a different font now let's change also the logo and by default filament we'll use your app name as a logo but you may create the file inside the resources views and let's zoom in this so inside the resources views vendor filament dash panels components logo. blade. PHP and let's copy this path here and let's open the resources views and I'm going to create new folder paste that path here hit enter okay now inside the components I'm going to create a new file with the name logo. blade. PHP and here we need to add just the image tag with the your logo for example let's paste here and I have added in my public images here I have logo transparent.png so let's add that one here so logo Das transparent.png let's save and let's see on the browser now if I refresh yeah here is the logo and let's change also the Fab icon so let's scroll down add in a five icon add the five icon you can use the configuration file so right here we can change this method and pass in the public URL of the file icon so let's copy this paste it right here now I have also a file icon here so inside the images file icon dot in my Cas is I call like this and let's see if I refresh and yeah as you can see here is the icon okay now also I want to change the icons we have here the employees is going to be in the group down there and also the users down there so let's do that let's close now the this one let's navigate inside the filament and go to the country I'm going to copy this and let's navigate now inside the employee resource paste that in and I'm going to say employee management and refresh now here is the employee management as you can see the same for the user now the user is going to be user management yeah here we have employees user management and system management now I want also to change the icons for the employees and we need to navigate to the herrow icons and for the employee I'm going to use users or group like this so let's copy this one and navigate to the employee resource so here icon User Group save and let's see yeah here is the employees users I'm going to use the users so so let's go to the users and say users like this refresh yeah we have users now country we have a flag the state for the state I'm going to use this one so let's copy and navigate in the state resource change the icon save for the city I'm going to choose this one so navigate to the city resource and change this let's see now on the browser if we refresh Yeah country state and city now for the Department I'm going to use this one so let's copy and paste it in the department resource let's save let's refresh now yeah here you have Department city state country users and employees okay friends that's it all about this video I hope you enjoy and see you in the next one all the best Hello friends Tony here now in this video I'm going to take a look to some uh vment PHP form Fields if you go to the form field and here we have a Fields here getting started and we have this example with a text input and we have seen this in our project so if I open here the state resource here we have inside the return form schema we have this forms components text input make count ID and this is autogenerated with a flag but we don't need text input for the country ID we are going to add select here and we have a text input for the name which here we are okay now I'm going to show you I have copy from this repository from this user and larav count state city seats migration the countes table sitter States table siter and City table sitter so if I open them here so I'm going to open the country first sitter and in this count C we have the ID code name and phone code I have added also in the migration of the country so if I open the countes migration I have added the Char code and phone code because here we have the code and also the phone code now let's open the state CER and here we have a state Sider with name name and the country ID because the state belong to the country and also let's open the city CER with name and state ID because the city belong to the state ID I just downloaded a copy from here because I want to populate the country state and city now as you can see here the country we have 246 result and on the country we don't see anything because we haven't added to the table but if we go to the state here we have the name and the country ID also for the city because we have generated the resources with the flag okay now let's go to the state and let's go to the new state here we have country ID and I said to you we need here to add the select not a text input numeric okay so let's add a select form components and let's say select here now the select component allow you to select from a list of predefined options here we have select make uh let's remove this first and I'm going to add again so I'm going to say select for status and we don't need now the numeric we need to remove that because this is not a text input and here we need to change the options so let's say options uh active and inactive if I save this so here is the select make status and we added the options which is an array with active and inactive now if I come here and refresh as you can see here we have status and select option we have active and inactive by default filament uses the native HTML 5 select but you may enable a more customizable JavaScript select using the native method and specifying FS there so here in this select we have chain options and let's chain also the native method like this and let's say false as you can see expecting Boolean now if I come here and refresh now we have this uh kind of options if you don't like that you can say this the true but this is by default true so it's a HTML 5 select and we have this HTML 5 select now this is up to you if you want if you don't one you can remove and stick to the HTML file now because here we need we don't need the status but we need the country ID and here we need to have a relationship because the state belong to the country so here let's add the country ID okay now let's remove this option and let's chain here the relationship method and as you can see expecting the name and also the title attribute so let's say here uh the name for example name which is going to B country we don't have this relationship yet in the state model so let's open the state model right here yeah we have empty state so let's save first protected dollar sign fillable and we have here the count ID and also the name and let's close this and then let's create the public function country relationship and let's say this return this belong to the country class Also let's say here is uh belong to relationship let's save and now here we have name country which is the country relationship we created and also the title attribute so let's say here title attribute and for the title attribute I'm going to say the name of the country so let's say this and let's open now if I refresh yeah as you can see we have country and select an option but here now we have all the count now you may enable uh search input to allow eer access the many options using the searchable method so here now we can chain the search table and let's say the condition is by default true come here and refresh and if I select as you can see start typing the search so for example grease yeah we have grease also we can add uh the multiple method to allow us to select multiple values from this uh list of options so let's come here and let's say multiple like this and if I save and refresh let's select grease Greenland and so on as you can see now we have multiple select but because we have a this is going to belong to one country I'm going to remold but as you can see if I refresh and for example uh we have m here and now it's going to search we can add also the preload here if you like to populate the searchable option from the database when the page is loaded so instead of when the user search you can use the preload method to populate this before we type in okay so let's refresh one more time and let's see yeah we don't have a bounes here but if we added the preload method let's save and let's come here and refresh again now as you can see we have preload all the countries and if we filter by Grease yeah we are okay here we have the name which is good we added the required and let's copy this because we are going to do the same also on the city so let's open the city resource and here we have a state ID but we need to add that select and we need to say State now because the city belong to the state ID the relationship is going to be State and the title attribute is going to be the name let's save and let's open also the city moded and create the relationship so let's say here protected first do time fillable name and the state ID then let's create the relationship public function State and return this belong to the state class Also let's say here belong our relationship let's save let's close let's remove that and let's save this and we have a city New City and and here we have a state and the name good then the state is okay the country new employees yeah here we need to add also to create the form so let's copy this and let's open the country resource here let's space the text input for the name also for the code and one more for the phone code so let's say here phone code now the code is going to be max length of uh three and for the phone Cod is going to be the max length of five and also it's going to be num numeric so let's say here numeric let's save let's go to the country and refresh now we have the name phone code and code here let's go to the Department New Department yeah we have only the name users employees now for the employees we have the first name last name middle name the address and zip code and also the date and also here we have the section but if we open the employees so let's open the employees migration we have also the count state city and the department so let's add that in uh resource so for what I'm going to do is copy this one and I'm going to paste it right here and I'm going to make columns to be true and then let's open the state resource and copy this select component and paste it here based one for the country one for the state one for the city and one for the department and let's change that so let's say here not yeah this is for the country okay this is going to be for the state this is going to be for the city and this is going to be for the department and let's see on the browser now if I refresh we don't have the relationship yeah we need to go and create that so let's open the employee model and here let's create the relationship I'm going to say protected to be dollar sign guarded here I'm going guarded to be with an empty array and then let's create the relationship for the Department okay and this going to be belong to relationship then create the public function country also this one is going to be belonged to relationship return this country the state and the city so let's copy and paste down there for for the state and for the city let's change this the state and also this the city now here we need to add the city model and on the state we need to add the state model let's save and let's see on the browser what we have now if I refresh okay as we can see here we have country state city and department and yeah we have a preload all of them but what we need is if I select for example this country I want to have here only the states belong to this uh country and then if we select a state here I want to to have listed all of the Cities belong to that state so we need to dependent drop down and that's we are going to build in the next video okay friends that's it all about this video also I'm going to fix the behind the scenes I'm going to add a section for the count for more for the state and city behind the SC because I don't I don't want to take you so much time we have done that with the employees employee and we need to change that from a username here let's say relationship okay let's remove the description and let's save come here and refresh okay that's it all about this video now don't forget if you like s videos subscribe to my channel share with your friends uh like the video and see you in the next one all the best Hello friends Tony here now in this video we are going to work with a dependent select in uh filment so here we have the country state city and Department now the city belong to the state and the state belong to the country for that I'm going to when you select a country I want to render here on the state only the states belong to the country the same for the city when we select the state I want to render only the cities belong to that state and if the state is empty the city is going to be empty the same if the country is empty the state is going to be also empty okay for that let's open the vs code and here we are now the dynamically update the options of a select field based on the another field you can pass a function to the options method here we have a relationship but I'm going to change that to options so let's say options here the same also to to the city and remove the name and the title attribute also here and the function we are going to add on the options can inject utilities as parameters so you can do things like check the value of another field using the dollar sign get utility so in this example the country field here first let's chain here the live method and this allow the form to render when the value of the country field changes and now in the options I'm going to say FN and use the get from filament forms get dollar sign get here and we can get the value of the country field you using this G doll ass sign G utility the value of the field is used to determine which options should be available in the State field okay so let's say this is going to be is going to return uh collection so I'm going to say collection from the illuminate support here and I'm going to use the state model say query and chain the where method here so where the country ID and now we can use the dollar sign get to get the uh value of the country ID is selected so let's say country ID and then I'm going to plug only the name and the ID here so name and the ID I think uh I have imported okay let's do the same for the city as well let's paste that in now as so here I'm going to add the live I'm going to chain the live method and here we I'm going to say not state but City model make sure you import that and anywhere not country but city has the state ID so where state ID is dollar sign get state ID now this get is going to take a look to this state ID we added the live also here and I think we are okay now if I save that and let's open the browser and refresh right now if I take a look to the city nothing take a look to the state nothing let's choose Albania here now yeah we have all the states belong to the to this country and let's say Tran and now we have all the cities belong to the state here now if I uh remove the country I want also to remove the state selected and the city selected okay for that I'm going to to use the after State updated so on the state here after the live I'm going to chain also the after State updated and here we need to add a call back so I'm going to say FN and here I'm going to use now the set from filament forms set dollar sign set because I want to set the state for the city ID and let's say now dollar sign set the city ID the B and it's going to be null and let's copy also this one and paste it right here on the count and I'm going to say set the state ID tobo if I save this and let's refresh okay now let's select again Albania tyana and uh let's select this one now if I remove the count yes the state is removed but not the city so let's refresh and take a look one more time say tyana here and select this one if I remove the St also the city is remaining here and that's it because we need to add also on the city we need to chain the live method here now if I save that and refresh okay let's select Albania again I'm going to select Tiana here and now if I remove the country yes the state ID is not but not the city and that's it because on the country we say after State update function set to set the state ID n but also we need the the city ID when we remove the country so for that I'm going to say here function and let's copy and paste one more time and say not state but City here let's save and let's refresh let's select Albania tyana here and pasan now if I remove the country yeah both state and city are clean let's select again let's select again tan now if I remove also the state the city updated okay friends that's it all about this video how we can uh update the city and the state based on the country and the same for the city based on the state now if you like such a video don't forget to subscribe to my channel like the video and share with your friends all the best and see you in the next one thank you very much friends Hello friends Tony here now in this video Let's create the employee for us right now we don't have any employees so let's go to the new employee and I'm going to use the fake fer here let's select this country also the state and the City but we don't have any Department yet so let's go and create the department and before that let's open also the vs code and I'm going to open the department model because here we need to add the protected fillable protected dollar sign fillable which going to be only the name because only the name we have for the department and also let's create the employees really relationship method and here I'm going to add also as many okay because the department has many employees let's save this and let's close and now let's go to the department I refresh first and I'm going to create the Trav Department create and create another also I'm going to create The BJs and our reactjs good now let's go to the employees new employee and now here we have good before we create the employee I want also to change the look for the dates here we have this look and if we open the employee resource from here scroll down when we have the dates yeah we we can add here native the B fals and let's save this and let's refresh now as you can see if we click here on the input it's going to show the date picker instead here we need to go to the icon and click if we click here it's not to show that go to the icon okay now I prefer this one also we have if I open the filament documentation and go to the form Builder go to the date and time picker we can add also a format as you can see here seconds the fs but we don't have date time picker we have only the date picker yeah we added the native to be false so let's sum it yeah you can say also the display format to change the display format I'm going to copy that and just show you if we add it right right here so display format day month and year and let's come here we are in on the date birth refresh now if I click this one we have the date the month the Daye the month and the year if we click here here we have first month day and year okay now let's do the same also for the date H and let's save and refresh and I'm going to use now fake field here select the country uh state city and and Department Also let's select this date and this date for the date hired let's say create and now created go to the employees here we have now the first employee in our project we have this view which going to show kind of form we can change that but for now let's leave it let's go and create new one so fake fer let's select the country let's select tyana now also tyan here and reactjs select this date and also this date for date hired let's create and let's come here okay friends that's it all about this video I just wanted to create some employees so we are good for our project then in the next video we are going to work with the tables because this table is created with a flag we generated the resource the same for state city and department for the country also we need to work with the table here and for the state if we want to change because here we have the country ID but we can add the country name the same for the city city we have state ID but we if we want we can add the city name here and that's we are going to do in the next video all the best friends and don't forget if you like such a video subscribe to my channel like the video share with your friends and see you in the next one all the best Hello friends Tony here in this video Let's Deep dive in filament tables here we are in the count table and we can see we have only the edit button we don't show either the ID name or code or the phone code because we haven't worked with a table yet but if we go to state we can see we have a count ID with showing the ID here and the name it's going to show the name and here we have this table be because we have created the resource with the flag to create to generate Also the table the same for City department and employees now we are going to Deep dive in the table so for that let's open the state first I'm going to open the state table because we the state resource because we have the table there so here we have the table method and inside the table columns we have an array with all the columns we want to add here on the table to show so the same we have for the form we have form schema for for the table we have table columns and inside we have the array with all the columns we want to display here okay now the columns may be created using the static method make as you can see here passing its unique name so here is the unique name the name of the column should correspond the column or accessor on your model so if I open the state model we have here the country ID and name and here we have country ID and name also we have created ad and updated out here now as you can see here we have country ID and we show the ID but if we want to access the relation for example I want to display the country name we can do that using the dot notation on columns so for example for Country we have the relationship country here and let's close the model the display that we can use the dot notation so country dot name the country is the relationship and I want to display the name from the country with that now if I save and come here and refresh as you can see here the country and display in the country name already move now the numeric because it's not numeric this text column and let's save come here and refresh okay now on the filament tables we have two M types of columns static and editable static columns display data to the user which are text column uh we have icon column image column and color column edit table columns allow the user to update data directly without leaving the table here so for example if we have a toggle column the toggle directly here and it's going to update the data without leaving the table also select column checkbox column and text input column now uh by default the label of the column for example here for name which is displayed in the header of the table is generated from the name of the column so we have make name and this is the name now if you want to customize that we can use the labels method to do that so here let's change label and for example I'm going to say state name if I save this and take a look to this one now if I refresh we have state name up here now as you can see here at the counter we have this uh icon and this is for sorting now column May Be sortable by clicking on the column label so for example if I click here as you can see it's going to sort ascending and descending to make a column sortable you may use the sortable method so if I open the vs code on this country name here we have the sortable we can see we have chain here sortable also on the created ad and updated ad if we want to make also the name sortable we can do that by just changing the sortable method so if I save that and come here and refresh as you can see now also the state name is has this icon and if I click it's going to sort by the state name now ascending and descending now let's remove as you can see here also on the URL we have table sort column name and table sort Direction descending if I remove and refresh we don't have a default yeah I think it's going to sort by default for name ascending if we if you don't want that and you want to change we can do that by adding on the column on table columns here changing the default sort here for example I'm going to use default sort and I'm going to sort by name or let's sort by uh country name so let's say country dot name and if I save this and let's see now on the browser if I refresh take a look we have this uh first one if I refresh yeah it's going to sort by count ascending if you don't like ascending and you want descending we can add descending here and let's save and refresh now we have a descending okay let's it hold out the default sort to all the table now as you can see here we have the search to make a column searchable we may use the searchable method so right now if I come here we have added a searchable on the name and for example let's search by this name Midlands as you can see here we have but if we want also to have uh the country name searchable we we can do that by just chaining Here country chaining the searchable and if I save and let's search for example uh so let's search for Uruguay and I'm going to go to the first one and say or here yeah here we have search for also the country name now here we have the relationship country name and the name but uh if you're using an accessor column you may pass an array on the search table so for example here search table and also on the sort table the same you can add an array for example if we have here a username and that username is accessor for for uh first name and last name you can say here first underscore name and also add the last name and the same for the searchable if you use uh accessor I'm going to remove and you can choose to enable per column search input field using the is individual parameter here on searchable so for example if I say is individual the B true and let's save this come here and refresh we have this search input which is only for the state name and also if we do that also for the country name save we have also here and this search is only for the country name this is only for the state name and also we can search both of them in the global search here if you don't want that you need to add a second parameter so for example is global to be folds for the country name and if I save and refresh and let's search here for the Uruguay again nothing is going to show here because we don't search for country name here only for the state name okay now as you can see here we have this icon and here's the columns we don't see here but if we want we can show and hide them if we che check here so let's check create that and updated out and here we have created that updated that which all of them are n but if we want we can show and also both of them are sortable because if we go here yeah we have created out tole label and his toled hidden by default true if we remove that save and come here and refresh uh let's as you can see only the updated ad is here the created ad is showing by default so if we want to hide someone some column and just leave it here the show or hide also if you want you can uh hide a column by using so let's use a name here I'm going to change the hidden and accept a Boolean or a closure so I'm going to say true is going to remove now the name as you can see also we can say for example here if the authenticated user we don't have admin or not admin but for example let say if the out username is triple and let's see what is the name admin user or let's say email here which is admin at example.com and I'm going to hide that if I refresh now if I remove that save and it's removed the name okay so we can show and hide with this hidden also the same we can do with the visible so for example the opposite of hidden we can say visible is going to be accept the Boolean and and we can say true or it's going to be visible only if the authenticated user email is admin example.com and which is now if I refresh is showing or if that is not it's going to be hi as you can see here okay now that's it all about this video I hope you enjoy friends and if you like such a video don't forget to subscribe to my channel share with your friends like this video and see you in the next one one all the best Hello friends Tony here now in this video I'm going to fix all the tables we have for state I'm going to remove this search for specific column here for the country I'm going to show also the name here on the count we need to display the name also the code and maybe the phone code for the city how display the state name and for the Department here we have the name I'm going to display the count of uh the employees this department has for example and also we can go to employees and hide some so for example the date of birth ZIP code or the address I'm going to hide the address and because as you can see now we need to scroll to see all the table so I'm going to fix that and let's start with the state so here we worked in the previous video so I'm going to open again the state resource and here we are inside the table we have the name country name which we add the searchable and is individual the true but I'm going to remove this I'm going to say just searchable and move two parameters here also for the text name and I'm going to remove this visible because we don't need to hide that and we have a created that and updated that toggle label and is toggled hidden by default to be true which in my case is okay now if I save this and come here and refresh I think we are okay here if we go now to City here we have the name and let's do the same let's display the state name but as you can see here we have this also this View and if we click here we navigate the city's view if we go to State and we have only the edit and also if I click we navigate the edit and we need to call an action here so if I open we have actions and here on the state resource we have only the edit action if I open now the city resource and scroll down when we have actions as you can see we have also the view action and if I copy this and uh that one also on the actions here on State and save let's refresh and if I click now here yeah we show here the form we're going to fix that later we're going to fix all for all the tables now let's uh navigate to the city and fix the state okay so here we have the state I but I'm going to say state do notation and I want to display the name of the state let's open also the city model to see if we have a relationship for State yeah we are okay let's close and I'm going to remove the numeric here let's add also a searchable here so I'm going to searchable to label is hidden and update data create a that okay let's say and let's come here and let's refresh yeah we have the state name here and also we can show the created that and updated that good let's navigate the department and as I said here I want to display the count of the employees belong to this department so so let's close this and close this and open the department resource here we have the name and create that and update that but also I'm going to add tables back slash columns back slash and here I'm going to add a text column text column called the static make method and I'm going to make this for the relationship and let's open also the department model we have employees here so let's say employees uncore count and I'm going to say count counts of employees and let's save this yeah we need to add of Poma here and let's save let's come here and refresh as you can see we have employees count and here for this one we have 1 Z 1 good let's aate now to the employees also see the users I think we are okay for users we have the name email and email verifi that and also the created that and updated that now let's navigate employees and here I want to display the first name last name with remove the middle name and address I'm going to leave the zip code and the date hired remove the date of birth so let's close this close this and let's open the employee resource and uh yeah also we can make them to label so let's copy this and add it also on the date of birth and as I said remove the date of birth remove the address and middle name so also on the address I'm going to add toble able and on the middle name let's save let's come here and let's refresh yeah now we have the first name and last name the zip code and the date hired but let's show also the country this or for yeah the country name for that I'm going to open the state and copy there just to save some time so here we have and the same is going to be also for the employees so I'm going to add first the country save come here and refresh and yeah we have country Albania Albania and then first name last name zip code and date hired now we have sortable for Country let's make uh also for the first name so let's say here first name name I'm going to make it sortable and we have searcha for country name first name uh last name middle name address ZIP code and so on yeah let's refresh now here if we want we can show also the middle name the address date of birth created out and updated that and then we need to scroll to see all of them let's hide all of them okay now let's navigate the count and I'm going to copy this one here close and let's open the country resource and here we have table and paste that in this is going to be for the name it's going to be searchable then with that also for the code and also for the phone code now phone phone code is numeric so I'm going to say numeric here and let's save come here and refresh and yeah we have the name the code and the phone code which is numeric here and we can search now I'm going to remove this sort table for the phone code we can search for name and for the code also so for example if I say for the a here we have also for the Argentina here and then clean this now if you want the display of the created ad and so on let's navigate to the state again just copy very quick the created out and updated ad so copy that and paste it here save refresh now we have also the columns for create a that and update that here okay friends that's it all about this video just a fix all the tables how I wanted and I hope you enjoy and don't forget if you like such a video subscribe to my channel share with your friends and like this video because it's going to help me to rank on YouTube all the best see you in the next one so friends Tony here now in this video I'm going to customize the view for the pages so we are inside the state and if I click here we have this view State details which is kind of a form so Country and this is is representing an input the same for the name and I'm going to change that I'm going to use the info list if you go to filament documentation info list Builder you can read more on the documentation but we need to create this method inside the Min resource so let's copy that and let's navigate in the state resource first so I'm going to open the state resource and we have the form the table and after the table I'm going to create this info list method with to import that and also this is going to be a static method okay now here inside this schema we need to add the entri we have a text entry icon entry image color and and a repeatable entry also custom we have also layouts and I'm going to use most of the time the text entry so let's copy this also for the relationship as you can see is the same as the form so we need to say the author do notation name and let's paste that in so text entry we need to import that and we are inside the state so I want first to display the country name and also the name for the state now if I save this and let's refresh let's open now yeah here is we have more clean model country and name but uh let's change Le the be State our state name for example so let's change the label and I'm going to say state name and also here I'm going to add the label and say country name let's save and let's refresh open now we have country name and state name close if you want to add also the created ad and updated that you can do that we have layout also so let's use a section and going to cut of them and say section here and this section is from filament info list so section make and let's say State info and we need to change the schema which is an array with the text entry with our entries not only the text but if we have some other entries for example icon image or color we can add there now let's see on the browser if I refresh View and yeah here we have state info so what we added here and now as you can see country name and state name is taking all the width if you want you can change that by saying columns here to be uh CH for example save come here and refresh take a look one more time and now we have state info with country name and state name like this okay let's close and let's do the same for cities now for City if we navigate with click we navigate the new page because we have created so if I open files and see the resource we have also The View VI City because when we generated the city resource we added the D- view flag to create also the view page now if you prefer this one okay if you like the same as we have in the state with a model we can do that also so let's copy this method and I'm going to open now the city resource and I'm going to paste it right here now we need to import this uh also the section from the info list and the text entry now here I'm going to say City info the city has the relation with the state so I'm going to display the state name and let's say state name here and for this one city name okay now if I save and go to the city refresh click view here is the city info with state name and city name and as I said if you don't want the page but you want uh model here we have get pages and we have the view which is going to navigate the pages view City and passing the record if I comment this and refresh save View and it's going to open this model for us now it's up to you let's copy the method and navigate also on the cry the same thing after the table method I'm going to create this import the info list import the section from the filament info list and also the text entry and here let's say country info we're going to display the name of the country and let's or just let's say name here and uh remove this one I'm going to also display the code and let's say count code here and let's display also the phone code and let's say let's say phone code like this let's go to the country refresh as you can see we don't have a view here and that's it because on the counter resource if we scroll up when we have actions on the table we have only the edit action but I'm going to add also the view action and let's save this and now refresh we have also the view here and if I click we have the country info with name country code and phone code good let's close and let's copy the info list method let's open the department now and for the Department the the same thing paste that in import the info list import the section from the filament info list and also import the text entry now here let's say department so let's remove this one here now for the name let's remove also here because it's the same name I don't want to display the phone code on the department and but the employees count so employees count and how to do that if you go to the documentation we have the calculated State and here's the example so I'm going to copy this and paste it right here okay import the moded and instead of flot I'm going to return an IND so return a record employees and here we need to call the account let's save and let's come here and refresh first let's go to the department refresh as you can see on L we have one on the employee count if I view yeah employees count one and the same if you don't want to see the page I refresh on view and now you can see a model okay so I think we are good with the system management let's go to the employees and also change this one because is uh like like this so let's open let's copy the info list method and let's avate on the employee resource here we have a table and I going to paste this one now import the info list import the section and import import the section from the info list and the text entry I remove this now what we want to display here not department but is employees employee info we need to display the and let's go country state ID City ID and department so let's display first the country name like this and let's copy for state name city name and Department name okay so country state city and Department okay then we need display the username so first I'm going to say a relationship what we have also in here so section make for the relationship then create another section and this is going to be with uh two columns this one is going to be the name and it's going to be with three columns okay so what we have here three columns so we need the first name last name and middle name and let's do that let's say first uncore name middle name and last name I remove this one then we have the user address and dates so let's copy this one again and paste it right here this is going to be the address and we need to display the address and the zip code so let's say here address and also zip code and remove this one is going to be two columns and let's save let's navigate back to m employees refresh if I click the view now we have relationship name and address and the same if you don't like the view page go back to employees now and refresh and we have something like this okay friends that's it all about this video to update the view page for all the resources now if you like such a video don't forget to subscribe to my channel like this video share with your friends and see you in the next one Hello friends Tony here now in this video I'm going to add filters and tabs on the employees table so filters allow you to Define certain constraints on your data and allow users to scope it to find the information they need and you put them in the dollar sign table filters method so if I open the vs code we have the public static function table which return the table columns method and here we Define all the columns we need for the table so we need to show here all the columns and then we have this filters method now in this filter we Define all the filters we need filters may be created using the static method passing its unique name and you should will then pass a callback the query which apply your filter scope so the same here we have make static method with the name now I'm going to use a select filter and select filters do not require a custom query method the column name used to scope the query is the name of the filter so let's say here select filter and call the static make method and here we need to define the name and I'm going to say Department like this and select filters are also able to automatically populate themselves based on a relationship because here I'm going to add a relationship for example we have a department relationship with a name column and you can use the relationship method to filter the records belonging to an department so we can say here relationship passing the name of the relation which is department and we need to display the name of a department now if I save and come here and refresh as you can see we have this uh icon and if I click we have filters with the department which is the name we added here and let's filter by laravel yeah now only the employees belong to the L dep Department are listed also if we select react and VJs we can reset them okay now uh on the Departments we have only three departments but if we have more for example like we have on the country and we can add a searchable here so the same we had those own the form so we can change searchable and save and refresh now we can search also we cannot preload if you like to populate the searchable options from the database when the page is loaded so instead of when the user searches you can use the preload method to populate them and we can do the chain the preload here save come here and refresh and if I click now is preloading all the Departments and we can search for example for laravel and we have laravel there now when a filter is active an indicator is displayed above the table to show the table query has been scul okay Al we have this x we can remove from here or we can say reset if you want to change here the label for the filters we can chain also labeled here so I'm going to say labeled and I'm going to say uh filter by department and if I save and refresh we can say we can see we have filter by department and if I click l now also here as indicator we have this label filter by theart if you don't like that and for example you like to have here a filter by department but not in here we can chain also an indicator method and pass in the name for example just department or refresh now we have here department but as a label here we have filter by Department okay also if you go to the filment table Builder documentation we have here filters and you can go and read the documentation I'm going to add also this filter for create out just I have one more there so let's copy this and paste it after this select filter we need to import this filter from the filament tables filter and also the date picker and let's save let's open the browser and refresh now if we click here we can see created from and created until here let's remove the department and I'm going to select created from this date until uh this date here okay we have only four results I select from one we have six results we have added the filter by created add and created until but we don't see the indicator here if you want to do that you cannot indicate using and we have yeah here is an example so indicate using passing a function which accept an array data and with this data we access the date Pier so the date Pier create a that and created on and let's I'm going to pass here we have the indicate using and I have just a copy from here and now we need to import the carbon from the eliminate support carbon here let's save and let's see now on the browser if I refresh as you can see now we have created from and created only because we hit he have here indicators created from it's going to be able with created from and passing the date so created from and also created until here we have here created until and the date also we can add the filter for larel for example and now we have all the active filters here we can add also a layout so we can Define the layout on the filter after the array we can say lay out as you can see here which by default is null and let's say lay out and I'm going to say filters lay out and here we have AB above content above content collapsible below content so let's say above content and let's save this now if I refresh we can see we have above the table the filters now as we can see here we have all filters here and all filters taking the full width and if you don't like that we can chain here uh filter form columns and let's say I want this two here refresh yeah now we have separated the by department and the created from and created until okay but let me just save filter form columns to be three and if I refresh now I want this filter to take both two columns here the this one and also the empty one so let's do that in this one here so I'm going to change the column span to B two and let's save refresh and then columns to be to here and yeah now we have more noise like this if you prefer if you don't like that you can remove this one and also the filter columns and I'm going to remove also the layout here and leave the default one refresh right here okay let's reset and let's add now the tabs so we can add tabs above the table which can be used to filter the records based on some predefined conditions each tab can scope the L query of the table in a different way to register tabs we need to add a get tabs method to the list page class and return an array of tab objects so we need to open for the employee resource we need to open the employee list employees and here we need to add public function to get tabs we is enter it not get table but get tabs we see an array so let's say return and return an array now here we need to add the top song with to say for example all and say tab from the filament resources Pages uh list records so T static make method and if I leave like this let's close this one and let's come here and refresh as you can see here is the top all and now let's create one more and I'm going to say this week and I'm going to query based on the employees we have uh hired this week so want to say tap make and then I'm going to modify quer using and here we need to add a callback so FN and we need to add a builder from the eliminate database to sign query let's say query where now where the date hired is greater or equal with the and I'm going to use now sub week save this and let's refresh yeah we have this week here if I click we can see we have only four results if I compare six this week for results let's do the same for uh so let's copy this and paste down there with ADD also for this month and one more for the this year so let's say here this month and here this year so the employee we have her this month and we can see just change this to sub month and also here sub here let's save let's refresh now we have all this week this month and this year so I got to all we have six results this week four this month we have five and this year six we can add also a budge here to display the count of employees based on the query here so let's uh say that this one first I'm going to chain the budge and say employee query and I'm going to pass this one so where the date hired is greater equal with and now sub week and here now we need to call the account and if I save and refresh yeah we have this week four let's copy this now and add it to the month just change here to be sub month and also in here to B sub here and let's save let's refresh and yeah now we have this week this month for five uh this year's six okay friends that's it all about this video I hope you enjoy and don't forget if you like such a video subscribe to my channel like the video share with your friends because it's going to help me to rank on YouTube Hello friends Tony here now in this video let's work with relationships and first of all I'm going to open the vs code and let's open one by one the mod so col the model and City model here we have the protected fillable and also we have the state relationship because this the city belong to the state but also we have a relationship so let's create public function for the employees here we have a has many relationship because the city has many employees okay let's say let's go to the country here we don't have so let's just come here and copy this one and go to the country and paste it right here just to save some time on the count we have name uh we have the code and also we have a phone code okay now country we have a relationship with States here now country has many states not belong to so we need to say has many and also here we need to return that has many relationship like this and also a country has many employees go let's save and let's copy this employees because when we also for the Department yeah here we have okay employees we have Department country state and city good let's go to the states here we have the relationship for country but we need to out also for the employees has many but the state has many employees and now we are okay with models relationship now how we can work with relationship using filament and that's it very easy so filaments as always make easy for us we need to create uh relationship so here we are in the employee country and if I go to the edit page we have the form to update the country okay but here also we can display a list of relationships belong to this uh country for example we have States and employees okay so if I open again the country model we have States and employees relationship for the country and we can display a list of states and employees in here for that we need to create a relation manager and I'm going to open the terminal right here and I'm going to say artisan make filament Dash relation Dash manager here we need now three names the first name is the name of the resource class for the owner model in this case I'm going to create for the country so it's going to be the country resource okay the second name is the name of the relationship you want to manage so I'm going to create first for the state and then for the employees let's say States and the third name is the name of the the attribute that will be used to identify the states in this case and we have name so the states name and let's hit enter and now successfully created the states relation manager and we have here an info make sure to register the relation in country resource get relations method so let's open that let's open filament country resource s and here we have the get relations method and we need to register the states relation manager in here before that you can see we don't have on the edit employees country just we have the form but if I register this in here so the states relation manager plus and save this now if I refresh immediately we see we have a table with all the states belong to this country so we are on the Afghanistan if I select another country here edit Albania and we have all the states belong to this country now here are displayed only the name we have also the edit and delete but if you want so let's CL close now right now this one and let's go to the country resource here we have pages and we have new directory relation managers if I click we have the state relation manager we created and we can see the table has just the text column for the name what we have here now if you want to add more so let's copy and B it here for example I'm going to display also the ID of the state and let's refresh as you can see now we have also the ID here we have the edit and if I click just let's say dot dot dot save changes as you can see we have updated the name and also if I go to the states and let's search or that state we have dot dot dot here so go to the country go to the Albania and we have this state and change back okay now let's create also the relationship for the employees I'm going to open the terminal and just change now the relation name I'm going to say uh employees and the name for the employees is going to be the first name we don't have the name but we have the first name hit enter and of course now successfully created the employees relation manager and we need also to register this in the G relations inside the country resource so go to the country resource and also register the employees relation manager class hit save and if I come in refresh now we have tabs here we have States and employees all the employees belong to this country so let's go to the another country so for example for this country I think we don't have employees we have state but if I go to the employees yeah no employees yet good we go to this one and go to employees now for the employees we display only the first name but if you want you can change that and let's do that now we to close the count resource and let's go to the employees now in the relation managers we have also the employees relation manager and inside the table we have only the first name but let's go to the employee resource and when we have the table I'm going to copy what we have here so I'm going to select all of them let's copy and let's paste it inside the table in the employees relation manager I'm going to just remove the country name we don't need the country name here and let's save now if I refresh you can see we have the first name last name zp code the same we have on the employees table here we also have this the filter show and hide the columns we have the search now if I click to the edit we have only the first name the same thing you can do also with form so you can go to the employee resource and when we have the form I'm going to copy this and base it on the form we have on the employees relation manager P that in close this and import one by one what we need to import so import filament form set the G also the collection Luminate support collection I import the state query from the app models state import the city and we are okay let see okay yeah we are okay save this and come here and refresh let's click now to this and yeah we have the relationship country State and all of them username user address and dates now let's cancel and we have for results here okay but let's remove let's change the country for this uh employees so going to select Afghanistan here and also we need to set the state and city if I save changes now we have only three results okay because that is removed from this list now let's do the same for the state so here when when you go to the edit I want to display all the cities belong to this state and all the employees belong to this state okay so open the terminal and just let me lean this and artisan make filament relation manager now not for the country resource the parent is going to be the state resource and let's create the first for the employees and also one more for the cities and for the cities we need the name okay we need to register on the get relation in the state resource so let's close this and this and let's open the state resource here navigate G relations register that City's relation manager class and also the employees relation manager now here we need that one which is for the state not for the country so let's go up here and we have cities relation manager resources State resource and also employes State resource good let's save this and let's navigate here and refresh okay let's open the state model and we don't have a cities relation so we need to create also that public I forgot to do that function cities which is as many relationship and it's going to return this as many City okay now if I refresh here we have cities and also we have EMP employees okay for this one we don't have employees yet we have cities and as I said you can change the columns on the table also the same on the for okay now I'm going to create also for the city and for the city I'm going to create only for the the employees because if I open the city model we have employees has many and let's close this open the terminal let's clean and let's create a relationship and the parent is City resource the relationship is employees and we need to add the first name hit enter okay we need to register now the relationship so let's open the city resource and on get relations let's register that so register the employees relation manager and we need to make sure that is for the cities so not State resource but City resource let's save and let's see now if I go to this city yeah we have employees here and I want to go to the Tiana and Tiana here yeah we have employees here okay now I created also for City and the same you can do for Department I create it for the city because if I go back and search again there and here we have this view if I click we have a model the same we have also for the country and for the state but let's go on the city resource and here I'm going to un un comment this one so get Pages view now we are going to if I click to the view going to navigate to the page just refresh and view now as you can see also on The View page we have employees okay and here we have only on the read mode so if you want to have also the same we have to the edit as you can see we have the action for new employee edit and delete and if you want to have the same actions on The View so if I go back to the view yeah we don't have actions here what we can do is let's open the city resource we have now relation managers here and let's go to the employees relation manager and if I scroll down and let's create a new method here public function is read only which return a bullion and let's return false because by default is true if I save this and refresh now as you can see also on The View we have actions for to create a new employee edit and delete okay friends that's it all about the relationship I wanted to show you now if you don't like that you can see back the true which is the same as we if I remove that okay okay but I just want to show you if you want you can add and you can have relation actions also on The View City now uh on the country and on the state we don't have a view page so because on the city resource Pages we have this view City page but on the count resource Pages we don't have that and also on the state resource Pages we don't don't have if you want to create also the view page is the same as you have here view City just create a new PHP page and just copy and modify that also you can add a comment and I will do in the next video okay friends all the best and don't forget if you like such video subscribe to my channel share with your friends like this video because it's going to help me to rank on YouTube all the best see you in the next one Hello friends Tony here now in this video I'm going to add a global search to project and also I'm going to sort the group navigation how I want it and also I'm going to add pages on the employees and maybe on the users and also on the Departments we can add all but I'm going to add only on the employees users and department now to enable the global search on your model you must set a title attribute for your resource so I'm going to add on the employees first let's open the vs code and here we are on the employee resource now we need to add a new attribute here so let's say protected static string dollar sign record title attribute and here I'm going to add for the employee resource I'm going to add the first name first uncore name and if I save that let's open let's refresh and here we have the global search now let's search for examples for base one yeah here we have employees and we have the employ here if I click we navigate to the edit page of this employee your resource needs to have an edit or a view page to allow the global search results to link the URL otherwise no results will be returned for this resource okay so the employees needs to have a view or edit page otherwise it's not going to show up here and you may customize the title by uh overwriting the get Global search results title method so let's do that let's create new method and I'm going to create right here so public static function and the name of the function is get Global search Global search results title and here accept the model and it's need to return the string so let's return that return and here we need to overwrite the title we added first name so let's change that uh last name so I'm going to say record last name and let's save if I refresh now and let's search for this one again so PL okay we searched here is the employee but now it's going to display the last name not the first name as you can see okay now if you like to search across multiple Columns of your resource we need to overwrite new method so let's go and do that so open this one and create a new method public static function and the name is get global searchable attributes yeah this one and it needs to return an array so let's do that let's return an array and here we need to specify the columns the search so I'm going to search for the first name also for the last name and maybe the middle name good but but let's uh just cut this save and just show you if I refresh and if I search for the last name here right now yeah we have no search results found and if I save this and refresh again and search now or the last name now we have the employee and we navigate the edit page of that employee now we can add also a DOT notation here and the dot notation allow you the search inside a relationship so for example we can say uh count do name if I save and come here and refresh and let's save for Albania and here we have the employees belong to the Albania if you like I'm not going to do that okay let's save now also you can add extra details of the global search and Searchers can display details below their title which give the user more information about the records and to enable this feature you may overwrite a new method the get Global search results details method so let's do that let's create also the new method public function get Global search results details method and it's going to return is need to return array so let's do that return an array and for example I'm going to add here just the country so let's say country here and tot our side record country and display the name of the country if I save here and refresh let's search for this one and the country is Albania so here we have now Miller and Country Albania down there okay okay let's close this and let's go back now the country Rel reltionship will be lazy loaded which will result in a poor results performance and the eager load the relationships we must override the new method which is the get Global search eloquent query and let's do that let's create that method so public static function get Global search not results but get Global search eloquent query and we need to return a builder so let's return and I'm going to say parent get Global search Ando query and now I'm going to chain with and here I'm going to specify just the calary but you can add also the others if I save now and let's refresh let's search again for plateau and yeah here we have okay now that's it all about the global search and let's start and work with the navigation so I'm going to add the bits for the employee let's open the employee resource and we need to create a new method to add the bits next to the navigation item here we need to create the get navigation badge method and return the content of the badge so let's do that let's come here and let's say public static function not get Global search now but the method is get navigation badge so get navigation and we need to return the string so let's say return and I'm going to use the static get model count okay now if I save this and let's come here and refresh yeah here we have the badge for the employees now you can override also the color of the bedge so let's do that just want to show you so public static function and the name of the function is get navigation badge color and let's return here the color for example example I'm going to say uh warning and if I save come here and refresh yeah we have a warning here and let's open the providers filament admin panel provider and we have Tanger gray info primary success or warning so let's do the info with the change back info here save and refresh yeah here is the info we also can uh change conditionally so for example we can say static get model count if the count is greater than five I'm going to add for example the warming color otherwise let's say success and let's save come here and refresh now we have warning if I say greater than 10 save we don't have 10 we have only six and refresh now we have success here and let's just copy the badge for also the user resource soong without right here and let's save and also on the department resource I'm going to add so scroll up and here I'm going to paste that in let's save come here and refresh here we have for users and for the department now let's uh order the navigation groups so I'm going to open the admin panel provider and here I'm going to chain this's chain here after the font the navigation groups and here accept an array so let's do that we have the employee management user management and system management groups so I want the employees to be here then I want the system management and then the user management or if you want the system management at the top but I want the user management at the bottom so let's do that let's say employee management first and I'm going to copy that then the system management and the last one is going to be the user management okay let's save let's come here and refresh now we have employees management here we have the system management and then the user management how we I want to order them okay friends that's it all about this video I hope you enjoy that and don't forget if you like such a video subscribe to my channel like the video share with your friends because it's going to help me to on YouTube and see you in the next one all the best Hello friends Tony here now in this video Let's customize the notification when we create edit or delete resource so when the record is successfully created a notification is dispatched to the user which indicate the success of their action and if we go and create a new employee here I'm going to select the country state and city also the department and let's also choose the dates if I save this we have here the notification created if we want we can uh customize that and to customize the title of this notification we need to define a get created notification title method on the create page class so here we are on the employees and on inside the employees uh resource let me here we are Pages we have this create employee here now we need to Define that method protected function and the name of the function is get notification uh created notification title and here we need to return a string so the return type is string and let's return that so let's return for example uh not create employee but employee created like this if I save and let's create now a new employee I have saved that yet let's use let's refresh and let's use the fake Fielder choose the date also and say create now take a look to the notification okay create now we have the employee created also you can uh customize the entire notification by overwriting the get created notification method on the create page class so let's do that let's come here and let's say protected function to get created notification and the return type is optional notification from a filament notifications notification okay so filament notifications notification here is the return type and let's return notification make the static make method and here we can chain uh success status and the title so let's say title employee created and we can add also a body so let's say body and say here the employee created successfully like this okay let's sa if yeah let's save like this and let's see now on the browser let's go to the employees again and new employee I think we saved it use a fake f and select the country state and city also the dates and let's see now the notification yeah employee created and the employee created successfully okay now if you don't want to have the notification you can say here returning n so instead of this you can say return null and then if I go back and let's refresh and let's create new employee fake filler now if I say create we don't have a notification now this is up to you how you like it I'm going to leave this one and remove this one here save now the same thing we can do also on the edit when we edit that so let's go to the edit employee now let's come here and I'm going to copy this one and on the edit we need to define the protected function and here is the get saved notification which return the notification and paste that in you need to import the notification here is a success now change the created to be updated okay so on the create we have the get created notification on the edit get saved notification and let's see now so if I click this one and let's just change the address the dot dot dot here and say save now the employee updated and the employee updated successfully now what about the delete so if I click here and confir we have deleted here how we can check change that because we don't have a delete page and this delete button is in the edit page also we can add in here so let's open the employee resource and when we have a table and let me close this let's close of the columns we have filters and then we have actions so View action edit action and let's add also the tables delete action but we need to say tables here not table and let's say make like this if I save this and come here and refresh now also we have the delete action here and if I click delete we have the confirmation model if I click confirm yeah deleted but how we can change the notification and in here when we say delete action we can change the notification directly in here so we can chain a method for example to change only the title we can say success notification title and here we can pass the title so I'm going to say uh employee deleted like this if I save and let's come here and refresh let's say delete let's confirm this and now employee deleted or if you want to do the same with uh edit for example here let's copy this one the notification and let's go to the employee resource instead of changing the success notification title we can change the success notification here so let's say success notification and inside I'm going to add a notification instance okay so let's paste now the notification make success and we need to change let's close this and we need to change the updated to be deleted employee delet deleted and the employee deleted successfully we need to import this from the filament notifications notification save come here and refresh and let's say delete also for this one confirm and now we have employee deleted and the employee deleted successfully Al the same you can do if you don't want a notification you just add an all here and then if I save and refresh if I say delete confirm we don't see notification now this is up to you I'm going to leave back to this one and Save and that's it all about the notification how to customize for the create update and delete records if you like such a video please subscribe to my channel like the video share with your friends and see you in the next one all the best Hello friends Tony here now in this video I want to talk about the multi-tenancy with a filament so I'm inside the filament documentation and in the multi-tenancy section so here multi-tenancy is a concept where single instance of an application serves multiple customers so each customer has their own data and access rules that prevent them from viewing or modifying each other's data this is a common pattern in SAS applications uh users often belong to a group groups of users often called teams or organizations and records are owned by the group so by a team and users can be members of multiple groups so multiple teams for example now multitenancy is a very sensitive topic it's important to understand the security implications of multi- tency and how to properly implement it if implemented partially or incorrectly data belonging to own tenant may be exposed to another tenant now filament provides set of tools to help you implement multi-tenancy in your application but it is up to you to understand how to use them the term multi-tenancy is brought and made mean different things in different context filaments tency system implies that the user belongs to many tenants uh for example teams and may switch between them if your case is simple and you don't need a many to many relationship then you don't need to set up the tency in filament you could use observers or uh Global Scopes let's scroll down and let's see the setting up tency the set up tency you will need to specify the tenant like team or organization model in the configuration file so we need to change the tenant method and pass in here the model uh in our case is good to use the department as a team but I think it's better to use theme because you are going to understand better if you see my video and also come in here and read the documentation which I suggest you so also watch my video and also come here and see the documentation and you are going to have Team here and also team in the video and that's is going to be better for you to quickly understand that okay so first let's go and create the theme model I'm going to open the terminal and let's say here artisan make the model hit enter and let's name It theme and we want only the migration okay and let's open that migration so themes migration and here I'm going to add the assign table string for the name and let's copy also and paste for the slack let's save let's come here you also need to tell filament which tenants uh user belongs to so you can do this by implementing the S tenant interface on the user model but first let go on the configuration file and change the tenant method passing the theme model let's come here and let's open the admin panel provider and at the end I'm going to chain tenant method passing the model which is team class okay save then let's open the user and implementing the has tenants interface face so let's do that let's open the user model and here say implements as tenants okay and we need to create the cat tenants method themes relationship and can access tenant method okay let's copy them and scroll down and paste it right here so we need to import the panel from the filament panel the collection from the illuminate support collection belongs to manyi and also the model here now we have got tenants we have teams which is a belongs to many relationship and for that we need a pivot table teamed the user okay but let's save this and let's come here and let's say in this example users belong to many teams so there is a teams relationship the get tenants method Returns the teams that the users belongs to and filament uses this to list the tenants that the user has access to so it's going to list all the teams and then for security you also need to implement the can access tenant method of the has tenants interface to prevent users from accessing the data of other tenants by guing their ID okay for that we have this scan access tent now let's create also the pivot table and I'm going to do that in this one so let's copy this and paste it down there this is going to be theam user for ID for team ID and say constraint and let's copy and paste for the user ID save this also we need to say here drop if exist also the team user save now adding a tenant registration page so a registration page will allow user to create a new tenant when visiting your app after logging in users will be redirect to this page if they don't already have a tenant when we register a new user uh this is not going to belong immediately to tenant so for that it's going to be redirect to the register page to set up a register page you will need to create create a new page class that extends register tenant this is a full page Livewire component and you can put this anywhere you want such as inside the app filament Pages tency register team so I suggest add inside the pages tency and register team let's copy this path here and I'm going to create that file inside the filament let's say new file paste that path hit enter and let's pass the PHP first and then I'm going to copy what we have in this example okay copy this and paste it right here so we have a get label method of form and to this form you may add any form components you want so with text input for the name and also the text input for the slack because we have also the slack on the team okay and now we need to tell filament to use this page and you can do this in the configuration file we need to chain tenant registration passing the registration team page okay so let's open the provider let's change the tenant registration passing the page which is register tee class okay let's save this also customizing the tenant registration page so you can override any method you want on the base registration page class to make it act as you want also you can add a tenant profile page a profile page will allow users to edit information about the tenant and to set up the profile page you need to create new page class that extends edit tenant profile this is a full page live component the same as the register class and you can put this and anywhere you want such as filament pages tency and let's copy this and open the filament pages tency and here create a new file with this name edit theme profile PHP say PHP here and let's copy what we have inside paste it and here we have a get label team profile and also a form and let's do the same on the form let's add also the text input for the slack let's save and you may add any form components also here on the form method and now we need to tell filament to use this page the same we have done with register we need to change the tenant profile passing the page okay so let's open the provider and chain uh tenant profile passing the page which is edit theam profile class okay so at this page here let's save this also here we have customizing the tenant Prof profile page you can overwrite any method you want on the base profile page class to make it act as you want and let's we have also building here but let's navigate on the configuring of the tenant relationship when creating and listing records associated with a tenant filament need access the two allant relationships for each resource an ownership relationship that is defined on the resource model class and a relationship on the tenant model class by default filament will attempt to gu the name of this relationship based on standard larel conventions for example if the tenant model is team it will look for a team relationship on the resource model class now uh we are going to use employees so employees is going to be the resource model class and it's going to look for a team relationship on the resource model class and let's do that let's open the model employee and create this relation public function theme and uh this is going to be belong belongs to so here let's return this belongs to team class but for that we need to modify also the database so let's go to the m creations and we need to go to the employees table and here let's copy this and duplicate and change this team ID save because now the employee is going to belong to the team uh also we need so let's open back we need to modify the name of the teams so the teams is going to be up here above the employees for that I'm going to change just the date to be 04 and now teams is up here let's close like this if the tant model is team it will look team for a team relation on the resource model class okay and if the resource model class is post it will look for a post relationship on the tenant model class on the team model is going to look for post but in this case in our case it's going to look for the employees so let's go to the team model and here first let's create the protected dollar sign fillable to be equal with the name and the slug okay then let's create the employees relationship so public function employees employees and this is going to be as many relationship and let's return don't assign this as many employee class okay uh also if I open the register team here we have this handled registration and let's import the team we have here do sign team team create the data because here we I'm going to handle up the data and then calling the team members but these members we don't have a members relationship so let's go and create that on the team method okay so we need to create this method and let's copy and say here B public function members which is going to be belong to many relationship and let's return this belongs to many user claps save okay now customizing the ownership relationship name so you can customize the name of the ownership used across all the resources at once using the ownership relationship argument on the tenant configuration method and here is the example let's copy this and let's go on the panel provider on the tenent method now let's pass this one ownership relationship which is going to be team not the owner on the employee we have Team here okay alternatively you can set the doar sign tenant ownership relationship name static property on the resource class but I'm going to use this one customizing the resource relationship name also you can do that and also here we have for the slack but let's go and let's see so far what we have if I refresh let's run the migrations and let's refresh again now because we are logged in here we have we redirected to the register team okay so we redirected here register team with a CH inputs name and the slack and here is the name and the slack so let's register a team and I'm going to register a spotty as a name of the team and spotty as a slack let's register the team and we are directed back here we have now the team spotty we have also the theme profile because we created this edit theme profile and let's navigate there so we can update the team let's say spotty team for example and the slck to be spotty team like this save changes refresh now we have spotty team here we can register a new team so let's go there and let's say for example L casts and also here I'm going to say laras like this register team and yeah we have laras and spoty team as you can see when we we in laracast and we are admin SL choose of the ID of the team if I change the spotty we have SL one here okay now let's see configuring the slack attribute and for that we need to say on the tenant method slack attribute to be slack let's copy this and let's navigate on the provider on the tenant method now let's add also to override the slack and if I save come here now and let's go to the dashboard for for not found because it's not going to found a slack one but if I refresh here we navigate the spotty Dash team the slack belongs to this teams and if I navigate laracast admin SL laracast now we have here okay now let's navigate to the employees and create new employee we can see here column not found on all column employees team ID and we added so let's see let's open again the database migration we added the team ID here but I think we need to Let's close all of them now and let's open the terminal and let's around the Artisan migr fresh and I'm going to say dash dash SE okay now let's just navigate at the SL admin with refresh the my creation and we redirect admin new so it's going to register team so let's register again spotty and the slack is going to be spotty register team we are here the spoty team here okay let's go to the employees and let's create a new employee so I'm going to say big pillar okay yeah we don't have also the department because count state and city we have generated with uh so let's go back let's come here let's navigate on the ceders database ceders so we created the country state and city and let's create two departments here right here I'm going to create two departments and let's say department or just want create and we need to add only the name name we s to be okay and let's R again the artisan make get fresh D Das seed refresh navig get back to admin party spot register the team go to the employees new employee fake Fielder select L here and also the date let's create I am we have a typo here employees not employees so let's open the team and say employee here save and now let's say create and employee created it let's let's go to the employees and yeah here it is now let's go and create a new team this is our team and I'm going to say laras again register team okay we are inside the laras team if I go to the employees we don't see employees here so let's create a new employee now for the L last thing okay let's say fake filler fill all the fields let's create and that's how we get now back we are on dast team we have this employee here with this name if I change the theme to Spot It and navigate the employees now we have this one this employee here okay now as you can see here we have two and we can we need to fix that also if I go to the country the country does not have a relationship name team so we need also to have a relationship and counter is going to be to to belong to the team but for now we just I wanted to show you on the employees I created this video because I had a comment on YouTube how to do that and for that I'm going to do this one now if you like such a video don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best Hello friends Tony here now in the previous video we worked with uh multi-tenancy and I used a team model for multitenancy so here we can list all the teams this user belongs to also we can update the team and we have also employees belonging to this team and here is showing so for example we are inside the spotty team and here is the employee with this name if I navigate to the laracast team got the employees now we have new one okay so for laras the name of the employee is ARA for the spoty is colum okay now in this video I'm going to work with the multip panels so I'm going to create a new panel this is going to be for the admin one and a new one I'm going to name it app and I'm going to move the multi tency on the app okay so for that let's open the vs code and first I'm going to open the terminal here and let's say now to create a new panel you can use uh make col filament Das panel command and give the name the unique name of the new pan panel so Artisan which is the alas for PHP artisan make colon filament Dash panel and give it the name so I'm going to name it app hit enter successfully created the app panel provider and also we have a warning here we've attempt to register the app panel provider in your config slappp HP file as a service provider but if you get an error you can manually register the service provider by adding it to the provider array so let's close this and let's open the uh config app.php here is the app panel provider so successfully is registered here let's close that now let's open the app and inside the providers filament we have two files right now the admin panel provider and the new one which is the app panel provider here we have a different ID app and I'm going to open here for the admin we have ID admin path admin and this is a default one for the app we have ID app and path app okay let's change the colors also so I'm going to copy the colors colors we have here and paste it right here for the primary I'm going to leave Amber I'm going to remove the Indigo here let's save now discover resources we have app path and filament SL up/ resources the same for Pages filament SL up/ pages and for widgets filament SL up/ widget so we have a different uh path from the admin panel so if I navigate down for admin panel we have just filament left resources instead for app panel we have filament SL up/ resources and then everything is the same so we have middleware and also alphaware the same we have here so now as I said I'm going to move the tenant inside the app not here because right now is inside the admin as you can see here so if I refresh nothing happened but let's move the tenant uh tenant registration and also the tenant profile so I'm going to cut them and move inside the app panel provider so right here I'm going to move it now on the admin panel provider just scroll up and move the remove the team register team and the edit team profile from here save and we need to import now inside the app panel provider so I'm going to say import here also import the register team but the register team is inside so let's see register team is inside the filament Pages then Y and edit team profile also register team profile let's create a new directory a new folder here inside the filament app and I'm going to move Pages inside the app and let's scroll down and let's import now the register team and also the edit team profile now if I see we have app filament pages and not register team yeah we need to also to change the name spaces H filament back slash app again and save the same on the register team so app filament up back slash pages teny okay let's close also close this one and add also the app not here but here so up backs slash and the same to this one okay now if I come here we are inside the admin and just navigate directly to the admin refresh now we don't have the multi- tency inside the admin we have only the employee management system management and user management if I navigate now to slash up because Us in the app panel provider for the path we have app so let's navigate there hit enter here is the app panel we have the multi tency here so select laras okay and select spotty good now if I log out here so let's say sign out we have this road login not defined because we need the chain also in the app panel provider the login method the same we have in the admin panel provider so login let's do the same here change the login method and let's save and let's come here and refresh now we have the login inside the app SL login and if I log in okay now let's uh here in the app panel I want so let's go back to the admin I want to have employees and also department so for example for the spoty team I'm going to create a department for what I want it's going to belong to the spotty team also for the laras team different department and also employees now for the employees we have add that so if I open the employees migration we have added the team ID here so let's copy this and let's do the same also on the department so here we have only the name but we need need to add also the team ID because the department also is going to belong to the team and let's close this also I'm going to close this one this one this one then let's navigate inside the app and models employee we have a relationship team method so public function team belongs to so we need to do the same name also on the department paste it here and let's import the bong store here and then let's navigate in the team model we have the employees and members we need to create also the relationship between the team and the Departments so let's say department and let's save so now we have the relationship we need to run the Artisan migrate Fresh D Dash seed okay and I think we have error in the database c yeah because we have this department create so let's remove that and let's save and let's run again good let's close this and also database CER close this one and close this one got we have 404 not found because we don't have the spotty but if I come here yeah register new team and let register uh spot it team also spotty team slug and yeah we are here and let's register a new one for laras just have here so we have Nast and spot very good now I want to have the resources here for the employees and department for that we need to create a new resource which is going to be inside the filament app resources okay because the app panel provider for the resources is going to look inside the filament app resources okay instead the admin is going to look just inside the filament resources so let's open the terminal and let's create a new resource artisan make colon filament Dash resource and I'm going to create the department first so Department Das Das view also to have the view hit enter which panel would you like to create this in inside up and the same let create for the employee hit enter app let's clean close and now if I go inside the filament up we have resources and inside the resources we have the employee resource and the department resource okay let's close this and let's open the browser if I refresh here we have the department and employees right now are empty because we need to fill them so for that what I'm going to do let's go inside the resources and department so the this is for the admin I'm going to copy the form here and let open this department which is inside the app and I'm going to paste inside the form for Department details name okay then the same I'm going to do for the table copy and paste it inside the table also and then the info list I'm going to copy this and paste it here so after the table method I'm going to paste this one we need to import the info list a section from the info list also the text entry and the model and I think we're okay so let's save this and let's see on the browser now we navigate departments new department and let's create a new department on Lara so I'm going to say for example inertia or inertia JS like this let's create created go back and here is the inertia JS now if I change the theme so let's go to spot team go to the Departments we don't have any let's create new here and let's say for example RS create and we have a r Department in just for the spot good let's do the same now for the employees I'm going to navigate inside the employee resource which is inside the admin and also open the employee inside the app and I'm going to copy also here the form paste it here copy columns inside the table okay also if you want you can copy the filters I'm going to skip this also for the delete action but I'm going to copy the info list and paste it and also here we need to import everything so import first the info list import the section from the info list import the text entry and what we have other yeah we need to import inside the form we have the set import from filament forms get also a collection from the illuminate support collection the state from the uh have model State than the city and I think we are okay with the Imports so just let's save and let's see on the browser if I refresh and navigate inside employees new employee yeah and let's uh use a fake Fielder but if I go to Department here we have inertia JS and roles but I want to list only the Departments belong to this team so the spotty team which is roads for that we need to come here and we need to filter the query the scope the query so we have count state ID we need all the countries yeah all the states all the cities but the department we need to filter that we have a relationship and let's do something like this uh I'm going to say here modify query using so let's use the modify query using and here I'm going to use a closure so FN we going to accept the Builder and we say thear sign query which is going to be query and here now we are going to say where belongs to and now we need to get the tenant so I'm going to use the filament get tenant meth method like this we are okay now if I save this and let's see inside the browser if I refresh yeah now we have only the roles belong to this te and let's use now fake Fielder here select the cont you want the state the city and the department belong to this team also we need to select the dates and let's say create now created go inside the employees here we have the new employee but if I change the team go to the employees we don't see any let's create new employee for the laracast fake filler choose the country state and city and now we have inside the Departments we have only the inertia GS because inertia GS belong to laracast and let's choose that and let's come here and select this and this and let's say create created go to the employees table we have only this one so flowers is the last name of the employee if I change the spotty and see employees is Stone the last name okay so this is how to create a new panel inside the filament and also scope the query when we creating a new employee scope the Departments that's it all about this video I hope you enjoy friends and don't forget if you like such a video subscribe to my channel share with your friends and see you in the next one all the best Hello friends Tony here so in the previous video we worked with multiple panels and we are inside app we are not logged in and we have redirected to the login page also if I go to the admin panel weired the login page but here we have admin SL login and if I navigate app Weir the app SL login now if I want to register a new user we don't have the register page and that's what I'm going to do in this video I want to create also the register page and I'm going to remove the admin login page so I'm going to have only the login page inside the app and also the app panel is going to be the default one so let us start and work with that I'm going to open first the app panel provider and then let's open the admin panel provider in here okay now the admin panel provider is a default one so I'm going to remove this also I want to remove the login inside the admin I want to have only one login page inside this panel and this one is going to be also a default one and uh I'm going to remove also from the admin the out midle okay let's save Here and Now inside the app I'm going to chain the registration method if I change that and save let's come here and take a look to the form here if I refresh now we have a new link sign up for a new account and if I click we navigate to the register page with the register for name email password and password confirmation if I navigate the admin users yeah we have this error because I removed the out middleware okay I'm going to leave it for now this one and let's go and create a new user I have made uh Artisan migrate fresh so we have only the user created from the database Cedar now let's create a new one let's say t test user with a test at test.com and the password and here password sign up and now let's register a new team let's say test team and test team sign up okay we are directed to the app very good here is the team we can create a new team or team profile here now what I want if I want to navigate the admin instead of go and change the url I want to have a link here on the users uh menu here we have the link to sign out I want also the link to navigate admin so for that let's go and I'm going to chain right here new method which is going to be the user menu items and here accept an array so let's add an array here and let's create a new item so we can say menu item and call the static make method and here I'm going to give it a label so let's say label here and I'm going to say admin also we can add a icon I'm going to paste this icon here and now we need also to add the URL so let's say URL and for the URL I'm going to say slash admin okay if I save this and let's see on the browser we are inside the app panel refresh if I click here we have the admin and if I click we navigate the admin dashboard now the same I want to have the link navigate to the app for that I'm going to do the same thing also inside the admin panel so let's copy that and let's paste it right here we need to import the user the menu items and here we say make now we to change the label from admin to be uh dashboard okay I'm going to leave the Aro icon the same and just change the url Tob SL app if I save this come here and refresh we are inside the app admin panel and yeah we have dashboard here let's click we navigate dashboard good now if I click here and as you can see here this is not clickable if you want you can also chain a new method so here we have a registration I'm going to chain the profile method and if I click here and refresh now as you can see the profile is a link if I click we na to the h Profile and we can change the name the email and also add in a new password also you can customize this page and I have create a video about that but if you want you can go to the filament documentation and read more inside the panel Builder users section okay one more thing here in this video is I want to show this admin link only if the user is admin right now this user is a test user so I want to hide from this one how to do that let's close now the admin panel provider and here when we have this menu make menu item make we can chain a new method here and say hidden or visible which accept Boolean closure and I'm going to add f f here a closure we going return bullion and I'm going to say if the authenticated user is admin is admin now we don't have this method so we we are going to create this one let's save and let's open the user module and let's create a new method here so just p public function is admin just return bullion and I'm going to say return if this email is triple equal to admin at example.com okay if I save this come here and refresh click with see that admin link let's sign out and let's sign in with admin example.com passing the password sign in create a new team so let's say laravel team and also lar slug okay now we are as admin and you can see we have the admin link and we can navigate here okay friends that's it all all about this video I hope you enjoy and don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best Hello friends Tony here so in the previous video we worked with the app panel we make this as a default one also we have the login and registration page only for the app panel not for the admin right now we are not logged in so here we if I go to the slash app we navigate to the login page but because we are not logged in if I navigate right now to the admin and yeah we have this error because we are not not protecting this route I removed the our middleware and that's what I'm going to do in this video I'm going to create I'm going first I'm going to add uh his admin column inside the users table and then create a new middleware where we are going to check first for if the user is authenticated and then to check if the user is admin if that is true it's going to be allowed to be here otherwise we are going to show the error page or we can redirect a new page okay so for that let's open the vs code and first I'm going to create I'm going to add that column to the user table so let's say artisan make migration and I'm going to say add is admin the users and I'm going to specify the table which is users hit enter and let's close this and let's open that P that file so is admin okay and I'm going to say here dollar sign table it's going to be a bullan and say is admin default is going to be false and I'm going to add this after the let's say after the email okay and also I'm going to say here the sign table drop the column and the column name is admin save close this one and let's open also the database Ceder here when we create a new user I'm going to make this user admin so I'm going to say that is admin to be true okay let's save let's close this now let's open the terminal and let's say AR on myr Fresh Das Dash see it hit enter okay now if I open the table plus and refresh yeah we have this user which is is admin to one good now let's go and create the middleware artisan make middleware and I'm going to name it verify is admin hit enter good let's close this and let's open that veryify is admin mware and here what I'm going to do is to check first if the user is authenticated so out user and if the out user is admin okay now let's open the user model and I'm going to add that is admin in the fillable so is admin and also I'm going to add that here just specify that the is admin is a Boolean like this save close this one and now if the out user if the user is authenticated and the authenticated user is admin which is can return true or false if that is true I'm going to return next request otherwise I'm going to say abort or let's say abort first abort with the 403 and I'm going to just add message here you are not allowed to access this page and let's close and let's save this now let's open the panel so the admin panel provider here we have middle Wares we removed the web middleware we removed the out middleware so let's register that mid L where we created which is verify is admin class and let's say now if I come here and refresh we are not logged in we have you are not allowed to access this page good if we navigate the app let's log in with admin example password sign in let's say let's say just admin here and now if I go the admin yeah we can access this page go to the dashboard and so on if I log out and let's uh create new account I'm going to say test test examp test at test.com and at the password let's sign up let's say test here now first we don't have that uh link and also we need to change that but let's navigate the admin like this and yeah here we have you are not allowed to access this page but instead of saying you are not allowed to access this page I'm going to redirect so let's open this and instead of ab boarding I'm going to say return redirect the slash app like this and let's save now if I refresh here we are directed the app okay because we are not admin so just let's go admin yeah if I log out sign out and let's check here slash admin again and yeah we redirected the app log in very good now let's log in with admin okay we have this link but this link is let's open the app panel provider and here we have menu item make admin URL and visible if out user is admin and I think we have if I open the user model yeah we have this method but I'm going to remove this save close and now I'm going to check if the AL user his admin like this which is a bullion and it's going to return true or false and if I refresh now yeah we have the admin with Navigator got dashboard let's now if I go to the admin and if I sign out here yeah we direct to the app login let's say test at test.com add the password sign in we don't see that and also if I navigate to the admin we areir back okay friends that's it all about this video I hope you enjoy and don't forget if you like such a video subscribe to my channel Channel share with your friends and see you in the next one all the best Hello friends Tony here now this video is going to be the last video in this series I think I have covered all the basics you need to know to create a filament admin panel uh here we are in the app panel also we have a admin panel and in this video I'm going to talk about widgets I'm going to create widgets for the admin dashboard and also for the app that dashboard so we're going to have a different widgets for the app and different for the admin now let's uh go to the filament and you can read more so here we have in the filament documentation we have a section for widgets the widgets you can install as a separate package if you haven't installed the panel Builder or if you have installed panel Builder is automatically installed now you can go to the startat widgets and read more also for chart widgets and we have also a table widgets so if you go to panel we have also here a section for widgets and if you go also to getting started we have here uh widgets okay now filament widgets are components that display information on your dashboard especially statistics wiges are typically added to the default dashboard of the panel but you can add uh them to any page including resources now let's go here and let's start with startat widgets and I'm going to copy the command we need to create a widgets I'm copy that and and I'm going to paste that one I'm going to change the name to be starts admin overview hit enter enter again and I'm going to select for the admin panel and let's change this to Stats app overview and this one is going to be for the app panel okay let's close this and let's open now the admin overview widget and here let's go and see the example here we have an example button I'm going to go to widgets and starts overview widgets here we have the example with the hardcoded data and let's paste that in let's save this and let's see now on the browser we are in the stats admin overview so here is we are inside the app let's go to the admin and here is the widgets all hardcoded data now let's see also we can add a description and also icons so let's copy them and just update this with this one and see the difference yeah here we have also icon here and the description we can add a color and here we have the colors we want if we want to change the danger gray in for primary success and warning and if I copy this and paste it it's going to change the look to look better so if I refresh yeah you can see it's looking better now also you can add extra HTML attributes add in a chart as the start view so here we have this hardcoded chart and let's add it here and if I save and see on the browser now if I refresh yeah you we have something like this okay now let's go and change from the hardcoded to be from the database I'm going to say here first one let's display the users and here I'm going to say user model query and and I'm going to get count okay and right here I'm going to say all users from this website or all from the database yeah like this and let's copy this one and and paste it also in here and here I'm going to display the themes okay all thems from the database and also here we can do the same thing but just change the model to be teams okay paste that in change the model to be team model import that and also here let's add for the employees some I'm going add an employee model query count let's say here now you can customize how you like I'm going to say employees and also here I'm going to say all employees from the database let's save and let's refresh yeah we have users teams and employees as you can see see okay now let's go here and take a look to chart widgets let's copy the command and let's paste it on the terminal I'm going to clean this and paste that in just change the name to say uh let's say employee ad me chart hit enter is going to be for the admin panel and let's liap the bar chart but we can change it later this I'm going to create one more for the users users user admin chart for the admin panel bar chart okay let's close this and now uh first of all I'm going to copy this one and let's open now the app wiget and here I'm going to paste this one let's close this and now on the admin if we go to the dashboard what I want to display I want to display not the teams I want to display employees I want to display here uh departments but departments belong to this tenant because here we select the tenant we are in the admin tenant and I want to display only the Departments for this tenant so let's say here uh Department model and employee here Alo let's say let's import the employee and for the users I want to display only the users belong to this uh tenant for that we are going to say not user query count but I'm going to say a team and I'm going to find the team and use the filament get tenant first so we get the team and I'm going to call the members and get the account now if I save so in the team we have a members method for the users belong to that team and I'm going to display the account let's save this and let's yeah here we have we have users we have two users belonging to the team departments for and employee 7 if I change the tenant B pgs we have one user four departments seven employees and yeah we need to change also the department and the employee not just get the query count okay so for that we're going to say query and chain the where belong to and get the the tenant of filament get tenant and let's add the same also on the employee if I save and come here and refresh now we have six employees for the bgs and three departments if I choose laravel one user zero departments and zero employees admin one employee one department and two users now let's work with the other widgets which we have here employee admin widgets and if we go on the chart widgets here we have the example with the hardcoded data and just let's show you how it's going to look if we pass that hardcoded data here and we are inside the employee admin chart so we navigate we need to navigate admin and yeah here is the chart we also have the chart for the user but let's focus on this one and this is now hardcoded if you want you can go here and available chart type so let's go to the chartjs and here we have chart types we have bar bubble line chart so how it's going to look a bar chart it's going to look like this uh bubble chart is going to look like this and what you like I prefer to use the line chart so here we can change the get type to be line and if I save and see now if I refresh yeah it's going to look something like this and I prefer this one also we can change the color so here we have you can customize the color of the chart data by setting the dollar sign color property the what color you like so let's copy this and paste it up here and also I'm going to say here not just chart but employee chart like this and now the color is info but I want a warning color like this save and let's see on the browser now if I refresh yeah we have a warning color and also employees chart here now if I come here yeah we can add the background and the Border color so we can change the colors there for them but here we have generating CH chart data from an eloquence model and you need to install this package I have installed that so you can go to documentation and just run this command here and then let's copy now this code and replace the hardcoded with that one now here we need to import the trend now the model is uh employee it's going to be employee because we are in the employee admin chart and with a change between the start of month and and also end of month it's going to be and here we to say per day okay also import the trend value and not block post but this is going to be employees let's save and let's see now on the browser what we have if I refresh yeah employee chart and here is the employees for this month from 1 to 29 okay now let's do the same for the user admin chart so let's replace this with this one import the trend import the trend value here I'm going to say not employees but users uh also the model is going to be a user model and import that and here I'm going to say users chart and let's save this come here and refresh and yeah here is we have users chart but this is a bar chart and I'm going to leave this bar chart and this is a line chart but just I want to sort to change the sort and if you go to form Builder uh dashboard here here we have available widgets start chart and table widgets but here we have also the sting widgets each widget class contain a sort property that may be used to change its order on the page so let's copy this now and let's say for example the employee chart or the user chart first is going to be number two for sorting and employee I'm going to make that number three let's save and let's see on the browser now if I refresh yeah this is number two number three number one is going to be this okay let's also do the same for the table let's create a table widgets and let's copy this one open the terminal let's clean and let's paste that in now in setad of latest orders I'm going to say latest uh employees and let's say latest admin employees table is going to be for the admin okay now let's open that lat admin employees table here now we need to Define first the query so I'm going to say employee query and also here I'm going to change the default sort to be the created add is going to be desk of course and let's add columns here so I'm going to just paste what columns I want to display just a country name first name and last name let's save and let's see now on the browser yeah here it is okay now I want this to be at the end and I want to take this a full width so we can add let's go here and copy this one latest admin employee so instead of three this is going to be four at the Sorting so if I refresh yeah now here is a table but also I want to take the full width for that we can uh customize the width and here we have an example let's copy that and paste it also that one in here let's save and let's refresh yeah now it's taken the full WID also you can change here the home many you want to display now that's it for the admin area okay I think we are good and for the app widgets we have only the start widgets so let's go let's open the terminal and let's create the latest app employees table this is going to be for the app and also I'm going to create employee app admin chart not admin but here we going to say employee app chart or the app panel this is going to be a line chart and I think we are okay so with the stats we are good let's go and dashboard yeah table query we need to work also let's close this and I'm going to copy what we have in here and place in the latest app employ table right here so paste it here we need to import the employee but the empl query is going to be now where belongs to and here we need to add filament get tenant okay this is going to be not sort three four but it's going to be three because we're not going to have a users chart now let's go to the employee admin chart and paste copy what we have here and with to paste inside the employee we have okay okay we need to import the trend okay we need to import the trend value and what we need is here we have Trend model and we're going to get all the employees so if I save this and refresh employee not found we need to import this also and refresh yeah we have table which is taking all the full width so we don't need that so let me just close all and I'm going to open the latest employee here we have full WID I don't want to take this a full width so let's refresh now and yeah here we have latest app employees we have the employee chart here but uh I don't want to get all the emplo so if I change the tenant to beel if we have employee chart but the employees count is zero so we get all the employees we need only the emplo belong to that query so let me just copy this one here and let's open the employee here instead instead of passing the trend model we can say Trend query okay and here we're going to pass query and where belongs to filament get tenant import the filament now if I save this and come here as you can see take a look to this one refresh yeah zero employees zero here but if we change the tenant for example VJs here we have six m emplo and we have also a different chart and we have here six and let's say five yeah I think more okay and that's it all about this video friends I hope you enjoy and don't forget if you like such a video subscribe to my channel like the video share with your friends and see you in the next one all the best

Channel: Code With Tony

Views: 39,516

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, filamentPHP v3, filamentPHP, laravel 10, filament tutorial, Laravel filament, laravel filament php, laravel filamentPHP tutorial, Filament v3 tutorial, master Laravel filamentPHP, learn, learn Laravel Filament admin panel, laravel admin panel, Laravel models and migrations, laravel multi-tenancy

Id: 6c4jVLWmDYU

Length: 251min 29sec (15089 seconds)

Published: Fri Sep 29 2023