Dev Log #16: Employee Directory & Admin Auth

hello hello and welcome back to Dev Vlog in this series we're developing payroll software from scratch in this episode we're going over some exciting improvements setting up authentication for the control center and putting together a beautiful employee table before we get started on today's tickets let me show you some exciting improvements on the landing page the control center status has updated from the design phase to the development phase thank goodness we made that change our millions of investors were getting so nervous scrolling down a bit this devlog section is quite outdated so I threw together some logic to always display the most recent episode not going to lie the code is pretty straightforward I just hit the Google API endpoint with the devlog playlist ID then I grabbed the last video in the playlist which is the most recent one and finally I returned the embed link not bad pretty cool and look at this we got some professional unit testing done for the main app I lowkey had to do this since my coworker called me out on it all right although we might switch to vest or vest pretty soon we'll see all right all right let's do some tickets first up setting up authentication for the control center right off the bat let's put together the admin database model I hope we get this right the first time I don't want to redo all of this it's it'll be so over all right so we can't let users log into an entire organization with their personal account so we'll do authentication using this new model therefore we'll need an ID an email and password we'll also want to eventually Implement different levels of admin privileges so we'll have a role attribute next we'll want to give organizations control over these admin accounts so we have an active Boolean attribute they can use to toggle them on or off now for the relationship will of course need an organization link but I'm thinking a user relationship as well for security purposes there should be a specific user responsible for each admin account and anything that account does we we don't want random accounts just floating out there in the metaverse you know unattended and that's it I think we're done since we're sharing the schema with the employee facing app we should make an mpm Library which automatically uses the same schema for both repositories however I don't know how to do that so that's something I'll have to research later so for now we're done we'll want to eventually test this so let's create an admin account that's connected to my organization and user next up we'll need to update the off Route for the admin app we won't be supporting Google authentication until further notice so let's scrap the provider all together we then need to modify our session logic to use the admin model instead of the user model okay okay moment of truth let's log in and perfect very nice Hold Up Wait A Minute something ain't right reverse it and throw it back for a second we need to change the company email column to just email because it's messing up some built-in Prisma functionality here is the final session logic don't dets me please and we can see that this worked because the admin is off automatically redirected to the connected users local isn't that wonderful come on now all right very cool let's push these changes up and move on to the next [Music] ticket displaying all employees in a lovely little table all right to get this started we need to set up the employees route which in nextjs is just a new directory with a page component navigating to/ employees we can see our page showing up CIO I threw together another sidebar nav element for this route with an icon from flowy beautiful looks pretty good and works as expected now for this ticket we have to make an engineering decision a good programmer would build a general table component that could be reused in various parts of the app benefiting Us in the long run a fantastic programmer would rack up Tech dead throw a ticket into the backlog and make a single use table today and that is exactly what we're going to do I'm just copying over all of the table components from our main app but you can check out the linked episode to see how we put it together the first time now comes the tedious job of converting this from a pay statement table to an employee table abusing find and replace we'll need to grab all of the organization's employees and we can do that using a Prisma query directly in our server component all right I know it's barely working but it's a proof of concept all right all right let's fix up the table make it into a very short montage and here's the final code our server component is pretty clean and straightforward it passes the employee data to the table including the department salary and user relationships the table itself is basically exactly like the pay statements table we built together just using the employee data instead with columns for name email occupation Department pay group and salary I've also set up an employee model which is empty for now I have updated the filter button to now filter departments instead of pay statement types and of course we map each employee to an employee entry component and here's the final result it looks wonderful and fits well with the layout we've set up and of course we can sort on all of the columns we can filter by [Music] departments and look at this we can search by name very [Music] cool o I almost forgot about privacy mode if we turn that on we can of course hide these salary [Music] amounts holy this is a huge commit I got to remember to commit more often but we are [Music] done thank you so much for watching this episode of devlog the admin database model authentication the employees route and the employees table we've done quite a bit this episode for the control center I hope you enjoyed this episode and maybe learned something along the way make sure to subscribe to follow along and see where this project goes otherwise I'll see you in the next one [Music]

Channel: Farzan Yaz

Views: 406

Keywords: Farzan Yaz, Farzan Yazdanjou, Dev Log, Payroll Software, Startup Journey, Software Development, UX Improvements, Interactive Menus, User Experience, Coding, Programming, Tech Innovations, Software Updates, UI Tweaks, Tech Startup, Coding Tips, Developer Log, Project Management, Admin View, Client View, JavaScript, TypeScript, React, Nextjs, Figma, SaaS Startup, tailwindcss, fullstack dev, OpenAI, Google, ThePrimeTime, server actions, Vitest, Jest, admin auth, user table, user model

Id: aFem_1nLPQw

Length: 7min 55sec (475 seconds)

Published: Fri Jul 05 2024