Leave Management App : Full Stack | Beginners

greetings ladies and gentlemen welcome back to my channel once again this is tar here and I am excited again to present to you another application that we're going to be building together so that's the nice thing with this channel we build real world examples of applications right so this application you can actually use it in let's say your s that you're building or your startup right so I'm going to show you the core features of a leavea management app okay or rather a vacation right a management application or we can actually basically call it an employee uh management uh application or employee portal right so the main focus we're going to be focusing is actually administering leaves on this particular application going to be building right our application is going to have three user roles number one the administrator number two the regular user number three the moderator right uh you can actually scale it up this application that's the nice thing with it right so I would like you to build with me um if you have any questions go on my repo uh just submit an issue there then we can be able to tackle it together right the whole idea is actually for us to learn together right if you see some mistakes that needs to be corrected just you know uh send me a message or write on this video you can actually write a question in the comments or a suggestion in the comments so that all of us we can learn together right so let's take a look at our application there it is with the administrator dashboard that we're looking at right now and also I have a regular user dashboard right so you can see the regular user dashboard does not have you know a lot of um what do you call it a lot of routes here right so same applies on the um Side Bar there's no lot of uh routes here right it's just two routes exactly that's it then the administrator dashboard has got all these routes here right so let's take a look at the administration dashboard for now first of all you have a calendar that you can see here right so I can you know choose which dates I want to see for example we in January right today is the 9th where I'm actually recording this video right the 9th of January you can see it's actually highlighted in blue right H and if I over on other days you can just see the background is just black but there's also a special highlighting on particular days which is actually the eighth for example right you can see if I over on it you can see it shows me a two tip and it shows me the details of you know what's happening on that particular date right so these are actually events right so you can put all events that you want to see here for example if a a person has got a birthday or if a person is on vacation you can actually show them here right so all of that we're going to implement it together right this is the first version we are building together we're going to uh scale it up we're going to expand it in the upcoming tutorials where for example Implement you know the notification side of things or maybe when you go to the dashboard we can actually be able to you know export data right so for now let's look at the core features the core features this is data presented here you can actually see the current year balances as well as the calendar right and the type of the you know leaves that you can actually be able to see here right if we navigate to the dashboard which read the dashboard right you can be able to see the totals right so these are the totals of you know whatever you want to get from the database right for example how many users you have events and also you can be able to see a calendar of at least two months from the current you know uh month where we are right so on version two we Implement a feature to actually download reports right but we're not going to do it in this um uh in this particular you know tutorial we're going to be doing it in the next one if we have get to balances right on this route that says balances here you can actually be able to see each users current credits Uh current uh used leaves and the available you know credits right so you can see the current year is 2024 there was also a balance for the year 2023 right so that's it we have all our types of lives here annual Family Health maternity depending on your organization right or depending on your country on the type of list that you have right so you can actually be able to edit like like for example there's a calculation somewhere you know in terms of the you know credits for a particular user as an administrator you can actually be able to come and edit here can make your edits here right so let's just try to maybe put these unpaid to maybe um 10 right for example and we hit submit right let's wait for it right while we're waiting for that to work on the background ladies and Gentlemen please subscribe to my Channel all right you can see edit successful here and uh let's see if those unused have been updated right uh yes it's actually updated uh which one were we editing I think we were editing the first one here right okay so you can see the used and paid which actually used is six right okay so that is the balances then if we take a look at the leaves actually we go this route here that says leaves right we click on it we actually be able to see as an administrator all the leaves for everyone right for everyone in the organization like for example you can see here this particular User it's approved and the request or note this is what they were saying and also you know when was this updated right and also the um uh administrator or moderator note will be able to be sh here right but if that particular status of a certain leave is maybe in moderation or pending you'll be able able still to edit it right you be able to make a decision here like for example let's just edit this particular one right here let's click here and say uh approved right and click submit right so while we waiting for that to happen edit successful uh and which one was it uh I think yeah there it is it's updated you can see the edit node is gone right there we are and it's less than a minute ago right uh and also so it tells us who is actually edited that so these are the whole leaves for everyone right yeah so that's basically it and if we go to the users route right on the users route we are able to see everyone who has been allowed access onto our platform right or everyone who is logged in we can actually be able to edit their details for example if you want to edit a phone number if you want to edit the department where they are or maybe their title is changed you able to do that and also be able to change the role right we're able to do that and also if a new user is actually came on to a platform or it's a new year we actually be able to add credits right so for example here let's add some random credits and see what happens with this particular user right just say zero then the rest we just leave them like that let's hit submit right I think there's going to be an error because there is a current uh credits for this year which actually there we go it says credit for this current period already exists so it means credit for 2024 already exists for this user then it fails right then it shows a nice two tip as you can see on top right then the final route is basically where you can add your settings right so I just only added one you know type of setting here you can add as many settings as you want on your application for for this one is actually the events right so for the event side of things let's say for example we want to put an event here we just going to say blah blah blah blah that's the name of the event and the description is just some random words and the date going to be maybe uh in February on the 22nd of February right and let's click submit right once you click submit if everything goes well it say event added right once that is done then if we are able to scroll down on our events here we'll be able to see that particular event which has been added right then it should actually show on our calendar right that's the nice thing that we have implemented let's go to our calendar and be able to show that right it goes on the portal route right there's a nice loader as you can see as well right so let's go to February 22 you can see there is the event that we added right so this is the applicational building ladies and gentlemen you can also tole dark mode right you can see nice dark mode that you can see here right um and for me it actually shows nicely when I actually view all the leaves see beautiful beautiful ladies and gentlemen beautiful as you can see here right it's got these nice Pages here that you can see right okay let's just try to do something to apply for a leaf right so to apply for a leave you select the Le type if it's an annual select annual then you select a date I'm going to select the 10th of maybe let's say January the 10th of January to the of January so these are basically 1 2 3 days right then I'm just going to say some random words here let's see what happens let's click submit right let's wait for it to update the right it's kind of slow cuz I'm using my you know Local Host here it says the leave entry already exist it means this particular user actually applied for the very same dates before right so it means that leave won't go through into the database right but if you select some different dates let's say maybe it's the 25th all the way to the 25th for example just like that let's click submit it says leave submitted right it went through right then let's go and see the state of those leaves right that particular leave that has been submitted you can see it there it is right remember I selected from the 25th to the 25th so there's a calculation on the number of days on the back end of how many days this person is actually taking right basically like that so that's it ladies and gentlemen so you can log in you log out as well right so let's just you can either log out from here or else you can just log out from this particular button here then you're logged out right so if you are logged out you be directed to a login route right where you can actually sign in with Google again so that's the application ladies and Gentlemen let's go ahead and create this let's quickly take a look at the Tex that we'll be using on our application ladies and gentlemen right so we'll be using nextjs so that's the react framework right it's easy to you know follow along in terms of uh installation right so just go to the dogs installation guide straightforward how you should do it right and for the database we'll be using post SQL right if you do have a local installation on your machine kindly go ahead and download install U you know post on your local machine but if you're familiar with doer you can just use doer to have an instance of postp running on your local machine as well right and also for authentication going to be using next o right for me it's easy to use it's you know customizable that's why I like it so be using that for authentication right and also when we are talking about authentication I'm going to be using you know Google signing as I shown you you know earlier on when you were doing you know the log using Google right so you need to have credentials you need to have access to the console Cloud right where you can create credentials here for your application for mine it's now just called Web application or web client one just simply as that right okay and for the UI we're going to be using a beautiful UI for our application CN UI right and specifically we're going to be looking at the next JS you know implementation side of things right and for styling I'm going to be using tnd CSS right and for you know writing our you know SQL queries right I'm going to be using uh Prisma orm that's going to take care of you know SQL on the back sides you know of things right and the programming language using typescript so here they say typescript is just JavaScript with syntax you know for types right so so if you are good with JavaScript you don't need to worry about using tapescript you can follow along and you know you can get uh you know everything going on well right we're not going to be using complex types here right and for the package manager for myself I'm going to Simply use Yan surprisingly they've got a new documentation right so but I'm going to be using Yan right so go ahead and create a project on your local machine all right so for those ones who don't want know to complicate things they just want to follow along the tutorial just go to my repo on this branch that says St clone that Branch right so to clone that Branch it's you know basically you can follow this tutorial it shows you how to clone that specific Branch so what I've done on that specific branch is that I've just cleaned you know unnecessary files and I've you know made everything ready for you to start right so one thing I've done especially on the global. CCS file is that I've put uh you know um what going to use our theme kind of what going to be used so let me show you what I'm trying to talk about if we go back to our UI sh UI here right if you go here right and let's go to themes right select themes here see this code here and I like this blue uh color here I like it that's the one we're going to be using for application right so I just selected that color if you want to select a different color you can select a different color and just say copy code right so this code that's the one that I copied and I actually came into my global. CSS then I pasted it right here up to this level up to this level right then I just also tweaked my body right I need to make sure like I'm using this font here it's called L right font family menro right and I also imported that from you know Google phones this uh particular uh URL here right so that's it go ahead and clone it and um just run you know just tape y to install uh the packages here right cool so after running my development server this is what I have right so this is the one that we completed one right and this is the current one that I'm now working on right okay so what we're going to be doing this time around for the sake of time I'm not going to worry much about you know explaining the Tailwind CSS or The Styling side of things right I'm just going to explain quickly my logic what I'm thinking about why because um in terms of design people have got different taste so you can all make your own different design right so let's not focus mainly on the design let's FOC Focus mainly on the logic behind and also the functionality of the application right so most of the code that I'm going to be populating here is going to be actually copy and paste code right but in terms of the functions and the functionality or where I feel like uh there's need for explanation terms of styling I'll quickly explain that right so let's quickly go ahead and create now our you know home component right so we need uh to show or um um the login page or the landing page right so let's quickly go ahead and do that right right for a start this is what we have so this is my file structure currently I've got the app directory and the components directory here right so what we can do is that in the app directory right that's where we going to have our routes there right okay so I've created the login route so the login route I've ini isize that route with page. TSX right so inside the page. TSX there is a component called all component right so we don't need this import here let me remove it so we need this o component right so this o component is actually inside the components folder under the sub folder code other right yeah right so my common components I'm going to put them here but the other components that I don't really use that much throughout the application I put them here right so here what I just did I've created an O component so this is how the O component is right so please kindly take note of uh the code that's here The Styling right so I'm not going to worry much about this styling you can see it's just a div right that's got the height and everything is just centered right and because the name of our application is in H1 here right and also some P tags here but I've also included an O form inside here which is actually basically this o form here right so if you are a beginner I encourage you to actually type this code out see how it works right type it out see how it works you can change it to your own liking as well right so let's not worry much about me explaining or typing you know bit by bit to say MX Auto Flex colum no let me not worry about that that's why you are learning you have the documentation for you right tell CS right okay right so the O form this is my o form that I have here right on my o form it's a client component right we're going to find out later on why is it a client component and this is the styling that's there as well right please take note that I've imported a button so this button I've imported it so this is what we're using now sh CI right so what I just did is just to basically go on the documentation for short to end right and I've just uh you know imported this right so I'm using Yan I've selected Yan once I've selected that then I come to my project on my project here then I just paste that command here right so I just paste that command here like that once I past that command if you don't have H A UI you know sub folder inside components uh it will be automatically created right so this UI sub folder inside comp components is basically for shn UI right okay so that's the button that I imported here right so inside that button inside of it there's actually another component called icons. Google you know uh that component and we are actually getting it from um my icons uh uh sub component if I can say right so it's just exporting all these components these SVG you know uh type of U you know um Tex if I can say right so if you want to have more svgs you can just basically come and follow this part in if you want to have Twitter you can just say Twitter then put props icon props here right then make sure you just put your SVG for Twitter right so this is for scalability purposes so that's why we are having um those um you know um svgs ins this particular icons. TSX component right so later on we're going to be using react icons right we're going to be using react icons but just in case you want to use svgs this is how you can do it right okay so that's basically it then once I'm done creating my o component I've imported o form here right once I I'm done creating that then in the login page I import it here here right as well as on the landing page I've also imported here there's a reason why I've done that and we going to show in the next uh uh in the next slide uh why I've done that right that has to do with our authentication right so let's quickly go ahead now and see how application looks uh currently right so you see I'm on the route here this is how it looks right this is the all component that I've created right then if we also navate to the login route we should also see the same component so we on the login route we seeing the same component as well right so that's basically where we are right so let's move to the next step The Next Step actually has to do with actually implementing um authentication right so let's go ahead and do that so for authentication we're going to be using next on as I explained right so in particular we're going to be using the Prisma adapter so go ahead and click Prisma and you are taken to this uh page here right so these are the packages that you need I mean the dependencies that we need we need the Prisma client and the O Prisma adapter as well right but you're going to add Prisma as a de dependance right so what you can do quickly on your code is this right quickly go ahead and open your editor right and add as a dependency add Prisma as a dependency right right so once uh Prisma has been added as a Dev dependency you should show in your um you know package.json as a de dependency just down here just like that right and once that is done what we need to do is actually to initialize Prisma right we need to initialize Prisma here on our uh local machine right um while that dependent is actually loading like that I also um would like you to actually open your postle right so if you have a postle database quickly go ahead and open um it comes post actually comes with um a GOI right so which is called PG admin right so you can quickly and easily you know um create a database or delete a database uh using that uh GUI right okay so let's follow the documentation of Prisma and see how we can uh to a quick start right so we have actually installed Prisma right then the next thing what we need to do is actually to initialize Prisma on our local machine right so let's do that and see how we can do it so you can just use this command here right um Prisma init right let me just maximize my screen Prisma Yan Prisma I'm using Yan if you're using um npm you can just npx Prisma in it right the data source we're going to use post SEC database right so instead of saying site we're going to be using post SEC right and let's press enter once we press enter we should be able to see a folder right which is automatically generated for us here right there it is there it is we've got this folder inside there a um Prisma schema uh file inside it looks like that right and also if you don't a do end file it's actually automatically created for you right okay so what we want to do right now quickly I want to add that M file in my git ignore right so that I don't push my uh files to GitHub right my secrets to GitHub right so let's just edit just like that click save right so we don't have to push it up right so once that is out of the way the next step we need to do is actually now to create a a database right so let me see if my post gr is been initialized right okay it's saying okay I'm going to fix that quickly right uh right let me see quickly let me fix that right so once that is fixing on the background and we also need to start with our schema right we need to create our schema and that's the most uh important task on any application right like making your schema for your database right so let's quickly go ahead and do that as well as we are waiting for our uh post G to quickly um you know sort itself out here right if you haven't installed these other dependencies as well like the Prisma client and the O uh Prisma adapter please go ahead and do that right so basically what we're doing we actually following you know this guideline according to all the CH or next uh um documentation here right so we we add these dependencies and we're going to do this later on right so right now we would like to attend to this schema. Prisma file right but before we do that I now have my uh PG admin running here so I can be able to interact with my database right so I'm using post 16 right so what I would like to do is just to create a database right so I just right click here and say create and create a database right so I'm just going to say spanner YT that's the name of the database and this is the owner right so when I created my when I installed my postc I just leave it to default user right okay let's click save right so did you create a database um then there is the database right then let's go back now to our code editor our code editor um in the M file M file right we actually guided on how we can have our URL string right how we can actually uh create one so I've created my database the user is called procris this is my password right and it's running on Local Host Port 4 5433 right it might be 5432 on yours right so make sure you use 5432 on your um local machine and put the name of the database you created and just say schema goes to public right so I'm going to deactivate this cuz we don't need it right okay so that's fine so let's now deal with this uh file here right schema. Prisma right so according to next o or rather auth CH this is the guideline that they tell us to use right so you need to use at least Prisma 2.2 6.0 right and this is the guideline they show us uh they've got the model for an account here right and um session right and also the user and also the verification right so I've done that for you already right so I'm just going to populate the code that going to using I mean the modules uh or the schema Prisma schema would need to be using in this particular application right so let me just quickly populate it in our code editor right right so everything else we leave it like that on top and we need to have this schema here right so let me minimize this so that you can see clearly right so I have modified um so I I've modified the user model right the user model and the rest of the other models I've just created uh on my side right so let's take a look at this uh code here that we have right so this account is just what we got from OJs or next o right so just leave it like that um then also the session exactly as well as the verification token exactly what we got from the uh next Jos document ition right but in terms of the user I've modified some of the fields here right like for example the RO right we're going to be having uh user rows so we going to having at least three user RS the user the admin or the moderator right so the way we do it say row it will be of a type row and the default is going to be user and this is an inam right this is an in make sure you make it uh like that right and also we're going to have on each and every user they going to have a manager right they report to they going to have a title and also we need a font from there right so just minimal minimal uh minimal U um fields that we're putting here right so just follow through uh the rest of the stuff will make sense later on right okay then we're going to beave leave types right so there Le types is just uh is it um a health leavea is it an annual leave or is it maternity leave so that's basically what this model is about so it's leave tab but when we edit it's going to have an ID right title then the values you're going to be a string an array of strings right so this is the default right then also the category and also the description right and we're going to also have the LEF so this is when someone applies for a leave and what fields are we really interested in in we're interested in the type of the leave the year when it's uh actually requested the start date end date right and also the dates the username the note the task link and all these other fields right we also need the moderator the moderator note the create Ed all these fields we need them right okay so this is very important when you're actually designing your um your database right it's very important to know which Fields you exactly need in your application or rather in your organization right so for this tutorial we only need these right and the nice thing with using an orm is that you can easily um scale up right you can easily add other fields and man manipulate your database right okay so the next model we're going to need is called balances right so the balances is actually the credits right you know in an organ ganization each and every year you are given credits like an annual credit can be given like something like 20 days depending on the country where you are or depending on your organization right or so those credits they actually aligned with the type of um leaves that you have or type of uh vacation that you have in your organization or country right but generally these are the ones you know that the world world actually use so I've just selected a few of them so it's 1 2 3 4 5 6 7 right so it's going to be paternity family maternity study health and annual leave right so those balances as well there's going to be a relationship of a user right so each user right will have some balances right exactly right and also please take note of this particular says unpaid used that's the only one that does not have a credit and available right yes so I just left it like that going to use it for learning purposes then the last Model is actually the events the events is going to be have an ID title description start date and end date right so when I was doing a demo of the application I think you have seen me mentioning the balances the events and also the leave on applying for leave and actually editing the leave so please kindly take um a deep uh study a deep look on the schema how it's designed right otherwise if you know how it's designed and you are familiar with a Prisma just you know make sure your code is exactly as mine then we can go to the next stage right which is actually seeding our database right so make sure you have your code like this and let's go ahead and Seed our database right right right so before we run our migration to our database so the migration is just to sync our schema you know to create some columns uh to create some SQL queries that can be mapped to your database right so before we do that in your package.json under the scripts on the build I would like you to say Prisma generate and next build right so that help you to you know build the Prisma client or to generate the Prisma client before you run the build right yeah that's just a heck that I saw when I was you know debugging deployment on the you know in the production uh server right so once you're done with that uh let's take a look at our schema everything is fine then what we need to do now we now need to sync our schema to our database right so the command that we can run say Yan can say Yan if you're using npm just say you know npm uh you know um so we need to say npm uh or Yan Prisma right Yan Prisma uh migrate Dev right so this is the command that we going to run so that we can sync our schema to create migrations and that SQL will be synced to our database right so let's run that command okay let me Mark maximize here so that you can see so it's asking us for a name of the new migration I'm just going to say this one is uh let's say set up that's the name of the migration set up just like that hit enter right so it says your database is now in sync with your schema right then it actually run um uh it actually run um a Prisma generate to create the Prisma client right so so the Prisma client is now created under node modules on this location here right so everything went well meaning to say we have synced uh the SQ that's been created by uh our orm so this is the SQL that have been created by orm we don't actually need to write all this complex SQL our orm is actually handled that for us right so that out of the way let's verify if we have um um The Columns or the fields created in the database right so I'm going to create a new um terminal here right and this terminal what I would like to do would like to make use of the uh Prisma studio right so right let me just say Yan Prisma studio so this is a graphical user interface we can see on our browser and you can be able to look into uh the fields and Columns of our database right so if you navigate this um uh URL Here Local uh 5555 you'll be able to see um that your database yeah right okay right okay so things are getting ready let's wait for it okay so you can see the columns have been created right we have your account your balance your events your leave leave type session user verification so this is exactly what we have uh actually St out on our schema right so these are the tables will be created in our so the model actually is equivalent to a table which will be created on our database right so we have all this leave balances leave type user verification session that's exactly what what we have on our what on our database as can be shown by this uh GUI right exactly just like that and also let's verify the columns you can see the columns according to our account is just like that let's take a look at uh the balances right you can see the balances actually have all those uh fields we actually um indicated right so that's it once that is done let's move to the next stage right let's go ahead and now Implement our authentication right we're going to be using next o to do that right so before you proceed first of all just start with your NN file inside the end file make sure you have your Google client ID Google client secret next o secret uh J WT next o URL and the allow domain right so this Google client ID and client secrate you can then get them from Google client uh uh from the uh Google console right remember when I was doing a term of this uh web application I actually showed you where to get those right okay so once you get those come in your M file and paste them here make sure Nile is actually included in the git ignore right so that you don't push your secrets to GitHub right okay right and also you need uh next Au secrate jwg and URL so you need these when you are putting your application in production right so where can you get these um um Secrets here you can just simply uh make use of documentation so ladies and gentlemen most of the things that I'm speaking here I also refer you to the documentation that's where I actually get a lot of you know the code that I write here and also the direction right so if you go on to uh next o uh uh JH and um under this URL here you can see they actually tell you like you can use open SSL rant Bas for the two to generate a secret so it's just a random f a random string that you're generating here right okay so let's proceed okay so you need this package next o to be uh installed uh this dependence to be installed on your you know on your project so go ahead and run npm install next o or Y add next O So once you have that uh then we can move to the next step which is actually you to generate what you can actually generate uh a random string using that command there right that we got from next o just put it then you can see there's a random string that has been generated here right so once you have that uh then you can go now to the next step right so the next step is actually in our leap folder we have a leap folder in inside the lip folder we need to instantiate our Prisma client right so just write a file called Prisma TS then inside Prisma TS I've populated code for you already right so where did I get all this code here right there's a link that I put on top here right so this is a guideline a troubleshooting that some people have identified to make sure like there's only one instance of uh Prisma running on your project right so if you go to this uh link here you actually get this code right so it makes it possible for us to have one instance of Prisma running on our um project right okay so once you have that make sure you type it out right or you can just copy and paste from the completed project you have that c then the next stage is actually to have an o. TS file inside your leave folder right so just follow me what I'm going to be doing right so in o. TS file right we need this code here right for next o right we need this code for next oth right so where are we getting this code where am I getting this code right it's actually documentation right documentation getting started right or getting started here this is how you can create you know that particular file right according to next uh you know guidelines yeah right but for us now we're using next J uh nextjs you know 14 and we're making use of the app directory right so let's follow this guideline here that we have so this is the guideline we will be making use of Route handlers right so what we can do is just simply following here what they're saying under the app directory create two three more uh folders right so this API o and next O then inside you have a file called route. TS right so we've done that and up with have API we have O next o which is exactly like that then inside we've got routts right route. TS file right so let's go back again to our O.S right so in our O.S we just copy that code from next Mon and we are putting some other extra customization yeah according to our needs for this application right so obviously the provider is going to be Google right just making use of Google it's simple to use right and there are some of the dependencies that you have um imported here right and also types that we've imported right so we need our you know function called all options to be of the type next o uh options right and also we need need an adapter remember you're using Prisma your um orm so we need the types for that adapter yeah right so we just import that from next o adapters then we import next o options from next o right then we import Google Provider from next o provider SLG Google simply We are following the documentation here we are simply following the documentation exactly here what they're telling us here right exactly right and there's also uh how you can do it with typescript so that's basically what I'm following you can see here adapter adapter and this is where we're getting adapter simple as that right okay then you also need the secret right the secret here we're going to get it from um um from our n file right that random um string that we've generated we need it here then we need the pages um where we can direct users who are not logged in or maybe users who are trying to access our application we have a custom page called login right so what I've done on our application is that when you come on the landing page you have an option to sign in right but let's say for example you already signed in when you log out you'll be redirected to a login page right or when you're trying to access some uh resources you'll be directed to the login page right we'll see this in action right then we need the session strategy of JWT right so the JWT is very flexible for us to use you see it in action right so for example you can see here there actually errors right so we need a way of binding um the object that you get from next O next o when we sign in it only retains simple um um um fields from next o object right which is basically your name email or image right but for us we actually have uh user rows right so remember in our uh schema Prisma right we also have these rows that we are adding to the user object right so we need a way of binding what we get from next O then we can add to it the user row right so that's why using uh JWT to get the user R right okay then also they is a cack so these are functions that can actually help you to do extra things that you want to do with regards to signing in with regards to authentication so on our side what we need to do we need to have a restriction for example if a user email does not end with our domain email we can restrict that person right so for example at the moment I'm just allowing everyone who's got a Gmail account to log in right so if you have a domain specific uh email for example that the one that says maybe spanner you know.com right if you try to sign in with this one you won't be have you won't have access to application right so that's specifically what you're trying to do here okay exactly right okay so that's what we're trying to do here right then I said earlier on we need uh to bind the user row to the session uh to the object that we get from next o right but at the moment you can see there is actually um typescript is giving us errors say it does not exist on type name yeah this is the object that we get from uh next oath we get name uh we get email then image that those are the three things that we get so we need to add on top uh the user R right so the way we can do that is to Simply go on our rout um Home Route uh of our project here let's create a new folder right okay I need to do it actually inside outside here right let's create a new folder and let's call it types right types just like that then inside types let's create a new file called index let me just say globals globals DOD dots right so we're just defining you know a globally available uh kind of like object right so let me populate code quickly right I'm going to populate code here that I've already you know researched and C from somewhere else right okay so this is the implementation I put some you know uh notes there to just let you know what you're trying to do here right so the other thing that I can do let me um link you to the uh you know an article where I saw how to actually Implement that right so if you want to follow along as well you can go ahead and read that so I'm just going to put it right at the bottom here right right at the bottom here okay as well as you can get that documentation as well if if you want to implement uh row based access next o also gives you an idea of how you can do that right you can see here exactly right so now we know what it is that we're doing let me just populate that uh link as well here okay so what we doing we are binding to the object that we get from next o we're adding to it the row field right exactly so once we done that you can see now the errors are actually going on or or uh ts5 right let's check the user right there's the user right we'll see everything in action right so once that is done setting up we set up our database we set up our next O Let's now go to the API or next o and our route. TS file so inside there now we import this op all options that we've created here we import it here and we also need the next off from next o right then we just initialize everything like that so our next o is going to take as a parameter next o uh o options right then according to Route handlers how we do it we just export Handler is get is post right so where did I get that information you can actually get it yeah there it is yeah exactly just like that that's exactly what we're doing right the only difference is that me I've added all options here as a parameter right so once we have that out of the way let's actually start using our uh authentication um implementation here right okay now that we've written code for our o right there's a couple of things I just need to do you can see there's an error here on my you know terminal right so the reason is that I was running uh the completed project on local 3000 and I'm just trying to run this same application as on loc 3000 so what I've just done I just changed um my next URL to be exactly 3,000 and I sto that other uh project gets completed to run run on this port right okay so this is what I've done right in my op directory here right I've created two routes right so I've just put the first one in parenthesis the second one parenthesis is so to just make it uh you know easy to read that this is actually you know a a main route with other sub routes which going to come at the end um here right okay so I just quickly initialize dashboard which is directory and also dashboard which is a directory then inside this dashboard I've initialized that page and just call it a dashboard right same as applies to the portal right I've just called them like that portal as well right so this is what we want to do right um in our o form that we're importing in login page as well as the Home Route page here this o component right what you want to do in that old form which is in other yeah right we want to tweak the code inside and make sure like we have the sign in option right but before we have the sign in option there was a bug that have been experiencing such that when I come to my application right so that when I come to my application whether in production or development it will take me time to actually see this right or it will come as undefined right so so a simple solution that I had is actually to follow this um I think I I read it on one of these uh you know forums or you know um tutorials right what we need to do is actually to have a use state right such that uh when our component mounts or when our page mounts right we already get the provider list from what from next oath right so we already get these providers that provid us it's an object that we already get it then we save it in US state once we save it when the rest of the pop uh component mounts and gets displayed on the page we already have uh this object here right such that when we are trying to say sign in or continue with we already have what we are signing with with right okay so this is the code right you need to import Cent say get provider sign in from next orth react right and also just make sure you import these hooks from react right then you write here a use State then your use State Should exactly be like this right because of typescript you need actually to give um what kind of you know types you are giving this right then in the use effect you need a a function which is an asnc function that you actually called right so it's say get providers value so we're getting providers value and we are waiting for get providers from next or8 so once we get those we set them here then we get hold of them here these providers here then when you come here and say if providers are available from that object of providers right map them and give us the provider name that we want according to our next auth right so in this instance it will be actually uh Google right but if you have a lot of providers here you can just also put maybe Google then Google here in this button then you have another Buton that you can put Twitter or GitHub right so make sure your code is exactly like this I'm sure you know what this code is trying to do right it's trying to solve a bug that that uh whereby you sometimes you might have undefined here right so that's the reason and why you have this right so once you have that sorted out the next thing is actually to test so this is in the O form which is available on the home route as well as on the login page so let's go ahead our servers running here let's go ahead and test it out right if we continue with Google and click here we should be able to see an option to sign up with Google like that you can see right then you can select which email you want right so once that email is gone through you should be able to be directed to portal page cuz that's exactly what we said uh here on the o form to say the Callback function when you sign in the C function if everything is good be directed to the portal right so I we directed the portal let's see if we directed the portal there we are we directed the portal right exactly then we should be able to see an entry in our database as well of uh this user has been logged in right now okay so everything is going well the next part now we need to do is actually create our dashboard or portal so we need to start with the maybe the header as well as the sidebar so let's go ahead and do that all right let's make the header section top here as as the Side Bar right let's take a look at our completed project on our completed project we have head like this one right which is got an icon here a tu here as well as a bar and an a just like that there always a side bar with icons at the top here the brand logo as always in the bottom here right so let's make something like this right so remember I said I'm going going to you know spend much time explaining the CSS side of things The Styling side of things right you can just simply copy my code or you can make your own style right so I'll explain where it's really really important to explain you know the design side of things but otherwise we focusing more the functionality right so let's go to our code editor and see what we can do from there right so on our qu editor this is what we can do right make sure um you navigate to the um uh dashboard route so on your project make sure you navigate to the dashboard route right that's where we going to start right okay so let's go to our code editor now right so what I've done in um app directory SL dashboard directory I put a layout folder right I put a layout to TSX I mean the file layout. TSX file right so we need that to have a layout for the okay then in the components right components then the common folder I've put a container so we need a container so this is is just to make some styling custom stylings of our own right uh in terms of ping you know and also um in terms of putting margins as well right so in our container the code that we need is this code here right so make sure you have got this code tap it out right I just need uh these classes here right so that we have some nice pings and some nice manins right okay right so this is going to be a par component because it's taking children here right so once you have that container save the file then go to header. TSS right header TSX file you know header TSX file this is the code that you need right um according to me this is the code that you need right so pay attention to it and type it out if you have to right so you can see we have icons that we are using here right so instead of using the SV that we've been using previously I just prefer to use these icons that I get from react icons so for that uh quickly go ahead on to react icons uh URL or you know uh link right or website and actually make an installation of this dependences right just use y add react icons or if you're using npm just use npm right okay so we need those icons and also we need these components here from our Shi Nui right so we need the Avatar is where the drop out right so it's simple uh to do that from sh CN if you are making use of an avat component and you need it you just navigate to you know components um then on Avatar then just click on this command here if you're using Y just copy y then come back to your editor in your editor just paste that right just paste that command here then hit enter Then you have um that that uh component installed and you can see it in your um uh UI uh folder which is under components you can see this Avatar we also need drop down I've already edit that already right and I've imported that container that we created here right so that container we have it here it's a parent then the children will be this header right so this is the styling for my header right make sure you type it out exactly as you see it right if you want to follow me my styling right type it exactly as it is right don't worry about this D we going to f something later on right so type it out right all the way to drop down menu here then from there I'm going to scroll down so that you can see then you can type the rest of the Cod right after to here second so once you done H save then the next file we're going to focus on is the sidebar on the Side Bar this is the C that we need on the side right on the Side Bar is going to be hidden that side is going to be hidden on a smaller screen right and it's going to have a width of five right and I've also put the um you know tail wind like utilities or classes uh for track mode as well going to implement that later on right and also have a d that is got our image which is the brand image right you can just make use of M so for the brand image make sure you put a public folder on the rout of your directory of your project right make sure you have a public folder then inside you put that you know image there right once you have that and this code exactly as mine right then it save then make sure now in the layouts in the layouts we import everything there header and the sideb we put them like that so we just call this function DH layout right it's going to be a parent component where it takes in the children right make sure you have the styling exactly as mine as well as just put this tell CSS for the dark mode as well so once we have that um let's head over to our project and see what do we have is it now right right you can see this is what we have on our um project that we working on right now okay you can see there's a brand logo and this the Side Bar as well as this head just like that right okay let's move to the next step now want to put URL I mean um yeah you want to put links here as well to put an icon here right as well as to make sure like our user is logged in here right make sure like there's a dynamic user which is actually logged in here right so let's go ahead into that right on our completed project you can see there is an avat here there's this Bell icon and there is the some bger menu that you can t and show the sidebar drawer right and also you can see there's a log button here log out button as well as a two cl to two either dark um or or light mode right so we're going to implement these in a fly right so okay let's go ahead and create code so how can we show a user who Lo in here right so let's go into a text editor right I've done that for you what thing you need to do inside your Li folder create a file called session. TS right so session. TS we want to see who is currently logged in right so we're going to create a function called get current user and we going to say uh session a wait get save a session from right and you pass in the all options right so this will allow us to get the current loged in user right so quickly go ahead and type this um qu right it's straightforward right okay once you have that then you need actually to now modify the code in your dashboard layout so inside dashboard layout go and update the current code that you have go now and update it right so what you need to do in here uh you need to get the current user from the session right Li session right and um pass it as props to the side bar right as Al to the a header right and typescript obviously doesn't know like which type of user is this one right so we get types from our Prisma client right so let's get that user type from um Prisma client you can see the user type here if I over here you can see the kind of an object that the type that you get from the you know PR my client right so make sure you just update it otherwise if you have errors if you don't put a type here right it will give you an error kind of you see yeah right something like that so just make sure like you give the types the same way I did right okay so let me just uh re change it to the way it was right so once your layout um file is up updated the code the next step where you need to update uh your code the next file is actually your header right header TSX CU you can see it's receiving property here right so let's go to header so inside our header SX right we need a couple of things here right we need to have the Toler right they want to to dark or night right dark or light mode right as well as hello out buttton right you can see this is not a client component right it's a server component right so we just want to maintain it like that so some of the clients which are client components like these T and the log button we're going to just remove them and make them um client components separate from the header right okay so make sure you make an import of that right once you make an import you need the props you need to receive the props from the layout right and you destructure it here right then you will now have another component Side Bar draw that you're going to create soon right you're going to create soon but you can make an update now to your avat instead of having hardcoded text here make sure like you receive the image from what from the user object that you're getting right so update that it's a user um uh do image right a string make sure you make it a string because typescript does not know what kind of a you know type is it right okay then also the name as well here on the drop down menu make sure you just say user. name right when you're going to put URLs on the profile and support it you can do that on your own later on right and also the log out button and the TU that we got we just place them here right so from top to bottom for those who are updating their code this is where we are up to the side bar right up to the Side Bar here this is where we are right then I'm going to slide up again from there's the div right all the way to This n section right then you can just complete your code like that simple like that otherwise just go on my repo and copy completed code there right okay so once that is out of the way we need um to have the sidebar this sidebar so we need to create a component called sidebar drawer right so sidebar drawer so in sidebar draw what is it that we have sidebar draw we also have um um things that we are actually importing right that log out button we actually importing it here as well and we also have other components that we're importing like your admin routes moderator routes right but before I proceed here let's take um let's let's let's let's just fix this log out and two dark light uh components right so the log out Buton there it is it's a client component make sure we make it a client component right so we just have a button here and that button has got a child element which is like this icon that you get from R icons right okay then we are also importing this sign out uh uh method from next op right so when a person clicks that button right it's going to be logged out then he going to be redirected to the Home Route where they can be able to see an option to log in again right so that's basically what you're doing with the log out button okay make sure your code is updated according to mine then also the two go dark light so the T dark light what we need we need to have um a dependency installed which is is actually called next thems right so next them just go and say Yan next them right Yan next them your project once you add that then we can make use of it you can import a method called use them right can import it then we can say um we can make sure like the component is mounted yeah so we also need these works from react use effect as well and use right so when the component is mounted right when component is mounted if that is true um we now need uh to set um our our theme right we need to set our you know either dark or or light mode right so this is how we do it if the current thing is equals to the system right so we can either use the system uh preconfigured theme or we can select our own right so if it's to use the system use the system theme otherwise set a theme that we to set here right so how are we going to set your theme first of all let's take note if the current theme is equals to dark right let's show this opposite which is like like a sun right otherwise if it's light let's show an opposite which is like a moon right so that we can be able to know like uh how we can to around right so basically that's it so we using um uh like tenary operators here to just make sure like you know we make a distinction right based on the current thing that we are in right so this is code it's a client component as well make sure you import these icons from react icon is all right okay if the component is not mounted just return now right so update your code according to mine and this is the bottom part of the code right once that is taken care of to dark light as well as log out button we can go back now to the side drawer right so on the side drawer we actually receiving uh the props as well receiving the props where we receiving them from from the user from here from the user right so we receive those props properties now we need a distinction right when we were doing our schema design the user that we had was the regular user administrator as the moderator right so depending on a user um row right who's currently Lo in let's show different routes right so this is how I wrote my code here so right this is how I wrote my code I'm actually importing a sheet right from H shn right I'm importing that sheet as well that's the one that we're using we tole that's the one that shows right so if we tole here right right that that's the sheet that shows here that's the sheet that I'm talking about right so we have that we've imported you now know how to import from uh Shi right that's the one and inside it the documentation is there to show you how to actually do it so this is how I actually modified my code right so I'll will show this I as a trigger right inside the button I'll show this uh uh icon here then the content on the content now I need to have a na right on the na if the user row is equal to admin show it admin router the user user row is goal to the regular user so the user router and so for right and down um on on this sheet I'll actually show now the two dark light as well as the log out Buton right okay right so let's take a look at these routes how exactly are they are constructed where am I getting the information to display here right so you can see the render route function render routes function right it actually takes in the route it's either be it can either be an admin router or user router moderator router right you can see I'm actually importing these rots right I'm actually importing these roots from somewhere here right so I'm getting them from here from this file called routes. TSX so in r. TSX yeah there's a couple of other um um content here right but I'm just exporting just a router like this you see exporting cost admin route the title is cost portal the URL will lead you to this and it shows an icon right right same applies to the user route the user route you can see there's only two routes here and the moderator route is called the same routes is the administrator right so once you have that is routes right make sure you have exactly as my code take your time pause the video to copy right write it exactly like that once you have them like that then there's also this component called render out rather function right called render routes so what we are doing here we are making sure like we map over the routes cuz this is like an array right an array of objects you can see here it's an array of objects right so what we doing is that we're mapping over right we're mapping over that AR and we are returning a link right a link and he said the link there's also on top a twoti right there's also a twoti so there's the render icons router right this is only to show icons so I'm going to show you how that is going to work right it's going to only show icons like uh for example here right you see this side bar only show icons it doesn't show um the titles of this route right but if I over on it it shows a two tip so this is called render icon route but if I tell the Side Bar on top of showing the icon it also shows the T right exactly right so ladies and Gentlemen please take note like these are actually you know uh displayed at the bottom of each component right as well as here as well right so when you're doing your styling make sure it makes mine otherwise just follow my code and break things try things out and see how what works for you right so let's go again to explain our code so the render right icon now you you know what it is right then there's the render routes the render routes does not uh have two tip it only have a link which shows a ttler right so inside this is my styling that I have so each and every route um that we receive it's going to be a link and it shows an icon as well as a title so this is the code that I have here self explanatory I think this is clean code I'm even proud of myself as well I wrote understandable and is J code right okay so once you have that then in your sidebar drawer on the Side Bar what we are importing is the render routes not render icon routes we are importing the render routes right we just importing the render routes then on the Side Bar on the sidebar now that's where we are putting what render icon routes right so you can see this components sidebar and sidebar drawer right render icon routes so you can see now it looks exactly the same as the Side Bar it's only like this one is not a sheet but actually div right it's actually div here right and scope these um routes here right okay so that's self-explanatory so once you have that in the sidebar draw there right and you actually installed all the dependencies that is your next theme you updated the code right you also have um other components like your side bar drawer too dark light log out BTN right and also you make sure like you your sessions right and also there's a new function there right and you import the current user right so look please pay note um to how we are actually getting hold of this user right this is a server component so just on top here we need to modify our function to be a sync so that we can be able to await for the current user right once that is sorted out if everything goes well we should be able to see on our current working project you should be able to see this so this is the current users current log and this is the routes right and you can see also the sheet shows here right so we're making progress that's it right currently we've been working on the dashboard and we've just put the layer out imported all the necessary components here right but then we need to have the same layout that we have inside um the dashboard layout we need to have the same as well in our portal right cuz if you go on our portal right now as we stand on the project we're working on you just see this word called code portal right so we need to fix that so let's create a file code layout. TSX inside portal right this portal folder so let's create a file there we call it layout. TSX right then we just need exactly the same code that we get or the same code that we used in um in our dashboard layout right so we just need exactly the same code just like that okay but this time around we're going to say it's a portal layout right and as usual it's in a sync function we also make use of uh getting the user the current logged in user right so let's save that and we should be able to see some changes here right so you can just refresh for you to be able to see the changes here I'm not going to wait on the the changes so let's go ahead uh and discuss something else right so uh currently yeah you don't have an option to change you know a user role we haven't implemented that whether being it a regular user or an administrator or moderator right so what you can do you can just open maybe another terminal right here and just uh run your uh Yan Prisma studio so that you can be able to see the entries in your database right so if you done just like me if you can see Prisma Studio here you can just open a new tab which says users right users then you can just um make one of the users admin right the reason why I'm saying that is because you would like to be able to see the routes that pay to an administrator currently you can see what we just seeing here is for a regular user you can only see two routs right so we need to change that right so make sure once you're logged in just log out go to Prisma Studio change that particular user for example this one we make admin for now then click save changes right then we have to log in again with that particular user and uh we should log in as an administrator right okay so once we log in as an administrator we should be able to see all the routes I've logged in again as a an administrator this time around you can see this user has been changed to administrator right you can see I can see all these routes now right and everything is working well and our sheet is also working perfectly you can see all these other routes okay right so there are some things which going to be similar for both the administrator as well as the regular user you can see this route here as well as this route here it's also available for the regular user right so now let's now start working on the Banner section here the welcome Banner as well as the calendar right all right currently we are on the completed project as you can see there is this welcome Banner we just going to call it the welcome Banner right it shows the currently logged in user and their name and also on the right side there's actually a button that we if we click on it it shows us a dialogue just like that right then inside the dialogue there's options for us to um submit a leave application right so let's go ahead on the project we're working to um create this welcome Banner right so you can see on the route that you are it's actually on the portal so make sure you're on the portal route right say on the portal route let's open our code editor right so when you open our code editor there are a couple of things that we need to do first of all we need a reusable um dialog component right we're going to be using it on M multiple occasion so what we do is that under the app directory components common folder then inside there we just create um a file called dialog r. TSX right just like that then in the dialog repper we're going to be utilizing it in our welome Banner right okay so let's quickly go and populate the code for dialog rapper so I'm going to just simply populate code and explain right so this is our reusable um dialog component and obviously what we are doing we actually um installing that um component from sh CN right so let's go to our sh sh CN let's look for the dialogue there's the dialogue and this this the command line interface just click there if you're using like y like me just click on y to copy it then once you're done copying it then come to your code editor in your terminal then just paste it here and install the following package right on that's installed then you have all these packages here right and that component you can actually see it in the UI folder here right so this is automatically generated all right then we need the types I'm just going to put the types for our dialog component right so if you want to check the um basic um implementation of this component if you come here on the usage you can see actually if you have to check Maybe the code for this you can see you import um the necessary components right once you import them then you just return this simple function right so we want to do more to it on our side we want to make it reusable right so we just call it dialog repper and let's take our types obviously it's going to take in children right then there's going to be optional properties like your button title your title description and we going to have a bullion right um we want to make this um the Toler all right or rather the trigger to be either a button or simply an icon right so you'll see where we're going to be using an icon there will be instances we be using an icon right and also we have these optional items like your icon open which is a brilliant as well as a function which is called set open right right so just quickly go ahead and populate code type it exactly like that then you go to the dialog rapper you actually get in those properties here right those parameters or properties right those props then you have your dialog component like that then the trigger if the Buton is true then show a button otherwise show an icon right then in the dialogue content uh this is the width that you want we want it to have a maximum width of 425 pixels that that SS nicely on the page then we're going to have a description and also the children right so now that we're done with the dialog repper let's hit save then inside portal right portal route which is actually for Port route inside we're going to be putting our components just here on the um portal right route home right so let's go quickly create a welcome bner do T6 right go ahead and cck create that file and let's quickly populate the code here right so this is the code that you're populating that you need right let me just make a quick clean up all right okay I made a quick clean up so what we need is the compon container component and this is a reusable right remember it's reusable as well as the dialog reper it's reusable we also need a user type right for our types for the properties we need a user type then in that W Comer it's going to be ripped inside a container right then on the left side we just want to have um this uh h2 tag which is inside a div right so we just say div just five start so that it Flex on the start of the page then on the right side that's where we're going to have our dialog rapper right so remember dialog rapper needs the other properties like your Buton title your title description or either is it a button or is it an icon for for now it's actually a button right so let's go ahead and populate content like that once you're done you say export default welcome Banner so this is the code that we need right so from Top just make sure you WR type out that code exactly as it this right then I scroll down all the way here once you have that hit save right so this is for design purposes ladies and gentlemen I don't need to explain I don't need to type you know one by one these T CSS we just need the functionality right all right once you have the welcome Banner just like that that component then now go inside your page. TSX right which is inside the portal route okay go inside that uh page and we need to actually import the work compan here right let's go ahead and import the W combiner remember the W combiner takes in a property of a user right so let's make sure we actually give you the property of a user so you know where we get our user right from the session right from the Leb in the session file we just get the current user was actually logged in right so let's say con user CL a weit get current user and uh let's import that uh get current user function right and let's make this in a sync um uh component right for us to use a weight let's make it a sync right then let's give the properties to the user like that okay and make sure you import that user type from Prisma client just like that right okay if everything goes well right just like that make sure your code is exactly like that if everything goes well then if we have to check on our current project let's just refresh we should be able to see the welcome Banner just exactly as it shows here on the completed project right so we should be able to tole it and show this but ours we just have one component inside here right okay our page is fully loaded you can see actually says welcome the current user and this is actually a button with the title apply for leave if you click on it we see our dialogue component showing up and it just basically has the uh P tag which says high right okay so what we can do now before we proceed here let's just go ahead and create the calendar component right before we fix this let's create the calendar component here let us examine our calendar component on the completed project well the design is simple straightforward you can see here this is the current month right and it says today here I can actually even navigate to go to different months right like that just like that okay so this is a custom uh calendar if I can say we were taking advantage or using this uh package or dependence called um DJs right this so make sure you have it installed on your project right so just run npm inst OJs right so once you he that there are some of uh methods uh properties and some ways of manipulating our dates getting our dates and a way of displaying them so we're going to be making use of that um dependence extensively right on this project right okay so on the completed project you can see they actually days of the week here right so like from Sunday Monday all the way to Saturday right and you can see like the actually days this is the 31st of December like this is the previous month right okay so today there's actually an event on the completed project so it doesn't show um the highlighted yeah you know Blue Back background here right but you can see uh the previous days which are not today they actually there as well right okay and also the um forward days if I can say so they also highlighted here you can see the first of Feb right all the way to the 10th right so for you to come up with something like this it's s um if I can see it's also responsive right you can see it's also very responsive that c actually right it's also very responsive can you see just like that so we're going to create something like that but first of all before we do that we actually need a way of getting these days right getting these days and after getting these days we will be able to display them on a calendar right let's go to our code editor and actually start implementing this on our code editor here we are the thing that you need first of all is to create a calendar. TSX component inside portal right so go ahead and create that file right and also in the lib folder lib folder go ahead and create a file called get days. TS right so we need a way of getting previous days current days and the days which are here to come right we're going to making use of the DJ DJs package and we'll be using a lot of methods from there right so let's go ahead and populate some code inside here right so first of all let's go ahead and import this package here DJs From DJs right DJs right then let's uh create a function we're going to call it get days right so import it after import no after creating we just going to create this function right you say export con get days and it's going to take in um as parameters the month as well as the year but we're going to initialize these with the you know uh djs. Monon as well as year do uh uh days year is equals to days JS do year right so we're going to initialize them like that then in our function we need to get hold or to be able to know which one is the first day of the month as well as the last day of the month so remember using the methods from our package here right one way we can do that is possibly do something like this we can say first day of the month is equals to DJs dot year then inside um um year we actually receive a parameter here right which is the one we initialized here right so if you want to know how where did I get all this information if you go on the documentation and look on the ways of manipulating your days right you can play around them and at the end you'll be able to come up with something like that just like that right so this is how we're going to implement it I believe there are various ways of doing it right so we need to know the first day of the month as well as the last day of the month of this current month actually right all right so let's proceed so we will need a way of getting hold of previous days current days and the days which are yet to come so for that we need some form of a storage and as you know in JavaScript the simple and EAS easiest way is actually to have like an array so we're going to be putting everything in an array so let's initialize our array here just say const date array is equals to an empty array right we're going to be populating it then let's go ahead now we need the previous days which are not of this um which are part this month and perhaps uh last month right so this is just to get the previous days which are not today right we can get as many as we want right but for now let's just do get previous days I'm just going to comment here get previous days and I'm going to use a for Loop here right for Loop right let I to Zer I if I is less than first day of the month um then you need to increase here right so this is a way of getting the previous days right then what are we doing then we are saying inside our array let's get this previous days now right so in our array what we want to push is actually to push the day for today and also to know if it's the current month right okay just follow me everything will actually make sense when you actually implement it right okay right then first day of the month date is go first day of the month right where we get hold of the I and also the current month should not be true should be false right so that we can be able to get out of the previous days right just like that right so this is a way of us getting the previous days not of this month right okay or rather not of today right then we need now to get these current month days so we can use a full loate so let's get the current month days we can use a for loop again right I just populated it there right so I for now is not equals to zero it's going to be the first day of the month right remember we using dayj methods here right so this is a way of getting the first day of this month so if the first day of this month is less than or equal to last day of this month let's increase so it means we're getting all the days for this month right but inside we need to also check the current date after we've checked the current date then to our array what are we doing we are setting this current month to be true the date should be a current date right then today is going to be current date today we're going to format it to string right and make sure like we equate it to the DJs uh dot um to dat do dat string right okay it's going to make sense everything as you proceed right after getting the days for this month we also need to get the days for the upcoming um just a few days right from today right okay let's get the days ahead so let me populate this code here right so to get the days which are ahead depending on how many days you want and also this also um also informs you of uh what kind of a layout you want to see on your um UI right for me I'm going to say forward days I'm just going to say 42 minus the date array. length right okay so I'll explain why did I say 42 here and subtracted the DAT AR length right but after all at the end what we want to do we just want to retain that array that D array here right okay so there's a lot of um dat dot to dat dot to dat blah dot to string I've been saying here right let's just summarize what we trying to do in Simplicity we just want to know what is the this month current date and what is this month um what is the last day of this month the first day of this month and the last day of this month then we want to get out of days previous current and upcoming days right the previous days how many days do we need from today up to the previous day right we use this function here to get those days to get this month current days all of them whether they're 24 or 31 or 30 we use this function to do that right then the upcoming days we use this function to get that right so let me go to our UI when our completed project here right you see this UI is actually uniform in terms of how many rows are here 1 2 3 4 5 6 right so um the reason why I said 42 um on this particular code here let me go here on this particular for here it because I say 42 so that they can be able to match my UI in terms of uniformity right you can even put that here and try it out on your calendar you see how they going to display but we are not yet there right we're going to show we're going to come back here to explain again um this particular code here right in terms of the methods that we're using here right I recommend you to actually refer whenever you're typing refer to dat day JS package and see how we manipulating um the day JS package and making use of it methods right you can see here how to get the year how to how to get the month how to manipulate them just check how you can play around with this right okay so that it makes sense to you right okay let's assume assume now that we now have a way of actually getting the days previous current and upcoming days then let's ask now go to our calendar um component let's initialize this calendar component let's import everything that we need okay just going to say um con calendar right then let's maybe try to get hold of those um days right so what we just do let's import them and let's log them here right okay simply as that then obviously our calendar is not showing on the UI as yet because we need to import it in the page. TSX of what of the portal right so let's go ahead and import the calendar here right just like that okay let's hit save all right so when we come to our UI when you come to our UI on the current project we're working we should be able to see calendar here let's refresh so that we can be able to see calendar right so once you refresh that remember we logging in right we are logging um uh the the days that we going to get here right so you're going to get a weird object kind of or an array of objects right let's check on our code editor since we're making use of um server components we should be able to see something being logged in here right cuz this is a this is actually not a client component and also this is not a client component a server component so we should be able to see something being loged here right all right once our page is fully loaded you can see something being logged into the console here right so let's just take a look at this um this um array of object here right you can see here there's some you know random um uh details that we getting right for example you can say the year year actually then it says a month here is equal to one day is equ to 5 you know things like this right it says also current month is false false all right right so we are getting something right so this is basically what we get according to you know DJ's package right so let's go ahead and do some more workings right in our um Gat days. TS file we just need to get hold of other things as well so which other things am I talking about right let's go to the completed project on our completed project we have a way of getting days previous days like for example all these days are previous today is the 18th so all the rest of these days are previous days and the first up to the 10th this is fabb all these days are actually upcoming days and the current days they are these ones up to the 19th these are the current days so that was the function we were implementing right now to get days right then we also need a way of actually getting these levels on top here right getting these levels um on top here so without wasting much time what do I just like to do I just like to say those is actually you know days of the week right so I would just write a function called uh days of the week it's actually an array of levels like s Mt W TF s right and also we also need this you know label which is January February March all the way to December right so without wasting much time let me just populate that um code here it's not complicated so that's why we are doing copy and paste here right so we need those year okay so the days of the week strings so it's an ARA of strings as well as the the months it's actually AR of strings as well right let's hit save and this far we are done then we now have to work on displaying everything we have worked so far on our UI so let's go ahead and do that what we would like to do is actually to start with this section here which shows the month as well as um shows the word today here right and also it's got a nice blue uh blue background like that right so on our project we're working on let's go and work on that on our calendar. TSX file which inside the portal let's quickly go ahead and do this right so this is more of design so it's copy and paste if you know right we need to get hold of the container which is a reusable reusable component right let's go hold of that let's import it from our common um inside the components right okay let's import it like that then what we need to do is to get what day is it today and we set it up in a what in a form of state or we set it up in new state right so what is the current date let's use our package that we have installed earlier on right so once we know current date what we are going to do let's set state for it so we need to import you state right from react just like that and you put put current date right as a state right then let's proceed inside here I'm just going to populate code here and input the necessary um dependencies that we need here right okay let me just clean up everything and let's make this component a client component because we're using US state it works with what it works in a cent component right so once we done that remember we've checked what's the current day and we' have set state for it then what are we doing right we have got this nice design right that I've implemented for you right so it's a div you can see this is a div this just a div inside this container just like that inside this div these are the Tailwind um properties I mean tell you in CSS here right okay then we have have an H1 so this H1 now what is it doing we're getting hold of the months where do we get this months here in this file here right on that Loop we get that month so how are we doing it we're saying months then get today tot month right you can see we are heavily uh depending on what DJs right you can see on DJs where we have uh relying on it so we can do something like this right okay you can see if I over my mouse here it actually says today DJs do DJs right so if you really really go on the documentation you can see with methods you can use to manipulate so basically what I'm getting is the month so that's why I say dot month then I can say dot year to get the year as well right at the end what we're going to have is to have the month as well as the year right okay so let me just quickly hit save here it save and Let me refresh on our project we working on but while that's still loading let's go ahead and keep on explaining our code right so once we have that then we also need the left side or the right side of things so right so on the completed project the right side of things we need to show these arrows just like that and the word that says today here right so how can we do that let's see how we can do that so in this inner div here which is inside these are the Tailwind um CSS properties right so we need to show on the left side we need to show this icon then if you click on that what we are doing making use of our DJs package this is what we doing right these are the method that we are setting the day to be what the previous days see right so these are the methods that you can use from DJs right if I over my mouse you can see it accepts numbers from 0 to 11 if the range is exceeded it will bubble to the next year see so basically it's just making use of this package here that we're doing right and depending on the methods you can manipulate them to have the result that you're expecting right so that's what we're doing on the left side right then on the right side this is what we're doing as as well right this is what we doing on the right side right okay it says here as on my code if you click the H1 right you should be able to set the date to current date right so let's see how that can work right our page is fully loaded if I click here it takes me to the previous months previous months previous months if I click on today takes me back to the current month right so that's basically it let's go to the next stage now which is actually putting a calendar here let's examine our calendar so our calendar has got um this layout that you can see here it's got seven columns 1 2 3 4 5 6 7 so what's the best way for us to have this obviously with t CSS we can make use of the uh grid layout right so let's go to our code editor and try to implement that right on our code editor I just minimized this previous uh implementation that we did on top so let me just minimize it here like that then on here what we need is this kind of U um code right so this code let me just get hold of all the inputs that we need right I've just imported this class name here right okay right so I've imported it here remember it was created by sh CN when we installed Shard CN right okay so this is what we're working on right now this layout right so you can see it's a grid and it's got Columns of seven seven columns right okay now that it has got seven columns how we're going to style it in a way that is easy to read all right so you see there's a d that we have inside and that D has got a height of 10 which is basically 2.5 Rams right and and what you want to do is going to be a GRE and place a Content Center so you can check the TS and see what that what this this does right okay so what are we doing now we actually um mapping over our days right remember our get days um function here that we get from here it's called previous days current days and forward days right so it also takes in an input right here we actually initialized it here with month and um year right so here what are we doing right we need the month as well as the year right so what are we doing we're saying the month on this one should be basically be today do month and again we are making use of our day ja package right you can see there month are zero index dat so January is month zero right so if you go to DJs documentation you can learn more on how you can make use of the methods and how you can manipulate this right now at DJs if we map over we are mapping over and what we are mapping over is actually the date current month and today so basically this is what we have this object that we have here so it's an ARA where we can have current month the date and today right so that's what we are moving over here right so this is how we can implement it right and obviously if we are mapping over something in Array we need a key right so the key will be an index so the second parameter here will be an index just like that then the first parameter is actually D structured here into de current month or today right then in our H1 right this H1 where is that H1 what is that H1 H1 is basically this element here right so wherever there's a number inside that's our H1 so what are we doing in our H1 what we doing say if it's not the current month please make that text inside to be of this color text slate 400 but if it's today right make the background blue and make the text white so let's see we'll see when we load it here right we'll see when we load it here okay so for that let me just quickly save here and let me reload our project we're working on so while that is loading let me quickly go back again to keep on explaining right so if it's today make the background blue and the text white right then on this particular H1 it should be of same height same width we're going to give it a little bit of padding and it's going to be like a grid sort of right and all these other properties just like that right then inside now using our DJs package we are manipulating the date so what are we doing let me hover my caser here right it says get the date of the month right which is actually the numbers from 1 to 31 okay so from our date that we get from our array here if we implement this method that say date do date that method we actually get a number which either one or 31 right okay so everything that we're getting here right now it's either the current days previous days or the four days right okay and you also need to know what's the current month and and also what is the current day right otherwise we can just simply display the day today here right from the so our array has got actually um an object where you can have the date either for previous day today current month or the upcoming month right so once we have that let's head over to our project that we're working on there you see it say fully loaded and you can see when the day is today the background is blue and the text is white right I've also added some extra um Tailwind CSS just like if you over on it the background just turns too black right okay so that's it right so now what we need to do let's actually add those um labels here on top to indicate like this column is for Sunday Monday Tuesday Wednesday there just like that we need to implement it here and that's easy that's easy to implement so let's go to our code and see how we can Implement that right so we in this section we are done with this T here that shows our days right like numbers it shows our numbers right so your 1 31 2 you know depending on that day of the month so we done with that then the grid is grid column 7 right we can do the same as well in terms of getting the labels right it's simple straightforward how how we can do that right so we can basically make use of let me quickly get that code and put it just on top right please also take note of this section right and also of the twi CSS properties that we have here right then just below here I'm just going to paste this code right this code is is actually getting the days of the week so let's import them from the get days uh inside lib just like that right so the days of the week we're just mapping over the day and also let's take a second parameter which is optional which is index when you everwhere mapping on something we always need that Index right so that reactor knows which element is it manipulating at a particular Point time so we're just returning simply an H1 here and it's got a height of 10 and we give it all these other properties just like that right if we save and refresh we should be able to see Sunday Monday Tuesday Wednesday here right so let's refresh while that is still happening let's look at our completed code right on our completed code uh project you can see there's also extras right like in terms of events you can see I can H over here and show like there's an event uh right and also the there's also a a Gish background whenever it's an event so I think that will implement it later on but for now you can see our calendar is complete right I think it's fully loaded here you can see now there's those labels so the next part that we need to come back to fix here is actually adding events but yeah let's move to the next step right so the next step that we want to imp m is actually taking care of users so that we have a user uh there's some things that we need to do there so that the user can be able to apply for leave right so let's go ahead and do that currently on the project we're working on if you click onto users here like on the users route you can see there is no route and the URL where we are it's actually dashboard SL users so basically what what we're doing we're trying to um work uh as an administrator right so this account which is actually log in is an administrator right so we haven't implemented uh restrictions or like uh authorizations you know to restrict uh regular users to access these routes so we're going to do that later on so we're working on the portal there are some things which going to be seen by everyone on the portal which is basically the calendar as well as the Uh current year balances right but there are some routes which are only going to be seen by the administrator right if we go on our completed project this account is actually an administrator account if we navigate the URL of uh the dashboard SL users you can be able to see like there is a simple table there it shows you the name the emails as well as um you know all these other fields here right so we would like to be able to actually have a user in our in our database where we can be able to uh actually edit that person details right as well as ADD credits here as well right so let's just currently work on that so we have a table so we using our sh C nuui and we are on table make sure you go there you copy the command you go into your um text editor right and make sure you actually install that um table just like that okay while that is installing let's go and look again at our current project right and we're going to have a reusable component which is called a table wrapper we're going to create that we're going to be using it on multiple occasions so we're going to create that table rapper just like that okay and also the other things we're going to be implementing how we can fet this data right how we can F this data as an administrator and be able to display it here right so let's quickly go ahead and do that now on our project that we currently working on right so let me just go back here now working on our users uh route dashboard users route right what we need to do in the dashboard route let's put a sub route code users there right make sure it's really inside dashboard users then create a page page. TSX then what you need to do just initialize that page right but before we do that we also need um other files right so inside us just create also a file called users table right make sure it's users not user like what I just did Med users table right then inside your common folder also have another file called table rep. TSX right just like that okay then inside your lib create a folder code data then inside data create a file called gate user data. us right simply follow those uh steps just like that right okay I'm going to explain right remember ladies and G gentlemen instead of me wasting your time typing word for word I can explain the code and you see how it works right let's go into get users data what is it that you want to do here right this is basically what you want to do right okay let me make all my inputs there right we want to get hold of the current logged in user right we want to make sure we get the current uh user who's actually logged in then what can we do we need to create a function called get all users right so who's that person was allowed to get all users obviously it's the administrator so we say logged in user is get the current users logged in if the log if there's no logged in user just return an empty array right so here we just simply um you know um gating data right so I don't think we need to make use of an API and be able to show a response to a user let's just get the data if the data is not there let's just return an empty array right then let's check if this user is actually an administrator right if the user logged in user ra is equals to admin um if that person is not an administrator just return a empty array right yes we're going to implement midwar later on where only a user who actually an admin is going to be able to access this route but just for Best Practices I also have some type guards here I mean I also have some you know authorization guards here that I've implemented we need to make sure the user is logged in and you also need to make sure the person is an admin who's logged in right so if we pass all these checks what are we doing from our Prisma we just say try con uh user data gate users from our database right so we're saying Prisma user find many right and in our case we just want to order them by name right so those users we order them by name so alphabetically right name descending just like that then we want to return an array of users right that's what we're basically doing here right if there's an error just throw an error say error fetching or users right so this is exactly what this code is doing if you a beginner I kindly ask you to really type this code you get an understanding right in typing you also make some mistakes on your own then you can be able to refer to the completed code and fix those errors I really encourage that right once we had that gate user data uh function right in place right let's head over now to creating the table rapper right so the table rapper what we need is this code right let's make sure I'm going to import everything here right so this is just a parent component all our tables they going to be ried inside here right so we just want to make sure like it's got an overflow of yo right so that we can be able to scroll um top to bottom right um uh without the page overflowing our P our current uh view right exactly so make sure it has all those um you know ta wind CS properties right you can even make your own design so that's why I'm not even wasting much time here on typing this t on CSS cuz you can always make your own design right so once we have that table rapper in place the next stage now we need to do is to go to our user table right remember it should be users table I'm going to fix that in a moment right let me just populate the code here that we need and I'll explain it right cool right so this is actually users T right um let me um save it let me explain now what's happening here so we are actually importing the components from shn right we're importing a table as well as the badge you know the Dre what to do go to Shi and documentation if it's the bage make sure you copy the CLI go to your uh terminal on your project on your code editor paste it in and instore that dependency so we are putting the badge as well as what the table right so once we have that the BGE and the table let's go back to our code editor simple and straightforward if you want also want to see how this code is been implemented you can check here on sh CN code you can see exactly what they're doing here that's what I did as well right this is the data so for us it's actually the users then you return a table right then you can customize it to how you want to see your table so that's basically what we just did right it's only like how we customizing it according to our own design right so we are returning a table here but you can see our table is actually taking um you know props right the users right okay where are we getting these users um we're going to see where we're going to get these users right later on right but it takes those properties right and the user type is from Prisma client remember when we did the uh project setup I showed you the pris is Prisma client right so for our table headers we need these um you know headings right your row your job title department phone email name and avat right and also you can say edit or add leave credits right I'm going to show you how these one's going to work right so from the users right the users that we're going to get from s props here then we map over them right we just show now the properties of each and every user right exactly so this properties you can see um when we can see on our database schema right you can see on our Prisma schema here you can check those properties for the user you can actually see them here right so that's basically what you're getting right so we have our user table right in place straight forward straight to point and also we are getting holding of an avat here we're making use of an avat here to nicely show right the face of a person here make sure you update your code to be exactly like mine right is as you can see here from Top all the way to bottom just like that you update your code then now inside the PGE TSX right this is what you want to do want to initialize this page and let's just get out of all these components that we also need inside here right let's get all of that so we need a container just to make sure like we rip everything to the center nicely and straightforward then now we actually import the table rapper that table rapper it also take the props which is like a title let check it there's a title is monitory and also children right so we take that table inside the table rapper that's where we import our users table this users table right we insert it inside the table raer right then it gets now it gets um the user props right so you see now what we're doing this is actually in a sync um um page component right so that we can make use of a weight so we actually getting our users from this function yeah from Prisma we're getting those users we pass them as props to what to the table to the users table here right once they're there we display them but that table is actually in what a table rapper right okay I'm going to quickly refresh our page where we are working on right now okay so currently there it is so let's just navigate to the users page here we should be able to see exactly what we see is here right depending on how many people are actually um logged in or actually signed up for this particular application right okay so let's refresh let's wait for it so that you can go to this route and be able to show users here our page is fully loaded you can see now right you can see on this route here Port 3000 dashboard SL users which is different from Port 31 right exactly so we here on the project we working on you can see the avat is there those headings are all there right and you can see um the roow of this person is actually admin as admin so this person is doesn't have other you know um details here right so let's go ahead now and just fix this to also make sure like we have an option to be able to edit here a button or simply to be able to add credits right so the flow we want to follow before a person um applies for a leave they should have some credits right exactly so we want to implement this feature then after this implementing this feature we can go back again to the portal so that the person can be able to actually apply for leave right so they should be able to come back here and apply for leave but they should not be able to apply for leave without having credits right so that's why we are working on the users now so let's work on these um components here edit leave as always add leave credits let us examine our completed project right so on the users in terms of admin users here if we click on this button here that says um that's under a leave credits right if you click on it we can be able to actually uh put in some um you know credits here right and you can see it says annual credit Family Credit here the credit so we need a way of how to actually you know write this in a more reusable manner write this component in a more reusable manner clean and concise right and if we click submit here we actually making a code to an API route right so what's the difference between me actually making an API call versus just getting here data without making use of an API right so the simple thing is that we just want to get hold of an API we don't need a response to show to the user that hey you've done wrong something A or B just as we're doing here see if we are doing this and you say submit we need some form of an indication of what went wrong you know from the server you know we need to communicate the user but in terms of just fetching data we don't need that so that's why you see on our cod in terms of fetching data we just simply saying gate user data right and taking advantage of sever components we can actually be able to just do a fetch of data here right and simply show it here and you can see on our gate user data we can be able actually to show right like um an error this can be logged in on your console right or displayed or simply just return an empty array right so that nothing will show there on the you know user table um on the page right if there's no user right okay so right now what do we need to do we need to be able to add credits that's the first part we're starting to be able to add credits and these are the credits so depending on your organization or country there might be different terms here that you use right so I'm sure these are the more basic ones so we're just putting the more basic ones right you don't need to put a credit for unpaid leave that just can you know be awarded to a person right okay so what we need to do we need on our on our code what we need is an API right so inside API we need a new route here right we need a new route called balances right then after that then we can have a component inside users that says you know add credit something like that okay so let's go ahead and Implement that inside our API folder let's create a sub folder called balance then we're going to be using route handlers then we just say route. TS right so what is it that we want to do here we just want to basically create our API right so let's just make use of this function and say export a sync function post right R then the type of request will be next request right let's import that from um the next server right then we need something like a you know um o Guardia right we need to check who's the logged in user right it's not everyone who's supposed to add credits only the allowed users right so we need to check if the users adding credits here is actually part of the you know included rows right so that's what that function does if is is not allowed row um doesn't include the logged in user row right let's throw an error okay so let's make sure like we um import um the current user uh function the get current user function and also let's create the allowed rows here right let's just put it as a form of an array and let's include the rows there and also it should be of a t of a row so we need to get that from what a Prisma client right just like that then let's go ahead we want to make sure like uh we we log in what we get from the you know from the what do you call it from the client right so this is the back end right so this is our function right so we're making use of rout end last here right so ladies and gentlemen the documentation is our big friend right so if you go to next JS under routing you can see this function that's exactly what I'm following right I was actually we are saying API right we just want to you know uh maintain the old standard way of doing things and also inform what we're doing right so this is the code that I'm following you can see it's exactly the same I'm saying uh export a sync function post right and I'm just putting a type card here right we don't have an external URL right so we are not doing that right but it's actually a post method that we receiving here right and we have a typ GU then we just putting everything in a try catch block so that we can be able to what to receive um uh promises from our client right okay so that's what I'm following ladies and gentlemen I'm sure you'll be able to do a read through as well so that you can know what I'm doing right it's very important okay let's go back to our code right so API balance route then let's leave it like that then in our UI what we need to do under users right we need other files the one called add credits right and credit field so just type those ones out create those ones and I'll show you how each and everyone works let me just go first in the add credits right this add credit we're going to import it here inside the user table right so instead of having this hardcoded ptag here we're going to have uh the add credits uh component there right so let's go ahead and actually already import it here right exactly just like that so you can see right add credits is going to take in these props the email user email as well as what the username as string so all of them should be a string so we're importing that as you can see we already receiving areas cuz you haven't implemented that right so let's go and implement the add credits right here I'm just going to populate code here right remember I said our code will be you have to be very concise right so what are we doing here it's a client component right and a client component we are actually importing all these other things yeah that we need we need the router we need the user router we need a toast to be able to show errors or success messages to the user right and we need these events like a form event and use State and we also need a sub child component called credit field all right let so let me go ahead and actually populate code for credit fi again right so I've uploaded right I've I've populated it right so what do we have in the credit field right here so this is basically the field that we have here let me go the completed project you can see this is the field that we have this field here you can see it's an input field right it's an input food so I'm getting hold of input food as well as the label right so if you go to our shn I'm getting hold of the label and also getting hold of what the input where can I find the input there we go and as usual ladies and gentlemen if you want to know where to get this code just click here you can see there the code that we getting here right okay let's go back to our code editor right in our code editor we need a credit field which shows a label on top and also an input right so this is just a div that we're returning but you can see our component is actually taking in um um is actually having a a method or a function here right where we can be able to trigger um an event as it happen right so we getting hold of on change that we are getting is a prop right yeah right so this will be passed from the parent right so these are the other props that we need as well from the parent right so that credit field let's take a look at it inside uh our Ed credits here which is the parent component right of this credit field before we go that um we're going to be making use of um uh fish API right so our F API is going to call is going to hit this route here which is what we did here right which is what we did here right so we're going to say um a wait fetch the method is a post then the body going to send the body going to stringy formatted values right then if everything is fine show us a toast to say credits have been submitted right and we have this uh function here that says set open to force right um it means that um according to our dialog repper right you can see on our credits as well we've got a dialog dialog repper here right so our dialog reper optionally takes in that function right that function allows us to when we hit submit and everything goes well the dialogue should be able to close automatically without human interference right so we'll see that in action right so on our add credits what we returning is actually the dialog rapper with the titles and all the properties right it's not a button it's an icon so we taking uh an icon right then inside this dialog reper we have a form our form is kind of special this code is like clean and concise right we're retaining a div then we're mapping everything C credit do map right and get out of the credit field right so this is what happens right on our credit field it takes um the key which is a type so where are we getting these keys so these Keys we actually getting them from credit types here right you see credit types here we have credit types here I've just put them here for read for readability purposes our credit types are like this right annual family health study material right so we map over them once we map over them right let me just minimize this so that you can be able let me minimize this function right we map over them right so the key will be the um the credit type so if it's annual annual plus the suffix right what is the suffix here it's basically credit right okay the name type suffix then the label we also get out of the label right so the label will be the type character all right so what we are basically doing here is actually to capitalize you know cuz you can see here they're in lower case right they in lower case here why do we have them in lower case here why do we have them in lower case here it's because of our schema type here the data that we're going to send to our database right it's going to be something like maternity lowercase used maternity available something like that right so what you're going to send is annual credit Health Credit something like that right so yeah it's a huge refactoring that we did here but at the end we get the benefit of small readable and you know uh scalable code right okay right so on change what are we doing we're getting hold we are send we are doing this function handle credit change right we get off the type and the value right the value is a number right it's of a type of a number right okay then we hit the button uh the submit button right here okay let's get all of our credit field again you see our credit field right is taking in the label and the input the input of a type of number if we hit handle change what's going to happen it's going to say if we click on annual it's going to put the value to annual credit in this form here right okay right then let's take look at our submit function right um we need um you know form event here right which is of a tpe HTML form event so this is TP script then we PR event default here right so what are we doing we are saying um try to do this right try to do this we need a year right and we need formatted values right so this is the information we're going to send to our um back end right we need the formatted uh the credit values here right right so the creit values is in the form of a key um key key key value P key string right right so it's going to be in this form annual credit is string or number right exactly all right so let's go ahead and uh analyze our code right then we're going to send those formatted values to the back end right for now there's nothing much that I can explain further right uh except that I need to explain this as well this uh um method here we are sending it as a prop actually to the child component here right so in summary let's visualize what we trying to do we're trying to say if we click here this is our input this is our credit input right if we do anything like um outer State here if we can change the state here right the handle credit change um uh function is actually handling things at the back end right so it's actually handling when you ever make a change that change is being handled by that function right but that function we passing it as a prop to the child so here basically right and the value we're sending is actually for type of a number right okay then we have a form if we click on submit we have this function here which says uh sync function submit credits right right all right then Alo I've just initialized our open set open state for our dialog component right okay so what we did here in our route right with know API right we just want to log in that era right so let me maximize here our terminal here and just check what comes here right okay so let's go on our project we're working on we already have the Plus button let's tole it and let's just say 10 21 here or 10 here and let's hit submit button right we should be able to log something in the in the console I mean in the in the terminal right okay we have still making a call to the terminal let's wait for it or rather let me maximize a little bit here all right we're getting an error what is the error saying error no respones return from route okay all right what we need to do we actually need to make a um a return here right so we need to return something here we need to return something here okay so the way we do it in rou let's just return a next response all right and we Jony it right just like that okay if everything goes well we just say message success and status to 100 right okay right let's import it from next server otherwise if there's an error we need to log in log that error right we need to log that error and just perhaps um return a response right return a response and say internal server error right so currently we just log in what you're receiving from the front end let's go again to our thing and let's click submit let's check our terminal and see what we get okay we're still making a code here right okay so this is what we are getting what are we getting here say promise right okay this is what we're getting right won actually we need to say um console log um body right is the same as well right okay let's handle that all right since we getting a promise pending here it means we need to await um what we're conso loging right so I just say con point isal to a wait Rec Json right and let's log in that body right so whatever we're getting from the you know client we need to log it in here right so let's go now here say uh let's add some like random numbers here right 12 and let's say 12 right and say 14 right and click submit right once we do that there is the things that we're getting see it's being logged in here right now the other thing that I've just noticed right there is no uh toast remember we have our re um reactor toast that we implemented here so if I try to add something here we should be able to get a response um and we show that response to the what to the user right you click here we have everything here right but we should be able to see a toast here right so let's quickly go ahead and Implement a toast so that we can be able to show the user what's happening right we need to show the user feedback all right so for us to be able to share toast what we need to do inside the main layout folder right the main layout file sorry the main layout file right we need to import um um a toaster here right so what we can basically do I just realized one thing um we have a way we would like to have dark mode here right I've just seem like we haven't implemented it as yet although in our package.json we have a a dependency that can handle that for us right called Next themes right so make sure you install this dependence if you don't have right so once we have that um installed right just go inside uh this um uh this this level of your app directory right which is actually the root of your app directory you know that level just here just uh create a new file right just create a new file here and this file we like to call it providers. TSX right so providers uh. TSX just like that right once you done doing that then you can just simply have this code right you can just simply have this code with you right simple and is straightforward to follow right it's a client component right once you have it then inside your layout. TSX inside your layout. TSX uh just import it inside there so let's go inside the layout TSX and would like to get hold of um providers right okay providers then just after HTML here right then we can just simply say um actually is inside body right inside body here right we need to have this right providers and let's just import it from the file we just created right now right let's import it there it is we import it then the children let's remove it from here right okay right then we have children here inside providers right exactly simple like that right let's just format everything nicely right just like like that okay so what we did in the providers far TSX right um we're just making use of our you know client um component you know um items here right then we are actually importing the toaster we put it at the top here right so we are the reason why we are putting the toaster here is because we want to access it from a top level so that you know it's access throughout the um throughout the application right so we have once we have that out of the way we also have a way of handling um next themes actually right uh I mean handling dark mode or light mode right we also have that so we should be able to have a toaster on our you know on our project that we're working on right so let's just put in some random numbers here right and just click submit right right we're still hitting the API balance API route at the moment right we might just need to refresh right our page is refreshed let's just click here and just add some um files here some some some some data sorry and let's click submit and you can see we are receiving a response from our server right just like that and also let's try our dark mode light mode see can totally this working right so kindly go ahead and make sure like you have included that provider file and you import it in your layout to Tex so this is the main layout to TX right okay so once we have that out of the way let's now go ahead and complete our API right as you can see here the data that we're getting from um from our client right is in this form yeah in this form here right so we need a way of handling it out so that we can send that to store in a database right so so let's go ahead and do that right let's complete our balance API here right I want you to take note of some things you see the kind of data structure that we getting from our client right it's of these types right so actually we've got an annual right which is of type number and an email year and name which is of type strings right so what we can do basically is that we can give type since you're using typescript on top here we can just say type right submitted credits and give them these types right exactly just like that right so once we know those types want to just make sure you know everything is typed we minimize bugs right then we go in our Tri catch block and you say con body we're expecting uh this type of um you know uh uh Fields right you see right and you say a wait recj right then we destructure now we destructuring here right right can just destructure here and say cost annual blah blah blah everything is goes to body right we need to do something first we need to check if there's no existing balance or there's no EXT existing credit for this particular um uh user right so how can we do that so from the email that we're getting as well as the year that we're getting we say C check existing credits right where the email and the year match right so if there's existing credits right so basically what you're doing you should not have more book credits for year you should only have one credit entry for a user inside your database right so if there's an existing user return a respon and say credits for this current period already exist right otherwise if that's not the case go ahead and create the balances right which is actually basically the credits right go and create and the data that we need is the name of that person you creating credits for their email their year and on the annual credit field just put the annual number so these are actually numbers you see put the study put the maternity put the pity right if everything goes well return a response to the client it says whoops success otherwise then error send an error to the you know client back to the client right so that's the complete code for our um balance API right that allows us to add credits right okay right let's look let's see that in action actually right so previously we just cons loging um our details here right so for now what you just need to do is actually to add these credits right one thing I need you to take note of let me just quickly refresh here is actually the structure of our schema let's get out of our structure of our schema right you can see in our model balance is here right there is actually other fields that we're not adding right for now when we're adding the balance right cuz they are default Fields right so everything is defa to 0000 here right okay so we are only adding the credits credits credit credit right credit just like that exactly and it's of a type of integers all these things right obviously we need a name and email right exactly and there's a you know a relationship between the email to the user yeah right okay so let's go ahead and check this in action let's go here and say add right so if we miss this field it's going to be zero in the database right okay so we're just going to miss uh these two Fields annual credit let's say 21 Family Credit let's say 8 uh Health Credit let's say seven and study credit let's say n and let's hit submit button if everything goes well we should be able to see a toaster here this is our API being uh reached we're hitting our API here right okay since since I've got two servers it's kind of slow right okay let me show again we're still hitting our server there is a toast which means there's an entry into our database right that's a success right so let me try to add again right remember it only allows us to add one credit entry for user in a year what if we try to do it for again for that particular user say it says credits for this uh for the current period already exist which means if we have to go into our Prisma studio just to see how the structure is of our you know database right so here let me just say yarn Prisma studio right if I do like that we should be able to see uh the data inside our database right so let's go to our brow browser let me maximize here right okay let me manually close this right and also close these are the ones we don't need them here we should be able to see um a tab opening for Prisma Studio year right once we have that let's just check into the balances right you can see this is the entry that we just entered right now you can see right the other F that we left is just it's just zeros on them right so that's it successfully right so the next element we need just to fix is actually to be able to edit a user right so let's go ahead quickly while we are here to edit each and every user who's actually using our um our portal or our dashboard or our platform right let's go and do that so for us to do that as well on the on our code editor we need an API right we need an API route here that we can call perhaps we can call it um a user right so inside there we should be able to you know uh edit user and um the the the the method is a patch right so as well as inside our users route inside dashboard here we should have um we should have um other components that can allow us to edit user so we're going to call that component edit user right then we're going to import it inside here insert the user table right so let me close these other tabs that we don't need for now let me close all right so what we doing inside API let's create a route called user right going to call it user here then we're going to implement the route Handler then we're going to create a component inside users called edit user right so in our route Handler here the method is going to be patch right so let's quickly go ahead and Implement that okay our user registration or rather user um creation is actually done at login right so our next Au is actually helping us to do that to put an entry into the database of the user right so the only entries that we get from um super base into our database are from next onth into our database right it's basically um this details here let's just quickly take a look at them right so it's just like the name email um image right uh the row we've set it to default right so the other ones they just optional the other few they are just optional so what does it mean that we're doing on our side let's create our root uh Handler here right so the way we going going to create it right you want to be able to patch the user details right so we create a folder inside API called user then inside we create a dynamic um uh um um API route right we put it in square brackets just like that and we just name what you want to name you can just say ID or just us ID I just prefer to say user ID to be more descriptive right and let's create a file inside user ID which is you know um with C brakes bra like this right and code route. TS right once you created that so let's quickly populate our code our code is not different far much different from what we've done in the balance API before right so let me just quickly populate it here then explain it right okay so as usual we need to get the current user because we need that user to just get a hold if that user is actually has a role which is um allowed to perform this action for now we just saying the user should be an admin right so we get that from our leap session uh file then we check in the log user here if the user is not in admin we throw an error right then inside here we actually want to get something from the client right so we want to get the body from the client and we're going to type it out here as well using types right so these are the details that you're expecting from the um from the client right side of things right okay so we need an edit uh user board which is exactly like that we just need the phone Department ID um uh title as well as the row right okay then we just do a destructuring here right exactly then we now need to do an update what are we updating update a user where the ID is equals to this ID here right then the data that we need is actually these four Fields here as you can see here right then if everything goes well let's return return a response and say success with the status of 200 otherwise let just rain an error right so this is basically exactly the same what we did on the balance API right so once we have that out of the way then inside our users um route inside the dashboard remember these are actually admin users rout right these are actually admin users here right so inside here let's create a file called edit user so edit user right that file um it's going to have this code here right okay I've pasted the code here right it's just um quite long yeah but what we need to get hold of here the dependencies is actually all these dependencies here right so what you can do if you go to sh CN um sh CN here right if you install this um component here called forms right if you install for forms here right Yan I'm using Yan then in your terminal just uh inser it and it say it's done here right it will come with react form dependent as well as Zord as well as also as the um Z resolver right so it comes with those right then the rest we just get them from um either our components that we've created on our own or import them from the dependencies right that we have uh uh in the package.json right okay so make sure you have those dependencies then the other components you need from sh CN is actually the uh Command right the command as well as the pop over right you're going to need those ones right make sure you actually install them like this like what I did right obviously you need a button as well and you need an input element and you need this um icon and you need this utility the class name utility for Tailwind from lib um you know U then you need some damy data from um the damy data file so go ahead again inside your lib just inside your lib folder create a file called dami I data. TS and populate this right just populate this Dam data so what you need is just the leave types organizational Department organizational title right so this is basically for demonstration purposes otherwise uh you will be putting these in your settings right but for quick demonstration just make sure you have them here right once that is done um then we are on edit us right once that is done right let's take a look into our code right the edit user will actually get the props right which is user props where are we getting them from from the user table so in the user table here we've got a hardcoded pag here right so let's import um let's import this child component here edit user just like that right and let make sure it's imported here right inside the user table let's go back to it and see the components right um let me minimize some of these ones here we don't need them as yet let me Min this we don't need them in our explanation as yet okay so it's a dialogue raer right it's a dialogue that will show up and it's got all these properties right um the open then set open just like that that then we're now using uh the form um component from shn right and we do it like that right so how did I know to come about with this kind of a code that I wrote here yes you guessed it I got it from here sh CN this is where I get how to write that code that we have there right so what you can do you can just simply you know make sure like um you follow here what's being said here right so this is exactly what I'm following then I'm just um twisting it and adjusting it according to how I want my form to be like right so you can see here straightforward if you just follow this documentation it give you a guideline of how to create your own um your own um form right okay let's go to explain so there's a form right this is um I think this is a form that we're getting from this is a normal form right this is a normal standard HTML form right which is inside the form of sh CN right and we spread in the form so our form is actually the details right so here there's a mix mixture of U using react work form Zod right and also the you know basic uh HTML form right so if you follow Shi and guidelines it's exactly like what I'm following here right you need a form field in that form field you need a form label then you can either have what exactly you want to capture right so inside an input I want to capture the phone um string there right then you spread uh the the field just like that right you spread the fields just like that okay so you can see the pattern is basically the same right on these form Fields here right so let me just minimize all of these ones just like that okay so you can see what we're doing on rows right on rows here we actually getting all of user rows what we get from our Demi data right then we actually uh making sure like um we um select user row find row which is equals to the value that's what's going to be to be set as the selected row here right then there's also some nice things that sh the end component does here like you know uh if you want to show some error messages uh alongside with Zord as well right you can do things like a button you can put it you can give it a a variant that button right and if the field is not value then the text should be muted in the foreground right just to have a nice grayish color right okay right um then some of the things they really make sense if we have to actually see them in so let's go in the completed code and click here right so you can see um all right let's actually go to the code you working here on right you can see if there's no value then on the background there's that text which is kind of like muted right it's a grayish color right so that's what we're trying to describe here in terms of this design uh that we have like for example here right like for example here right so there's more components and various components that we mixing so that we get the actual design that we need for example we making making use of a command right which is inside a pop over right command which is inside a pop over so if you go to the project you can see here the command then there's a pop over just like that so basically that's what we're doing right so we can even search for what we looking for right yeah just like that so I really like this UI um uh Library it's very handy and quick to use this shart C in library right so like I say I'm just following uh what they're giving us here and also manipulating and adjusting to according to our liking right okay that's the design side of things you can make your own designs according to you right but the most uh important um aspects I need you to pay attention to basically let's take a look at this zodia right so we are validating um the user inputs here as you get them from a user right so for example a phone should be at least maximum 50 characters right so if you come on our phone field here and we want to try to put something like more than uh 50 um 50 more than like 50 characters for example we should be able to get an error right you see string must contain at most 50 characters you see just like that and all other FS that we've marked like they required you can see here there's actually an indication in red tell us like these fields are required you must do something about it right okay so let me just close it and refresh so it means then we're making use of that validation just like here right exactly all right so where are we making that validation let's look into our um into our our form here right so our form we get we making use of use form that we get from your react forms and the default values now just because we are actually patching or editing this the default values should be um the current logged in the current um not the current user but that particular user uh with their details right so if there are other details um if there available you can just show them here right otherwise we can just go straight into um discussing this uh submit um uh edit user function right we are making a call to our API SL user SL user ID and the method is page right then if everything goes well we show a toast otherwise we show an error message here right so that's basically what we doing and what we're sending we're sending the values in the the ID right the ID we get it from the user uh that we get from these props yeah right so this is the code simple and straightforward to follow right so once you have that let's just go and try to um hit our API URL and see if we can be able to edit something here okay so here I'm going to put in a phone number just like that select the department I'll say take then the title if they predefined titles just say senior developer then the role we just leave it as an admin just like that okay then we click submit right if everything goes well we hit our database we should be able to see a toast here and also this one should automatically close right so let's wait for that yeah I have got a lot of things open here so my server is kind of slow right but if everything goes well we should be able to see a toast just like that and there's an automatic closure of the the dialog box and you can see these details have already been updated without me actually refreshing right so it means uh on our code there's something that we also implemented as well which is actually a router refresh so we are actually making use of um next um router right so we get that from you use router from next navigation sorry we not using next router we using actually next navigation right exactly right so that's it so pretty much we are done with um you know this section here this user route here right okay it means you can be able to uh add credit for a user now that means this particular user or any user can actually be able to submit uh leaves right so let's go back now to the beginning of welcoming banner and let's make sure we you know we're able to submit a leave from there all right looking at the completed project what you are able to do is actually to click here select a leave you can select in leave that you have then you can select the dates that you want for a leave as a user right just like that and be able to put some extra notes if there's need for right and click submit right if everything goes well you should be able to see a toast here right to say your leave has been updated right so that's the same concept you actually want to follow on the project that you are working on right now okay so for us to be able to do that we need to change um our welcome Banner you see currently on the completed project this is what we see so we need to implement the same on the project you're working for right so we need to have a form here instead of saying hi we need to have a form just as the one that we see here right okay so how can we do that right let's go into our Cod editor and try to populate code now right so in our code editor we are going back to the port route right so this is the route that's either seen by um Regular user or an administrator right okay so inside the welcome inside the portal inside the welcome Banner we need to have a request form right we need to import it here so instead of having this we need actually to have a request form here so let's check on our request form right and see what we can populate I'm going to populate code here and explain it right okay this is our request form right let me hit save and I'll explain it right so this is basically the same that we been doing in terms of editing a user before right exactly the same as that right and we are making use of your react work form we making use of all these icons that we might need there right and we are also importing these components from shn and one more package that want to use is called dat F FS right we're going to need that package as well it's got a different test of how to manipulate dates so make sure you go to the documentation here and edit actually un add FNS right there's some ways we'll be using it to manipulate it like for example it can tell us how long ago did the leave got submitted and also we'll be able to manipulate our the strings into these formats like this right okay so we need that package as well right okay so once we have it then we need also this from Shi and the pop over right and also from our Demi data let's go ahead and get leave types and also need this class um utility right for for our t wind classes meing them and also we need all these other components from sh CN right okay then we also need the TOs use State we're going to be using them right let me minimize this for now we'll come back to them again later on after discussing our component what we are retaining so it's a dialog rer it's got all these properties that we defined right and we have a form again from sh in we'll be spreading the form values there and we have a regular form for HTML like for HTML that we are familiar with and inside there that's where we say form. handle submit right so we're making use of Rea form and their guidelines here right what they are basically trying to you know recommend us of how to do this right if you having difficult of how to search this how we get this kindly go to sh CN this the documentation iter tells you exactly how to follow this straightforward right okay then there are fields that we need we need the Le field where you can be able to select which type of a leaf you want right so inside there we also have a button kind of that can help you to uh select what you need right and also making use of these icons here that to make everything um nice and clear as you want it and it will be inside a pop over right okay right just like that then you also need um an option to select leave types right leave types and also we need the dates we need to be able to select um the dates right okay so we need dates as well the start date as well the end date those are the fields that we need right as you can see here on my DTA saying it's got implicit type any so we need to to fix that in terms of um types right so we need to make sure like we can just give a type of a date right so this is actually inclusive in the JavaScript um uh Global uh types right okay so once we fix that our errors are gone right and also another field is actually the no fud where we are making use of the text area where users can be able to type then we have a button to submit here right so that's exactly our request form how it is basically right please pay attention to it make sure you type the code one by one line by line I say right let's look at this submit function what are we doing we're just doing exactly what we done on the balance uh uh submit function as well right so we just spreading the values all the values that we have and we making sure now like on this particular instance uh we have to uh stringify kind of our start date and end date right and also we are putting um we are sending this user object as well uh to the back end right just to tell our back end who is applying for the leave right you can either do it here right uh for scalability purposes but in our small application you can actually be able to get hold of the users as well by making use of uh this get session right get user from here like what we've been doing before right okay all right then we need that API where we can send our data if everything goes well we show a toast say success if there's an error we show the error just like here right okay so that's our um onsubmit function then according to react um um H uh react hook forms right where is it yeah react H form uh this is how actually we can get off of fields the fields that we need right if one of the field can be blank this is how we do it like for example it's not mandatory to put notes you can leave it leg blank so in such an instance we can just say default values and put uh an empty string here right okay then in terms of um um checking what the user input is actually giving us and actually uh letting the user know if they are in errors right so for example there are some fields that you cannot leave blank so we make use of Zord and if that link uh that um field is blank we tell the user that please select a leave tab right so we do that so this is implementation if you want to see how to how I got to be where I am and customized it I just followed what I've seen on the Shing U Shing CN UI right you can even follow along as well right so once you have this um you can just hit save and go in your welome banner right and just get rid of this right this this previous dialog UI dialog reer which was there and just simply uh paste in the import actually the request form right so once you import the request form remember the request form is actually getting uh props right so the props is the user right so this user we actually getting it from here remember this user you're passing it to the welcome Banner then the welcome Banner will pass it to the request form right exactly okay right so once that is out of the way then we now need to implement this route Handler right so the way we do it under API create a folder code leave then say route. TS once you have that then you need this code it's exactly the same how we've been doing it before right it's exactly the same how we been doing it before except that there are some minor changes that we're doing right remember from here we are string fying our dates right so when we come here we need to make sure like those dates we actually put them back into kind you know dat objects that can be saved in the database right exactly so there's always an issue in terms of debes and you know time zones it it see so making use of functions like these ones we make sure like you actually save the correct dates formats inside your database right so in our St we using post uh um uh CQ database right so we can just save it the dates nicely as this right okay so let's examine our API first of all we need to check uh the types what kind of data we receiving from the front end and we type it like this right so let's check if there's a loged in user right just for um regarding our API right so if there's no user was logged in just say return you know uh next response error right otherwise from the body which is of type submitted leave right let's just await reg Json right from the body then we D structure what we need is actually start date end date leave notes and the user right then we just return back we just change all right we just change the strings right you can see actually it's a string right from our front end so we want to change this string into a de object right so if you can see here we're now changing that into what dead object and what are we using we're using pass ISO from this date FS right so they are now date objects that we can send to the database right all right we also need a way of calculating how many days has the user requested right so we don't need to capture that in the front end we can just do a calculation since we're making we are actually capturing dates right so we can actually calculate how many days is the uh user actually requested so this is the way that can do it we can just say difference in days right so where are we getting difference in days again we're getting it from our package that we just installed now it can help us in calculating the difference between days right then we add plus one right uh remember we always start counting at zero right so what if a person um applies for one day it's 0 + 1 which means that person is good one day right if a person person applies for 2 days uh it's actually 1 + one right okay then we need to find if there's no existing user uh existing leave for that same period that the user is applying for so let's just check where the start date the end dat and the user email are exactly the same this is not exactly the correct way of doing it right but just for demonstration purposes this is how I'm actually checking if there's an existing leave already for that particular period for that person so if if existing leave just send um back a response say there's a leave entry already for these periods in the database so we alting the user like you don't need to apply for the leave for these Dees right then we also need to save this other particular field in our database right we always need to see which year was this particular leave uh requested right so we don't need to ask the user again so the number of days as well as we don't need to ask the user we can simply um calculate it on our own right okay so what we can do is just to say after that we create the leaf so these are the fs that we need for us to create a leaf right if everything goes well a response otherwise rain an error right okay let's hit save all right once we hit save we can just now come to our project uh that we're working on right let's click apply for leave there we go can see our form and all the signs according to how we like them right then let's try to select a leave which is an annual leave or maybe side leave from the 19th and to the 20th right and let just write some random notes here let's actually see what happens right all right you can see there's an error that just happened here right which means there's an leave already that exist for this particular period right so we don't need to do that so let's change and say maybe annual and let's select maybe the day which is the 21st all the way to the 23rd right and let's just submit leave submitted successfully you see right okay so that's perfect right so when we submit leaves like this right uh let's check um we need now to be able to view those Le which have been submitted right so as a user you just need to be able to view them as your leaves from here right so let's go ahead and actually view the submitted leaves on here let's go and Implement that all right let's just look at our completed uh project here right you can see um this is the admin dashboard right this is the admin route right so let's just start with uh viewing the administrator side of things in terms of Lees which have been submitted right you can see there's an option to edit uh this particular leave right we can click here so that we can be able to make a decision we can either change it to uh moderation rejected or approved right and also you can see the status here right so all these details all right so this is just a simplified table uh you can actually see it's called Infinity scrolling here we're not going to put page Nation for now because yeah we don't want to complicate things at this moment right so let's actually start with this particular table um for leaves where an administrator can be able to view and also make a some edits to it right so let's go and take a look at that um looking into our code you can see one our schema here the leaf status is could actually a default of pending right so it means all the new leaves we have a status of pending right and these are the fields which are also um optional like the moderator this is the person who actually changes the leave right who got the right to actually change the Le stus right um and also so I have the moderator note right so when we submit a leave some of um the fields they actually um optional right so what we need to do obviously we need a way of actually editing a leave so inside our API we need now um a dynamic um end point here right we need a dynamic end point so we just Ed it here then we'll go into our dashboard then we have have to uh you know create a new uh uh route um or rather new um um um page right we need to create a new page which is called um um leaves right can just say leaves and we have a leaves table as well as um a a file uh to edit the leaves right so let's see that in action cool all right let's start with our back end side of things right so let's go ahead and create um an API route okay so it's a route segment right it's a dynamic route segment you can see so what how do we do it we actually put uh um the square brackets and just uh make um inside um the type of um of a naming conversion that we need so for example me I'm just going to say leave ID you could simply say ID but for uh readability I would just say leave ID right read ID then inside you create a file called route. TS right so once you create that then now you just need the the the code to handle your um uh um your your your your editing of the leave right okay so let's populate Cod and see how we can go about it in this right so I populated code there and and um let me just make it clean up okay right so there's some inputs that we doing right let me also import this cuz it's required here right so inside your lib folder create a file code calculate balances. TS right so in calculate balances. TS go ahead as well and have this code right okay I'll give you time to um to to to type later on after explaining these two files right so inside API um Dynamic um route segment here which is called leave ID with a file called routts then we are actually importing uh these right you can see this is from next server this is from Prisma client right and also this is from our session we need the current user right and also we are importing a function called calculate and update balances right okay okay so when someone applies for a leave right and that leave gets approved it means their balances should decrease right yes so it means their credit should decrease and we should be able to see um how many days have been taken or how many days have you accumulated and what's the balance remaining right so that's what we are making use of this function here calculate uh and update balances right so as usual ladies and gentlemen uh we know uh beforehand what kind type of a you know body type that you're receiving from the client right or from the front end so we just need to type um that one out type it here right and say type edit body this is the information or data we're receiving from the front end when we are editing a leave right so the method is a patch method right it's a patch method request of a type request right let's handly here uh author ization guard right so if a user is not an admin or a moderator they should not edit they don't have rights they don't have they're not permitted to edit this leave right otherwise let's do um let's do try and catch right in our try and catch block the body that we received we just destructure right we just destructure for reability purposes right and making sure uh which fi you are receiving right then we need to change the updated at date right let's quickly take a look at our at our schema here right you see we've got created eight and updated eight field right so these since we're dealing with days and times right we also need to I think these are very important fields to have so we need as well to be able to track you know as an organization when was this leave updated right right then also the moderator right so in this instance now we are assuming like the person who's actually logged in is actually a moderator right and obviously when we Implement uh the midw there's no way a regular user can be able to access you know uh that particular page of editing you uh LIF days as well as users right so we're assuming like the person uh who's logged in here has got the rights of administrator right or a moderator right then when it comes to this section here right we now need to check what you're receiving from the front end right the status that we receiving from front end if that status is approved we need to do something here which is actually calculate uh and update balances right so we need to quickly go and update the balances meaning to say for example if leave type is an annual leave the person applied for 2 days right um and it's approved it means from their credit of 21 minus 2 days we should have 19 days remaining right and we quickly update it at the back end without any user um intervention on the front end so we just need it to happen automatically at the back end so that's what we're doing here right so how are we calculating and updating the balances right so to calculate and update balances we have got this function here right it's an a sync function it takes in these um um arguments here right the email the year type in days let's quickly look at our schema on the balances you can see there are some arguments that we can take like the year the ID right as well as what the name email right user right okay so those are the things the email year the type and the DAT right then obviously we return a promise from there right so we are saying look for a balance where the email and the year match right so basically it will be a particular user for example it can be say deal gmail.com and if the year is 2024 remember each person has got one entry of a balance in a year in a year right so we are looking for that unique balance we using uh an email to look for it because our email is unique I believe right our email is always unique according to the user type here right there it is right so it means we can actually get a specific um balance from a for a user right okay and also the year right okay so if there's no balance right entry into the database for this particular user let's throw an er error and say balance not found meaning that we need to first of all add balances for that particular user right which means the administrator needs to go and edit and give these percent balances right otherwise let's use a switch uh switch case statement right switch statement right here okay that's the easy way which is uh for me I think uh improves even readability right so in our switch statements that we're using here right we take in an an argument of a type right let's say for example if the type is annual what do you what you supposed to do you're supposed to have a what you call balance update which is what we have is just basically a partial we've made it like a partial right partial of the type balances right so if the type is annual then the annual use the used the annual use let's take a look at our schema and the balances you see at first when you edit credits we only edit Credit Credit Credit Credit there's no way where we touch the use available right the the used as always the available Fields right but at this point here that's what we're doing exactly so we need now need to see how many days have been used right so for us to check how many days have been used let's get hold of what we have currently in the database then add the days which have been um requested by user right so we'll be able to get uh the the the the the aggregate used right then the available we need to check um what is the credit minus the used currently according to the database then on top of that we need to add the days requested right in doing such you'll be able to get what uh the currently the updated available not current the updated available uh right uh balances right I hope this is making sense right so this function what is just trying to do um here right we are updating the balances or rather the credits for user right remember for each entry of the balances for a user it's only one entry to the database database for year right but on those entry there are these fields here we need to be able to track what's the credit what's the US what's the available so this function does the updating of what has been used and what is remaining that's basically what we're doing here right so us using a switch statement right it's more um I think more performant right because it looks for where the type is annual only and once that has been satisfied then it does the calculation then it breaks it doesn't go all the way here to uh look for these and make calculation right so if it's pity does the same as well so that's what basically is doing right so once uh there's an update then we update the balances right we update the balances where the ID is cost the balance ID then the data is just the balance update that we have specified from here is being manipulated in the switch statements then we're going to have the balance complete balance update at the end here then update the balances in the database right okay so that's basically what you're are doing on this function here right okay so it only happens when the leave status is approved right otherwise let's just go straight and update the current uh you know leave with our what uh the moderate note uh if it's available the notes status then also updated eight and was always who's the moderator right if everything goes well let's send a response say it's successful otherwise let's throw an error right you can see I've commented out this section here right so we're going to be adding events as well remember on our calendar there's a way to show events right so we want that to happen immediately as well when a leave is approved right we need to also update uh the events uh to say there's going to be a person on this leave right yes so we'll do that later on right so make sure you type this code right make sure you type it out right just like that and also maybe you can check on the repo complet repo and make sure you understand what's going on here especially on the calculating of the balances right make sure you understand what's going on right otherwise you can carry on so let's hit save here once we have that out of the way now we need to F data right we need to fet all the leaves um this is an administrator that we're dealing with here so the administrator needs to see all the leaves right so let's fetch all the leaves right for example right so this is what we need so inside Le folder data create a file called get Le dat once you get that uh once you created that then you can type out that this code right so we're just fing data here right then as usual as a best practice I know as a user you can't visit uh uh that particular URL if you're not log in but as a big practice I'm just putting it out here just to say I want to check if there's a logged in user right this is you can even do it on a stand alone not JS that's why I'm doing it here right okay just check if there's a loged in user currently otherwise rning empty array show nothing then to to view all the leave days you need to be an administrator if you're not an administrator we just send something blank although you won't be able to revisit that page though but as best practice me I just put it here right okay then in our try cach block look for leaves right and order them with a created it date right then just uh return an array of leaves right okay if something happens just through an error say there's an error fishing the Lea days right so once we have a way of fetching this data then we go now in our dashboard um route all right in our dashboard route here let's create a sub route called leaves then we need to have these three files uh page. TSX right to initialize the page then we need to have a table and also a component to edit leave right so let's create the page right and let's have the code that we need in our page right this is the code that we need in our page right we need a Le table right and also we need this data to fetch data right and also we need the type of data uh that you're fishing right okay you can see there's an error here which means we need to have leaves table here already okay so that's the Cod we explain it we also need to have a code for the component right so let's go back to our page we import a container which is a reusable component right we import it then we also need the table that's the one we just uh display here we need a table wrapper right so we need a table wrapper inside this container so this is a parent component so that there nice myin from you know both sides top bottom left and right and also we need our table raer right which takes a title says these are all leaves so inside here the child will be the leaves table right the leaves table is going to take props which is leaves right which is an array of the data that we are fishing yeah from here right so we're fishing from from the database and um inside the server component we are getting hold of the data right so if there's no data just return a container to say no leaves found right otherwise proceed here right where you can be able to show uh in a table those leaves right okay so once that is done make sure you have this uh like that then let's go to the leaves table and check what do we have all right so in our leaves table we need to have a table component from uh sh CN right you can see I've imported it here and we also need that particular package that we installed earlier to deal with dates as well so we need DJs as well as dat FNS right you you'll see later on where will you be using these right and also another component from sh CN which is a BGE right and we need these types from um Prisma client right okay and also we need to import that component called uh edit leave right so let me just show you quickly a tip here like how do I get out of this sleeve type from Prisma client right so for example let me say I try to remove this right try to remove this [Music] um like that right then I'll be asked for typescript to actually cry here and really needs to know um what is this type right so if I type leave right if I type leave here right so sometimes it's not automatically imported so what I just do on my machine I just over my my mouse there my caser there then I just hit control dot on my keyboard on the Windows machine or maybe you can do command um dot then you'll be able to automatically import these types so that's basically what I'm doing right okay so this component is actually a table right we've imported a table as always if you want to see how did I get about with getting a table like this right you can go on the documentation for sh CN you can see a a simple um uh table there right so for me I just edit it according to my liking right so we need these headers here right that shows edit then the user type and all these other fields right then we are mapping now the leaves that we receive remember the leaves that we receive is props right from the page we getting them here then we map them over what over the rows right so first of all we need this edit type which is a cell right it's actually a cell here right so there's something that we're doing here we need to check if the status is not is not equal to approved right we need to show a way to edit but if the leave has been edited already we don't need to show this component here right let's take a look at that and see what's going on right all right you can see this is pending we show the edit button this is approved we don't show the edit button cuz it's it's it's done already right so that's basically what we doing okay so that's what we're doing here so we are using a tenary operator here to check the conditions and render according to the condition right then we just display the details of the Le who's that person what's the type is it an annual is it a study right and also let's show the year of that particular leave right then we need now a way to see um when did this person when was this leave uh submitted it right so now we making making use of DJs right so if you go to DJs documentation it can show you how you can manipulate this data uh this date that we get from what the database so when you saving your date in make sure it's actually a date right CU post handles that right you can see on our scheme as well there's a way of handling date make sure it's not a string make sure it's actually a date right okay then we need to um see when is this person applying for it what's the start date and what's the end date so that's what we showing uh basically here you can see starting from this ending of this and how many days are they so from the 19th 19th the 20th is 2 days actually right and this has been calculated the at the back end when this was submitted you still remember right I hope you still remember right okay then we need to show the number of days right then now we need to say to show a BGE right so this is BGE we need to show so if the leave status is approved we need just to show a BGE with this color right otherwise um if it's pending let's show this color if it's rejected let's show this color if it's in moderation being moderated let's show this car that what we're doing right then the note what did the user say when they applied for this leave we show that right then now we now need to see if there's an update right on the leave and when was it updated right so we now using date FNS here cuz dat FNS shows us uh how long right you see it says about 13 years about 13 hours ago about 10 days ago right so that's where we using dat FNS to be able to show us um that more descriptive um user friendly way of displaying data right so if you go onto the DAT FNS documentation you can be able to see these methods here where you can take former distance sub days and you know you can add your days and manipulate you know just like that right then you need to see if it's moderated and what did the moderator said or simply um you know show the name of the moderator as well right okay so on top here we actually have this edit leave component right this edit leave component that's what we have here this edit leave component right is actually a dialogue right so we have it in a dialog rapper here right so basically just like what we did when we editing uh you know the balance in the user that's the same exactly code that you have here right only that we hitting a different U API here right so that's the same right so what do we have at the top okay we just have the dialog rapper and all these inputs and the Zord use form as well right exactly all these inputs right make sure you type them out and now we're receiving props in this edit leave these are the props that we're receiving right so we type them we destructure them here right and obviously we need a router right and we need um form schema that we use in our use form here right Accord to react hook form right then we had our function we have our function here called a sync function edit leave right then we get hold of the data just like that right then we send that data to our back end if everything goes well send me a toast give me a TOS to say wow everything went great right otherwise if an error show me an error right then we are returning the dialog rapper right and it has got all these props that it has here right then inside our form with with form Fields when we need to check the status right check the status and um status the notes right and um what else do we need here all right yeah that's simple that that's those are the simple fields that we have we just need to make sure cuz we're editing a leave so we need to change the status and just give a not as an administrator right all right so once we have that out of the way we should be able now to see um on our project we're working on this table you can see this table and everything currently is paining paining qu we haven't edited anything all right let's try to just quickly edit this and say it is uh in moderation and say some random on and click submit here you can see it says edit successful right and shows a nice toaster and as well our data has been updated here right and it shows it's less than a minute ago these are the updated M um notes and who's the user right exactly so basically that's what we're doing right I've quickly created um a leave where the person is um does not have um balances entry into the database right so we don't have balances for this particular user in our database right so let's test our rest a end point and see what happen happens let's try try to submit aivia right let's just say it's also in moderation and let's just uh write some random words here right for example No it should be approved right remember it should be approved then let's click submit here you can see it shows us an error internal server error right so as usual you can put more descriptive um uh responses to show the user or you can just investigate or know what's happening there right so it means um it will fail to go through right yeah up to now I've been showing you the administrator dashboard right so the administrator dashboard that you have here right so the administrator dashboard you can see you can be able to see all these routes here right but I would like to show you a general user dashboard the general user dashboard we only main focusing on the portal right so from the portal you can be able to see the calendar and you'll be able to see the current uh balances here later on when you implement that but these are the routes that you can see but as well as a general user you need to be able to see um your leaves that you've applied for right just here right so let's quickly go ahead and implement that right so from our portal we're going to create a route called history right where you can be able to view view all the um leaves that you have submitted right so let's quickly go ahead and do that right for us to get the general user uh leave days right what we can do first of all inside our leap folder data folder and uh the get leave days uh file currently we've been getting all the leaves and it's only an administrator which can be able to get these right but we also need a general user to be able to get uh Le days as well right so this is the function that you need here right for example we say a sync function get user leave days right make sure the person is logged in right then we are looking for leave days where it matches the email the user email of the user right so the person should be logged in and from that person who's logged in let us get your leave days right then after that we've done with that if there's an error just show an error otherwi in ARA of leavs right then we go inside our portal folder portal route or portal URL right inside we create a sub URL called a history right subur called history we just need to initialize the page P right initialize the page and also create a file called history uh history table. TSX right so once you initialize the page this is the code that we need here right we need to just fetch these uh leave days right from where we're fishing data if there's nothing just show you know just a container say loading right or rather this is not the best way or just say no leaves found right that's what you need to show right but for now I'm just going to leave it here for demonstration purposes then inside we just need a container then a table reper then inside we have um history table right so let's go ahead and create this history table let's save here and let's create this history table so this is exactly the same we've done before like even on your administrator leaves table here right so it's just a repetition of what we've done you can even see here like like um these as well I've explained these this Pages here depending on the leave status you know and also how we format it here right the only thing we have removed is just the edit button here as well as um some uh other things that we don't need to let the uh user view right but actually everything else is the same we put a Tempo component here you can see from sh CN and we have our um packages here JS and FNS the page and also the tabes right then the leave which going to take uh props called history right this is basically Le but for now we just call it uh history then we just display it um to the user right so this is the headers right the table header then we just map over the history just like that right okay so let's quickly take a look how it shows to the regular user so once you have everything and everything is refreshed if you go to this route and this port uh history like portal SL history you'll be able to see only this so it shows you the type when you requested the period that you requested and also the days right you can even more format uh this date to be more descriptive but I think this is more descriptive as well right and it shows you when was it updated if there's an update and you can be able to see what update did it so basically this is the complete uh side um um of the user route so that's what you can only be able to see so in conclusion we can say the only thing we just need to conclude basically on the general user is just to display the current balances here right that's the only thing otherwise on the user facing uh General user uh interface we're done here right okay so let's proceed to the other sections as well right so let's go back now to the administrator uh kind of view right we are done with displaying the leaves and we've done implementing how you can edit the leaves as well as the users and the leaves so the next step we need to work on is actually the balances right so let's work on the balances side of things in terms of displaying them right displaying them and editing them right let's go ahead and do that all right let's take a look at our completed project um balances table so it's on this route dashboard / balances right there's an option for us to edit a balance right we can edit them just like that right then also you can see each balance like for example for this particular person he's got a year and it tells you like an anual here it shows you the group for anual family shows you the group for family all the way up to you know the last one which is unpaid then also on a paid here you can only see it's only used right exactly so want to create something like this in a more clever way right so let's quickly go into our code Ed and check how we can do that the process we're going to follow is exactly the same as what we did on the leave um um side of things right you can see in the leave here we've got the main route which is for posting what you receive from the client and also the dynamic segment where we can actually be able to edit or patch right so we're going to do the same we've got the main route here for posting what receive uh from the client as well as the dynamic route here where we can be able to do editing right then if you go into the URL right which is balances you can see it's exactly we have got a way to edit to present the data on a table as well as to initialize that page right so let's start from here the code that we need here right so the code that we need There is almost the same as what we've been we're just following the same procedure what we've been doing before in um on the leave right on the Le side of things right so this is the code that we need right um the code that we need we need to get all of the current users logged in right obviously this should be an administrator or a moderator right and this is the body that we're expecting to get from the client right so we check who's permitted to do editing it's a patch method then we receive the body we are interested in getting the ID and just spread the rest of uh the data that we receive we not going to do destructuring here because it's going to be a lot to destructure all right let's just spread and say uh you know data just like that then we can just simply update our balances in our database right if everything goes well we send a successful Jason message right otherwise we show an error right so once that is done then let's go to the client side of things the client of side of things inside the page right inside the page here we need to populate that with uh this code that you can um get right so let me quickly populate that right so this is the code that we need it's exactly the same what they've been doing on the uh Lea side of things here right so we make sure like we have a table right then we can get data right so we need a way to get balances right so inside lib data folder we need a file called gate what balance data right so let's quickly go and create that so let's go in our leap data and create a file quickly here right so it's going to be get balance data. TS just like that and let's make sure like we have the code that we need let's get hold of the code that we need all right so for now I'm just going to grab everything right I'm just going to grab everything for now both the user as well as the administrator right all right right so let me not focus on this for the user right now let me just minimize it we need to know who current logged in and you also need our Prisma right from our library from our Le Prisma right so we need to make sure like this person is an administrator who should be able to edit the balances right so we do a checking here right then what we can do um is to actually get all the balances that we need right so we need to fch all the balances apologies I said to edit here we're just fetching right so that's why I said in the beginning we're not going to use an API route here we're just going to just directly go and search and just put um permissions guard here right just to make sure like we sent to the right person the data right okay then we just rain the balances here exactly what we've been doing before right so once we have that it means in our page. TSX here right let me arrange page. TX we can be able to import that and you can see we're importing here right so if we there's nothing we can just say no balance is found right then we can need a container and also a balances table right so we need to create that balances table right so let's get balances table here right and let's populate the code that we need in our balances table right so it's just simply exactly almost exactly the same as what we've been doing before this is the table that we need right so on our table right um we need a clever way of um making sure that um we have something like this right to create a complex table just like that right so what I'm going to do quickly according to our code you can see here we need to create um a function rather which is called uh render table cells right we need to create that function and it retains a table cells with a table row inside right so that at the end we can have this kind of a display like we have an anual here then inside there's a row we have a column here then inside there's a row just like that so that's what exactly we're doing here right so we are going to use this function that we're going to create here it's going to take in an array um of strings code cut categories right then it will just um render it right then we're going to make being over credit used and available right and we're just doing it in a funny or funny way right okay right so this is the way we're going to do that and once we have that render table right then we can come here and render those sales right okay so i' would like to give you this as a Challenge and try to break things and see how that table layout can come out like this right but this is my way of actually um making sure like you have something like that right and you can see here the r Tempo Sals is expecting something called you know uh uh cell types right so I would like to go quickly and create a custom type for um for for our what do you call it for our types right so instead of uh putting everything in global. TSX here I'm just going to say uh index I'm just going to create a file here called index.ts just like that right then we will need um those types we need to create those types so let me quickly get hold of that and show it there right okay okay so this is the type of um way we need our cell types to be like right so these are the celles that we creating we're giving them this kind of um you know uh typ script types right just like that okay then let's come back here right then our set we now need um what do you call it the edit balance right we now need the edit balance component so let me close this and let me close this then edit balance component let me grab the code is all that we need there right and as you guessed it it's a dialog rer right okay so let's come inside here and paste this code and as usual it's um it's a dialog repper so we need to import all these we need the dialog rapper then we need some of these um you know hooks or yeah use reducer from react and obviously we need other components from sh CN our tpes from Prisma client and our icons right now this is kind of complex in terms of our reasoning how we going to you know get of of the uh current state manipulate it and send to the back end um updated state right which is going to be you know um clear and current right so this is my way I how I did it right we fetch the balances from the back end those balances is going to tell us what's the state of those balances currently in terms of right um how many I was the credit how many is used and how much is available right but now here since we are editing right we need to get of the current state so this is what I've done right I've created this component here called initial state or this object here called um initial state right right so once we get this initial State then we going to use a reducer right I'm going to use a reducer such that we can be able to change what is the current state versus what we're changing it to right so an effective way of how we can do this is actually to make use of Aer right another way you could have done it is to say to create multiple user um use States here like for example you can say cost annual credit State then you say equals use state right so you would write them a lot of them here right but the most um clean way of doing it is just use a a reducer right so a reducer takes in a state right then in action then we return back the state all right the updated state right and the action to be done right okay so what you're basically doing now at the end is that when we change this particular input here for that particular um key right cuz we're taking in a key so the key is actually if we're changing an annual only the annual is going to be changed if we're changing the study stud only the study is changing if you changing the health only the health is changing so that's the complex or kind of you know complex way of how we handling it here right okay if you want to really understand like what's the logic behind using a use reducer like taking state for preious state how we can manipulate it right and update it and the at the end we can have the updated state so that we can be able to send it to um to to the back end I'll encourage you to really take a look at react um use reducer right just take a look at use reducer you can go on the documentation and start that right otherwise my job that I'm doing here is just to simplify to show you which path you can take right there are multiple ways of doing it but the logic is basically what I'm explaining in Simplicity right okay then obviously have our you know submit function right submit edit balance function and then we make a call to our API right then we send in this uh body right if everything goes well we show a toast otherwise we show an error message right let me quickly save and go back to our you know project the one we're working on right currently it was saying it was giving us an error CU there was nothing there but it's going to refresh right now then we should be able to see exactly what you're seeing here right exactly all right let me explain something in terms of this table right so you've seen I've created a rapper uh component before right just to make sure like everything is aligned uh all the components we creating they'll be aligned like that so you can see our header is basically aligned on the there some padding or margin on the a the side right so that's what Also the table rapper is actually helping us to do right and the other thing with all our tables you can see they are actually responsive right you can be able to scroll from left to right just like that you see exactly all right okay cool so this is fully loaded right now and you can see there is our table that we're actually getting here right we are getting this table just like that right obviously there's a hydration eror there I'm going to fix it later on but you can see we can now be able to what uh to see the table and also have an option to edit right can see you can able to edit so let's just quickly edit here all right so we're going to say used one then the available should be 20 right then here let's just say let's just give these ones like four let's give this five and let's just give like this like three right then when we hit this if everything goes well we should be able to see a toaster here as well as um this should automatically close this dialog that we have currently here right okay there we are edit successful and the dialog closed then you can see they actually the changes that we actually did right now so it means everything is working here right so we have accomplished um making sure we fetch um data or we edit data we fetch it from here we display it on our page right so we done with this part then we can move to the next level right so the next following uh Parts they're kind of simple um I think what you can look at right now we are done with users displaying the leaves displaying the balances that we are currently let's just go and simply add something here on our dashboard right although we're not going to fet data we're just going to Simply display some cards here right just going to Simply display some cards the same ones that you can perhaps see on our completed project which is just simple CU all right on the completed project the dashboard landing page right or on our landing page when we hit the dashboard drop there's a lot that we can display here in terms for example like downloading data you know showing all the statistics and graphs and all sort of stuff right but um I don't think they're necessary at this moment cuz this project is just for demo purposes you can actually expand it from here right you now have a way of fetching data displaying it right so I'm just going to just display this dat data it's simple it's hardcoded data it's not something we're fishing from the database and displaying here right so just to make our dashboard look at little bit nicer right so that's what we're going to do on our project we're building right so on the project that we are building we actually on the dashboard route right okay so on the dashboard route inside here where this page. TSX we need two components we need um one component code month date range picker as well States states cards right then we just simply inut them here right so this is our DH dashboard page. SX right then let's populate with this code once we populate with this code then we can create a States card so those are the cards that we're just displaying there you can see we're importing a card from shum right then there are some um icons that we are importing from react icons as well as this um create element from react right so we just hard coding data here we just saying State cards then we just uh return back uh State cards right a card which just shows you you know some simple data right exactly just like that so this is ex um you can scale it up it's expandable code right so so that's exactly what we have here you can update your code to be like that then when it comes to the month date range pick as well you just need to get that okay so I was getting some components from sh CN so there's some components you might need to get right so you need to install this dependency I'm sure it's already installed as well search CN but if you don't have make sure you have it right react day picker right and also these components from sh and just like that right then what I'm just doing basically here I I need to just show uh the months right the start month as well as the end uh uh date right then I put them in a use state right then I just show them so I'm making use of sh CN um uh component here is you can see in terms of um um showing this data on a pop over right something like that so if you go on sh C and documentation there's a lot of examples of how you can do that right for example if you come to the calendar here right you can see yeah and if you go on the code it will tell you like you know what you can see share in your in your code right um I think there's a more complex um code now this is for for selection right so if you go to the repo right if you go to the repo and under examples there are different examples of how you can you know uh manipulate your data how you can um show it in a calendar right so that's where I was getting all uh these other you know ways of uh executing my code to be the way it is like for example you can see here it says pick a DAT right you can see you can be able to uh you know select from month one and month two so this is basically the the the the example I used right so go to GitHub make sure you get all of that code otherwise um we just displaying what we have here right and I was just following exactly what he did on GitHub right and just manipulating to my own design right once you have that um then you should be able to display that so there's no logic that you're getting from the database or sort of stuff right then you can be able to see everything smoothly showing here right still our dark mode is still working right you can be able to see it nicely in dark mode is well right so basically we have done with the portal um no we are not done with the portal right we need a way now of displaying those cards on the portal where we can be able to see the current balances for you know the user right so that's what we're going to deal with right now right right what you're going to do is actually to show uh the cards here which display um the balances or the credits whether they used right just is what you're going to see here on the completed project you can see it displays the year the type of the leaf the credit the used and the remaining right and also it shows this um heading here say current year balances right so only showing the balances for this particular year that's what we showing here right so let's go ahead and do that for us to achieve that what we need to do inside our portal route portal we can just create components the first component you can create is user balances. TSX the then you can also create a leave cut. T6 file right once you created that let's start with the page. TSX this particular file right the home of our portal right the the the homepage of our portal route right then what we need to do inside here we need to do something like this right I'm going to quickly populate right we need um another div on top of component um calendar right so we need a div so that div what it does it will display um this H2 um element which is inside another div as well right but we are now using a current itary condition here to say f current ear balances right so remember we're fing data from here liap data right then there's this function that actually hidden before right so this is to get uh the user balances right so the current load in user let's fch for the balances where it matches the user email as the as well as the current year so here you can see we're just getting the current year right and it's easily manipulatable right if you want to change it you can easily change it this one right but we just need to display for this here right okay all right so if um everything goes well then you can just return balances right so balance is actually an object which can have these properties or it can be now right okay so once we get that we just fet data in our server component here right once you say once you fetch data then we check if we receive data if it's not now now if it's um if it's if we don't have any data show this h2 tag otherwise show this tag right just like that and we just put nicely in a container right and also we can do the same to have a user balances uh component and it takes in props right which is the balances it takes in those uh balances and should be able to display them and the type should be balances that we get from what uh Prisma client right okay once we have that out of the way let's go to our user balances um file and let's populate this code right this is the easy way I found so far right just need to have a container then we uh redo again we we we duplicate effort in terms of say Live card we have multiple leave cards according to our um the number of Four Leaves that we have you know oranization right and you just put them in a grid and St them like that right if you have got a better way of how you can um you know make this code more reusable you can just let me know in the comments right but otherwise we need this S card now so we need to go to our Le card and actually populate the code for the Le [Music] card right you can see we are importing um um from sh CN we are getting hold of the card component right and these are the properties that we need for that card we need to get hold of all these um props then we display them so it's display here leave type and also show the credit for each and every um type so we display the credit they used as well as the remaining right so once we have that out of the way just like that we should be able to see um that page being displayed on the current page that we're working on right so if we let it to refresh nicely we should be able to see something like this right so depending on the user who Curr logged in we should be able to either see no balance is found or else we should be able to see exactly as we're seeing on the completed project where it says current year balances as well as to display these uh live days right right just exactly like that okay so let's go back where it's actually loading right so this particular user on this database does not have balances so it shows us no balances is data found then it just shows us blank here right okay so that's it perfectly right so we've done so much in this um tutorial we've gone this far the only last thing we need to do is to actually display now the events here so that's the next next task that we should be doing and first of all we can just go into settings right we also need to put the loader as you can see where there's a loader right so in our events we need this kind of a layout right we need this kind of a layout where we can be able to add an event here and actually being able to see them here right I'm not going to implement the delete functionality you can do that on your own right so this is the layout that we need and I'm sure it's also very responsive right can see it's a responsive just like that okay so we need to have that layout so let's go ahead and uh create an API for adding an event cuz we need a feedback then we can also fet that data here right currently if you navigate to the dashboard SL settings route there's nothing that shows here right you can see it's actually giving us an error right so we need to fix that so you now know the drill how to do it first of all create a route then we need files right that you can work with there right so we need a page. TSX to initialize the page right then you also need a table then you just need some other components according to your styling right and also on the back end side of things you need an API route right okay so as usual inside the API folder let's create event then let's create route. TS right if you want to implement um how you can edit or how you can delete you need just uh to create a dynamic um route here as well right you know how to do it just exactly like in square brackets you can just say event ID or ID simply like that right but let's take a take note of what we have now and let's work on it right the way we're creating apis uh the the root handlers here is just the same right right I'm sure you now know you don't need explanation on this right you're expecting a body with this type right it's a post you need to guard your route here then in the tri cage you just destructure the body right if you don't have any other thing to work on just proceed to persist that data into the database then send a response or an error simple as that we've been doing this for long now you're now familiar with that once get that then you need a way of fetching those events right so you need a fetch so this is posting you need a get a way of getting so like I said we not getting we're not using an API to get yeah right we can just simply fetch them directly since we're using xjs right and our application is small right so inside here inside the lib folder right we need a a file I think you can guess the name of it right it's called get event data. TS right so let's create that and call it get event data TS just like that and the co the code you can guess what type of code will be here right just a way of getting hold of what of the users data right cuz we are displaying this to a regular user right okay you can see we just fetching from um pre isma and we an array yeah okay and we just best practices we just got our you know our Fage Handler function here right if there's an error just throw an error just like that right so once we fetch that data now then it means in our page. TSX right in our page. TSX here for settings remember we now need to go into settings right we now need to go into settings right we've created route so the page. TSX we just need to populate data there right as you know we F data and uh we display it right okay so let's populate that quickly right so we have initialized our page and um so we inside the dashboard right dashboard then there's a subro called settings right so just please take note of that so the page as you know it can fish data right this a server component right okay so this is what we can do this is the code that we need we don't need a table rapper cuz we not displaying in table here right we don't need that here right then we need uh to get uh events data right get events data then we need um events um table as well as an add event right so let's get to fix the events table right so events table you now know how it looks like right we always need a table rapper and so forth and so forth right but in this case I don't think we need a table rapper cuz of the layout of how it's going to show on our UI right so this is the table that we have we just going to get hold of the all our events in the database right all our events in the database and you be able to present them table like this right exactly then on top we just going to have this T here that shows like these are events right exactly and our table events get props right from the parent which is events right make sure you import from sh C and this component right and also the types from Prisma client right okay let's hit save and as you can see also having an error we need an add event here comp component so our a event component let's populate code for that all right our Ed event component is just like what we've been doing before we need a form we make sure we utilize Zod if we should utilize Zod for you know um capturing errors user input errors right and so forth and so forth right so this is the code that we have here make sure you have all your inputs right and you can just type this code exactly as it is then you just need to hit your API SL event right then you can just return a form here right exactly like that we've been doing this before just repetition right here what you're doing right make sure you update your code right make sure you update your code just like that right so you see the process We are following creating an API route fetching data then come to display it here right the way you're going to design and uh display your data it's up to you right but currently this is where we are right okay right then this is settings right this is settings I'm getting an error here say the default export is not a react component slash settings right so this page settings export default settings right why is it not um con settings I think there somewhere where it says settings as well right let me quickly fix that all right so apparently there's no error what I just need to do is just refresh my page right okay so right that's basically it that's what we have let's go and check how it is displaying on our UI right so this is the completed project let's see the project we're working on there it is all right let's try to add an event um for example let's just say holiday H just like that description just say just some random ways right let's just pick a date and the date can be the 25th of January and let's hit submit let's see what we're going to get back from the database if everything goes well we should be able to see a toaster to say um event submitted successfully otherwise we should be able to see an error right okay so for here it's kind of difficult to see an error you can actually make use maybe of the dialogue right or you can just make use of the um d2s right all right let's just check what's happening in our console or in our terminal actually right the event is actually added just taking time and should be able to automatically display here just like that right so you see it's actually showing here right all right this is not the end we are now able to capture events and add them right but remember when we working on our code and when it comes to updating lift days right in our API so let's go back there was a line that I actually commented out this one right I commented it out so I want to bring it back just like that right so this is going to be a way of as well of where we can automatically um send an invent to the database create an event in the database as well right because when someone leave is approved It's actually an event and we need to show it right then the next uh final part is actually to manipulate our calendar so that it can be able to accept and display uh those events on the calendar right so we need to have this now this if we go to our portal here right we should be able to have this kind of a pop pop over just like like that right and you should be able to display on our current project that we're working on right now so let's go ahead and fix that all right so for us to be able to manipulate our events um data right to display events data we just need to manipulate uh the page. TSX file which is actually the portal landing page right so portal page. T6 then we need a way of fing events right remember we're fing from our lib data right we're getting this then we say cost events then we pass those events to our calendar props right just like that that's what we need to manipulate here right once you done that then our calendar it means it's now receiving what props it's now receiving props which is in form of events in an array right right like that so once we receive those events then we need to change this part here just down there on the the grid right we need to add this code we need to update right our code to include this right so basically in this T here you can just simply add this code here right up to here right once you add that code up to that please take note there's also an event pop over as well right there's an event pop over component that you need to create so our event pop over component is this one right we just importing that navigation menu from sh CN right then you make sure you import all the required libraries and functions right here and icons if necessary then you have to show it like this right so that's what the component does right so what we showing is just showing event title and event description simply as that right so that's what we're doing on our calendar and you'll be able to display it on our calendar like that right so let's take a look and what see what we are displaying right remember that uh event that uh created earlier on right it shows here right exactly so ladies and gentlemen this is our application so far so good right let's just try to quickly um add an event here again and see if it can show so this time around is going to be the 26th right so let's just say hi 26 just like that description just going to write some random words right and also select the 26th and click submit right if everything goes well event added and it should automatically show here right there is showing here right so if we go back to our portal on our calendar there we can see it right so that's basically it right our application has grown and we can do all these things we want to do so far on our um application yeah as you can see we can navigate all the routes we can be able to manipulate and see the data according to how we need to see it um all the balances can be able to edit we can be able to add you can be able to view our dashboard side of things and on our calendar we can actually be able to you know just have a nice view and a nice flow right and everything is working fine in terms of responsive the page is responsive just one thing we need to fix before we finish right if we log in as a like regular user as you can see here right although we have got an authorization guide on our on our fetching data right uh remember when we say if the user is not an admin just send an empty array this is what you see but obviously as a regular user you should not even be able to come to this route here right you should not be able to come to this route right so we need a way of protecting that so if you're familiar with uh nextjs you know how to do that right we make use of Midway so right inside um the home on the on on the home of your project right here create a new file and that file we're going to call it midway. TS right TS just like that and what do we do in this uh case what we need is this particular code here right that we can be able to put restrictions on some certain routes right and allow some certain routes right so for readability purposes I just write if statements if statement if statement so that you can be able to know what exactly I'm doing right I didn't want to refactor this code right let me hit save so we are getting what is called with o from next o Midway right and get a response from next server right then we create an array of strings and we call it what rows allowed to O right just like that exactly then we export a function default code with o right then that function we just call it Midway right takes in the rec right so if the path name is equals to the war route right and there is a token right we should just direct uh the user to the portal so this means if someone comes on our homepage of our application and they allowed to um log in into our application they can just simply be directed to the portal right okay otherwise if there is no um if they at the portal but there's no token they must be sent back to the home route right then in terms of the dashboard right if you are not an administrator or moderator you should only be directed to a portal right exactly just like that then we say cack authorized that takes in token right just exactly like that then you put the routes that needs to be matched in a config just like this right so all of this you can get it on next all documentation as well as um uh nextjs documentation right so once we have that in place we should be able actually to restrict um the regular user right let's try it out and see how it works right so now we are on a page that is restricted and we trying to refresh right let's see what happens after refreshing you see after refreshing we are redirected back to the portal right which means we are no longer allowed to go to the dashboard right let me try again to go to the dashboard right dashboard SL SES just like that right let me select this you see we directed back to the portal right then um let's try to remove the token right by logging out right so we just log out by clicking this button here as a regular user right so you see we're logged out right then we are taken back to the login page right we're taken back to the login page right so that's also explains why when we initiating our project right I told you like although I have uh you know on our page right I'm going to have an O component as well as the login component right so it allows me like to say for some reason if you can't see the login on the login page or on the Home Route you should be taken to other page right so basically that's the whole application so one last piece that you might find yourself wanting to do before you deploy your application to fael or another platform is just to run Yan build right Yan build or npm uh build right so that you can be able to compile you know your your your code and find if they any errors right so mine compiled uh perfectly fine just like that I just need to push it to GitHub right so that's basically the whole application thank you ladies and gentlemen if you enjoy this tutorial please give me a thumbs up write something in the comment section subscribe follow me on Twitter give me a start on GitHub thank you so much

Channel: De Mawo

Views: 14,008

Keywords:

Id: F_d3TviPLOk

Length: 282min 12sec (16932 seconds)

Published: Sat Jan 20 2024