Dev Log #13: The Entire Profile Page!

hello hello and welcome back to devlog in this series we're developing payroll software from scratch and in this episode we're implementing the profile page and displaying all of the users information all right first up we're going to work on displaying employment information on the profile page let's head over there and start working on a simple component we can reuse the base card that all components use and add a header from there we'll want to map out the various information we want to display using a simple grid for now I can think of displaying the employee ID occupation start date pay group tax Province and Company email all right let's make those bold and then we can use some temporary information to see how it looks now to populate this component with actual information we'll grab everything we need from the session's employee object just like that we have access to the employee ID their Department occupation and everything else all right so here's what it looks like with the info grabbed from the database pretty simple yet pretty clean and of course we can translate it to French as well very cool let's push these changes up and we are done with this component at least for now we handled employment information and now it's time for personal information right underneath we'll duplicate the base card with a new header and for this component we'll opt to use text fields for most of the info just so we can easily support updating personal information in the future for the basics I can think of including fields for first and last name sin and date of birth for the user's address we can include the street City and postal code and we'll want to grab a drop- down component from flow bite to use for province some modifications to make it match everything else and it looks good works as expected we can select our Province San and finally for contact info we can include home phone cell phone and the user's personal email to make some of this information available we'll need to update the database which means we then need to update the route file this is not a good process but we'll make it a thousand times better in a few minutes right after I deal with this broken migration all right good as new we can now grab the personal information we need from the session and pre-populate the text Fields all right very cool works as expected I also need to update the types of the session object which makes the process even worse but I promise I'll fix this shortly but let's get all the fields going first here's date of birth and for the few remaining ones we'll need to add them to the database schema I'll make them optional for now just so the migration does not explode I promis I'd fix it so here we are the session type is now super clean and updates according to the schema and the route just appends the employee and user objects to the session with some cleanup here and there Dakota is looking pretty decent and we have all the fields that I can think of so here's the final component displaying all of the user's personal information in an organized grid I populated the drop downs with all of the possible options using shot gbt and set some better placeholders for the Tex Fields as always let's push these changes up [Music] oops I forgot here's what it looks like in France everything still fits and the drop down options also translate nice one more ticket in the bag let's move on to creating a quick info component for the profile page before we begin let's quickly put the greeting header on the profile page as well cool looks pretty good and now we'll want to basically copy the quick info card from the homepage and change the fields to information that the user would likely be looking for on their profile I think we'll want to display the employee ID their Department pay group and tenure to calculate the user's tenure we'll subtract the current date by the employee start date and divide that by how many milliseconds are in a day and just like that we can see that I have worked at nobility page for 3 Days perfect I realize that we currently store pay frequency on the organization which means that all employees have the same pay group but that's not very flexible so we can remove it from the organization model and instead add it to the employee model run the migration and it breaks not to so R I fixed the migration and now we have all the information we [Music] need let's push these final changes up and we are done with this Sprint let's take a look at the final [Music] results [Music] it's looking fantastic I think that's about it for the profile page unless you guys have ideas for what to add to it otherwise we can move on to another exciting feature in the next episode thank you so much for watching this episode of Dev Vlog I hope you enjoyed and maybe learn something along the way I have definitely learned a ton since starting the series so make sure to subscribe to follow along and see where this project goes otherwise I'll see you in the next [Music] one

Channel: Farzan Yaz

Views: 234

Keywords: farzan, farzan yaz, nobility pay, dev log, table design, web development, prisma database, javascript, typescript, react table, paginating data, nextjs, flowbite design, tailwindcss, UI design, dark mode design, reactjs component, developer log, full stack development, how to plan a project, project management, coding tutorial, frontend design, nextjs routing, user profile, profile page, update user information, how to create a profile page, nextjs session, nextauth sessions

Id: F0Vs8XRaDvs

Length: 6min 57sec (417 seconds)

Published: Tue Feb 06 2024