Discover the Best Bootstrap 5 Invoice Template for Hospitality

Bootstrap 5 invoice template for Hospitality

hi guys welcome to kod lab this is video number 27 for hotel M system in Django with nextjs in this video we will work on the invoice module right in the in our previous video we have seen that how we can show the room booking list in the user dashboard and this is the list so now we need to create the invoice right so as soon as booking uh as as soon as user create the booking uh we will create the invoice right and we will show here the link so and the invoice view is uh uh looks like I'm going to show you so it will looks like this right so here we will show the logo and this is the uh who creates the invoice right and uh uh two this is Bill to information and this is invoice number invoice date due date payment date and here we will show the uh room number Price tax and total right and any note we can show here right currently uh it will only be the one item always but uh if we create multiple rooms booking then we will show all the items right so uh let's try to create this right so first of all we will create the model invoice model and then we will create the invoice and then uh we will create the template for uh showing uh this kind of uh thing right so let's start to do that okay so let's create the model first so let's open the visual studio and let's open the project why this is every time I need to open okay so we have open the project here right so first of all we'll go to the back end and we'll go to the model so here we have a booking model right so now let's create let's create the invoice model right so invoice right and here we will so first of all we will add the booking right and then let's commment this for now right and then it will be a public ID we will also add The UU ID so that we can that will help us to look up the fields so this should be uu ID equal to models. U ID field right and uh yeah this is fine and then uh payment status let's let me remove this and then uh this is the status of default is booking status then one more status payment status which will be a character field right max length equal to 100 okay it should not be null by default it is it will be pending right and then we have a uh one more thing the public ID that we will show that alpha numeric characters so let's create that it will be invoice let's say invoice number correct so invoice number right and one more thing due date right so due date is a booking date due date will be the booking date so we'll say we'll say so no need for due date because we can show the booking date in the in the invoice right so this is our booking it will be connect to booking right and uh booking and uu ID invoice number this should be one to one field no this should be one to one field two uh string on it okay on delete model. okay fine so booking uu ID and invoice number and payment status correct so by default invoice number we will add something let's say n equal to true so we will create oh sorry this is fine okay so let's review one more time uh we will return always we will return return self dot invoice number correct okay so self. invoice number right so now let's uh see that so here we have a uu ID and it should be unique so let's copy this one and we can add here uh where is our invoice here okay so editable false unique true correct okay invoice number this is fine okay so now let's uh migrate this ay manage py make migrations right and then py manage.py migrate right then we will okay one more thing now uh when we create the when we create the booking right so we will create the invoice right so what we will do here definition save method right no need for all these things right and here we don't need anything this will be save okay so what we will do uh okay let's we will create a signal right with the signal we will save this so whenever the booking uh create then we will we will call this via signal right uh we will learn it but let's uh uh we have already migrated now so let's open the PG admin and we will see that okay so let's create the signal for uh creating the invoice as soon as a booking created right you can see here we we have a table for uh invoice correct so what we will do now uh here in this rooms app right we will create a new file uh called signals dopy correct and here from Jango do db. models. signals import uh db. models input signals right and from from Django do dispatch import Receiver right and what this receiver function will do we will say post sorry from the signals we need to import so here you can see that uh we have a uh lot of event uh we have mainly four events right post delete post initiate post migrate post save right so it means whenever we save the model particular model we will Define here so it will run the function right let me show you so here on the post save sender equal to we have to define the the model here so from from rooms. Models import booking so whenever it receives the post save for booking it means whenever booking will save it will run this function right so run after H Crea will say create in voice right and it will be save right and then it will be created and then it will be instance star arguments right and uh if created it means if model is created then let's say pass and let's one more thing let's uh print this this let's say hello right and we need to connect this signal in our app right so here we need to we will overwrite the function ready right and whenever this app loaded then signals will all signals will be also loaded so we'll say import rooms. signals correct so if I'm correct then it should work right so let's say py manage. py run server accept argument keyword arguments okay so one more thing we need to Define keyword arguments okay all right so let's uh try to create the booking so what we need to do let's go to a room types right single room right then please choose a room one2 then we'll choose date we'll choose check out date detail we'll say test Sumit all right so this is doing this is going to here we have error okay uh let let's say let's say we are not calling this right first of all let's see the error uh sorry let's see the bookings it's created or not here and if I descending order do the descending order so 25 so yes booking is created but uh it's not redirecting right so let's go to View and uh not view actually uh uh uh go to website website view oh no so we have here Recent Bookings my bookings yeah this is booking create okay so it should why this is not showing the data let's go to front end frontend Source app uh not app components check out oh sorry uh rooms booking form okay and then handle form after that it should go to check out let me remove all the data from here right and we will test again till delete and uh booking profile booking invoice we have invoice data no this is invoice this is booking and uh where we are also saving data somewhere no okay so uh let's do the booking again it is going to room types okay let's do the booking again so room types single room right and then one2 checkin date check out date and then test and then submit okay so it's working it means uh something is uh not working here right so if I sa why this is showing pass Let's uh delete this delete this booking and do now again this is the beauty of coding you have to do the same thing again and again no yeah okay so we developer also should create the Laughing Club h okay so submit okay so something some error is in the okay got one calling B this may be because we have writeable fi on the serializer know valid argument let me see this again let me check this again I think this should be okay let me check this again this arguments okay so we got the issue the issue is uh in the serializer so this should be not writeable right so we added in the readon fields okay this formatted data and one more thing uh no need to add here the self right so once created Okay so so let's uh one more thing invoice and what uh okay so we have model uu ID okay so uu ID I think it should be created automatically so objects. create create right and uh it will create automatically okay so invoice number so invoice number is equal to invoice right and then uh we will add the instance ID and then we will add the time stamp okay so input time correct so it will be int time to right so here int time to time so it will convert uh this is the time seconds and it will convert to int so we will not get uh decimal numbers so invoice number equal to invoice number booking equal to instance okay and what else we have payment status is by default pending okay so invoice so with this when whenever the uh booking created it will create the invoice right so let's uh do one more time okay so let's go to this and uh create 25 30 and then test submit so it should create the invoice let's see so here you can see that okay so booking is this uu ID also created so this is the invoice number okay so now we can show this uh you uh we can show this invoice okay so one more thing that we need to add here a related name equal to uh we will say booking invoice correct so do we need the migration let's check it make migration yes so manage.py migrate right so manage.py run server okay all right so now we have uh booking data uh where is that if we go to dashboard here booking history now we can show the invoice number uh amount is correct and uh this is also Dynamic we just need to show the invoice number with the link when we click on it then it will show the booking view okay so let's fetch it now okay so what we have done now we created the invoice serializer uh we Define the fields invoice number and uu ID and then we have uh we attach this invoice serializer in the booking serializer from where we are fetching the booking data and this invoice serializer we have Define our related name and obviously this will be read only and then we have this invoice right so if I see this now data you can see here so what we have now 63 results room here you can see that invoice number and uu ID right so let's open the front end uh let's go to front end we have booking history correct so booking history is component here right so we need to show the invoice number so let's say uh what it is booking do invoice. invoice number correct and here we will say invoice slash okay so it will be it will be the link so what we will do here invoice slash right so this booking sorry no need for double bracket okay so invoice uu ID correct so uh what is this invoice it should be correct and why this is not showing The UU number booking do invoice. uu ID okay let me check again this three results invoice invoice number is correct okay let me remove this okay now let's see inverse number is also not correct why booking dot invoice okay let's see this objects are valid and if I say invoice number then no then if I say invoice number this okay let me check it why this is not showing okay so the issue was actually our previous uh bookings have no invoice so that uh when we are trying to fetch here it was not showing so what I've done I've deleted all the previous uh bookings which I have no invoice and now it is uh working nice okay so uh let's create this uh booking view uh sorry invoice View and then we are done with this invoice and if need any Improvement then we will do later okay so let's create the view now when we click on it obviously okay so here in the user uh let's uh not in the user actually okay let's say in the user we will create a new folder it will say invoice right and in the invoice we will add here one more uh folder it will be the L we can say right uh what we have uh in the profile update now booking history uh dashboard where we have okay so room type we have a slug okay so invoice Slug and then uh we'll in the slug we'll create new file page.js and uh page.js uh we can fetch okay so this is fine now so page.js and we will copy this booking history not booking history actually let's copy this page okay copy this one okay and paste it here we'll just remove this booking history now right now let's uh access this invoice so when we click on it huh can't resolve booking history and all so let me remove this okay so this one is uh great okay so now here we can show the data of the invoice let's create quickly the first of all is card okay and then we have a I will directly done with the card body right so what we have three rows 1 2 3 and uh four total we can say four rows right so D class dlex right here we will add the logo right and uh here we will add the code artisan lab info right then one uh let's uh give it margin top B two let's say two three and four right the second row will be build to right and here the invoice info right the fourth one is uh it will be a table right so we'll create a div directly create a table actually okay so we'll say room uh price and then text actually will not include this text here okay this is fine then we have a total right and here we'll say notes and this will be grand total one more thing justify content but right so it will push the no need to here and need and hand need okay let's go to here so four sections room price total uh let's add a class so it will look like table table Ed B great okay so now we can just fill the info here right so if I say t body TR so this is the invoice data okay so we need to uh fetch the invoice data here right so when we are click on this uh ing to this uu ID we need to fetch this data okay so let's Fest the data and uh show it here right and this is simple node okay and let's make it class text light how do oh this is a light secondary is fine grand total okay so we'll show the invoice total here okay so we need the invoice data here um okay so let's fetch it and uh let's see okay so let's Fest the data ing to this uh invoice uu ID right so what we need to do we need to create the API as well as uh uh need to add a function like uh this is a room type page right and here you can see that we are calling the synchronized function so I will call copy one of the function and uh paste here right and we'll say here this is we'll say invoice and then we'll pass uh uu ID correct so get data right and and uh this get data we will call here right so this function is also should be a synchronized function okay export default synchronize right and this will be invoice in detail correct okay and uh we need The UU ID which we are which we need to pass here so from the params we can get this right so we'll pass the param here it is already in the page uh router we just need to get it okay so let's see what we are passing params do slug right so what we have right so here you can see that this is the slug and uh we need this one so params do Slug and we are passing The UU ID correct so let's uh create this API now and fast the data okay so let's create the API now so first of all we will create the URL here uh I'm creating this in the rooms app so this is our URL it's corresponding uh view here we have and the main thing is lookup field is uu ID right and then we have a invoice serializer in which we Define the booking invoice number uu ID and payment status correct so let's check this how it is working and uh I have added here the console.log so that we can see the data correct so if I refresh this then you can see here we have a data right uh this is uh something is uh wrong in the header right so what we need to do here if we are using the use client then we have to here use effect correct and use a state use state so so that we can in the use effect sorry constant constant user set user equal to use State empty correct and uh what is this sorry and then use effect right and then here we have in this what we will do we will get the user right and then we will set this user so set user user correct and uh dependency is nothing so we'll add here right so it should not show the error now okay so let's refresh it let's see now okay so no error is showing so it's working correct actually we are you this is a client component so we have to uh keep the data in use effect right so okay so data is coming uh booking invoice number uu ID right so we can show the data so if I go to the page right and then uh we need to uh we need to uh this is a invoice detail right so this invoice detail we can show here uh this is Bill to and this is invoice info correct so here we can show that the first thing is inverse detail do invoice number right so if I go here you can see that no number right let's make the margin ping zero or sorry margin zero right and then we have invoice date so invoice date is what let's go to model OKAY invoice date is the same as a booking date right but in the booking we have only the uh it's coming it's fetching only the ID right so we need to uh give few things okay so what we need to do uh we need when we are representing the data we need the nested data right so let's see that how we can uh patch the nested data in the Jango framework okay so for fetching the nested data right right so we have created a one more serializer invo details serializer and uh here we have defined the uh booking right and we are fetching the booking serializer here right so it should fetch all the uh booking related data right so let's see that so if I if we go to the here you can see so data is coming so we can show that right so let's go to page right and uh this is the invoice invoice number right uh this is invoice number then we need a booking date so what we will do booking dot booking date right okay and then uh we have have payment date and due date right so this is invoice number and uh we need okay the representation of a booking date is not correct so we need things that how we can represent the date right so from the model we can do this so this is book where is a booking get booking date right so are we fetching this uh formatted date okay formatted date right so this is the date and then uh we also need the payment date I think we should give a label so invoice invoice number right date and then the last one should be payment date right it will be empty because uh we didn't add the payment yet right and then uh we have one one more thing status so if payment is done then uh we will add here in the span text class name text success we will add here paid correct so this is invoice number and uh okay payment date and if it's due then due and it will not show the payment date right and this is uh Bill to uh where is that build to user here okay so it will same as but we need to fetch the data of user that who book the room right so here we will show the name okay so what we need to do here okay let's see the serialize uh booking so booking have a user so we need this user data correct so if I go to serializer and uh uh user and uh invoice okay so booking has uh should be have user okay so let's copy this one and paste here and we will say uh we don't have user serializer so let's create it user so we'll say user serializer right and we'll fetch the user from the models where is user here okay so this is user and I will fetch all the data well this is not a PR method but uh we can we should Define the fields but I'm fetching all the data here okay so booking serializer and uh we need uh sorry we need this user serializer right and this will be defined as user so let's see it should show the user data Also let's see that how it is showing so this is showing the user data okay so we need a full name and then uh we can show email right and uh in the user serializer right in the user serializer we can also fetch okay so we also need one more okay let's F let's create here one more serializer profile serializer right so we'll say profile serializer and this will be the profile and it should be fetch from the fetch from review contract review okay so it will fetch from the website app okay so let's from website Dot models import profile correct so profile serializer this is profile and in this we need to fetch the user serializer so user equal to user serializer correct so and we will call this profile serializer in our booking correct okay so let's see now this is a two three times uh nest serializer I think let's see the serializer my field might be named incorrectly not match any attribute user instance okay let's go to profile what is this let's go to profile profile is correct user if I go to serializer this is booking serializer this is saying user okay actually we need to say profile right so I think it should correct now let's see error fetch okay I think refresh is required no and error the field profile was declared on Z but has not been included in the fields option Fields option oh I included at the wrong place sorry now what is the issue now booking instance original exception text booking object has no attribute profile uh let's say user Let's uh keep it a user we will see that we will see the profile later let's keep the user for now uh let's complete the functionality now what is the issue so we have this oh two times so we have a user serializer all right it work now okay so we can fet the data here user data so let's uh go to page sorry so full name right so what it will be invoice detail dot booking do user do first name right and then last name okay right and and then copy this and we can show the email right I think I think two things are enough okay so surj Kumar and ask call right then we can show the booking data here so let's show the booking data DD okay and then invoice detail do booking do room number room number is it correct yes okay so is it fetching all the nest data of room number or not no it's not fetching the room number data it's only fetching so do we have a room number is with the foreign key okay so we need uh one more serializer so this is room number and we have a room number here and uh we should have a room serializer right so copy this one and uh we'll give room serializer let's fetch all correct and this will be room and then we'll fetch here here room number correct so let's see objects are valid in what is this oh I think it is because of this thing let's see now so it should fetch the room data so what we have so we have room number ID room number and all this okay so let's say room number dot room number better Define room no room number is correct okay so room number this and then we can show the booking amount now right so this is booking amount right tax is nothing so I will keep this column empty right and this booking amount is uh same here because no quantity and tax right so the booking amount will be same grand total will be also same because we are not uh calculating the multiple things here right okay so uh this is the the thing uh this is here we can put our code Artisan lab logo and uh this is the code Artis lab India uh who is a biller right and this is uh the user this is the invoice detail right we can put the download and print functionality also but uh let's keep it a simple so this is the thing uh this is the uh you know invoice as simple as we can and show right so when we click on the booking history what is this uh what why this is showing like this are we doing something wrong here objects are not valid found object with a keys ID room number if you are okay I understand because uh if I go to uh booking history three right and we have uh invoice where is room number okay so this is the room number we need to show like this right okay so this is due and uh we should show du actually in the invoice detail so let's go here all right and uh we'll show text danger and this will be du then it will not show payment date right so date is this day is this okay so we are done with the booking history and the invoice uh later we will see that how we can uh apply the functionality for delete right so I think you understand all the things if you have any question any query then please ask in the comment section and uh this was uh 27th video right yeah so thank you so much for watching the video and uh please share subscribe like this channel share this channel like this video right and also if you want to uh do the uh practice for Jango or laravel or anything then please go to projects plaza.com you can download the projects right and uh this is uh you know support for me also and if you need this project this uh uh Hotel man System project then you can uh uh I have uploaded all the things on GitHub but uh it's not uh you know totally free videos are obviously free but uh code is not uh you have to give some support and then I will provide you the source code right so with this uh I I'm going to end this video and thank you so much for watching this video and I will try to upload more videos as soon as I can and uh I will try to complete complete this project as soon as possible right so thank you so much I need your support So support me please thank you