Collaborate on HTML Invoice Generator for Quality Assurance with Ease Using airSlate SignNow

Html invoice generator for Quality Assurance

welcome back everyone to another episode of our series today's challenge is both practical and essential constructing an invoice generator using react for a seamless user experience and Tailwind CSS for a clean design we aim to produce a tool that not only creates but also allows user to download simple invoices but here is where things get exciting chbt will be our primary coder we will be taking its suggestion implementing them and then to understand the intri details we will dive deep to explain the code as much as possible in this journey we also have a new tool of Our Sleeve jbt Vision should we encounter any unexpected results we can show Chad gbt its own work allowing it to analyze Rectify and potentially spot areas to refine its collaborative coding session like no others so without further Ado let's set forth and witness the blend of human and eii Innovation all right my react GS application is currently running in the browser it has config figed that aent CSS already it is a very simple basic uh hello world app so now let's start writing our prompt to chat GPT 4 so here you can see I have written a very basic uh prompt that is saying make sure to follow these instructions use react and tail CSS develop uh an invoice generator create and download simple invoices provide me complete code without missing or skipping anything the UI should be very attractive modern and Visually appealing it should uh good enough and rich in features to be deployed on the production I already have tailwind and react setup so let's see what it does with that meanwhile let me quickly import the CSS file I did not do that yet okay so certainly let's get started on building a simple invoice generator using react entailment CSS step one uh setup given that you already have done that comp uh component structure let's divide our application into the following components app invoice form invoice preview download button building the components so in the app.js it is adding something and in the download button it is saying that button to download the invoice as the PDF this will be a simple approach for production grade applications you might consider a backend service to handle this so in the app.js it has added basic uh elements and added the basic styling by using tailin CSS as you can see and also it is using uh another component that is invoice form that it is generating here so let's copy paste this code now we need to create this component so let's do that in the source directory directory I'm going to create this component and let's wait for it it is creating a form and it is using a state to maintain the states for every input of that form like client name items and total okay this component is ready so I'm going to copy paste it here after that I need to create this component so let's copy the name of the component and create a new file so inv VI preview component is being created so it is this is a variable that will calculate the total amount I guess it is uh expecting an input from this component data. items. ruce and it is uh uh adding all of the numbers all right now let's paste this as well okay now let's try it so go back to the website so this is the layout that it has generated so far here we need to enter the client name description and the amount we can add multiple amounts as as well that's very nice so let's add a name y Tech and in description let's say built front end layout amount $100 add item built backend logic 500 deployed to the production okay so I can see that these items are being previewed in the bottom but still it does not uh look very professional I mean I I was expecting to see the invoice preview in a separate view or something like that and there should be a download button so actually let's give this screenshot to the chat GPT and see what does it think about it the layout you provided seems clean and straightforward however based on the design and the requirement mentioned earlier here are a few suggestions to make it more user friendly and competitive spacing alignment ensure the consistent spacing between the uh form fields okay alignment should be perfect currently the price Fields uh seem a bit too far to the right okay interactive feedback consider adding hover effect for add items add item button perhaps change the background color form validation item deletion yes that is I agree with that there should be the delete button if you want to delete an item uh it might be a good idea to show subtotals for each item quantity multiplied by Price yeah that is also good idea invoice customization providing options for user to add their logo company okay due uh date and due date yeah that is also good suggestion and in the advanced features for a Competitive Edge think about interaction with payment platform uh no that would be too much themes are template tool tips loading and saving okay instruction let's take some uh suggestions from this so for [Music] example I want to use this suggestion item deletion also the invoice review does not does not look conventional and this preview layout is not common in the market also make sure to add download button that will download the PDF so let's see what it does with that enhance the data structure modify form data in this component to include quantity date due date and subtotal so let's copy paste this one add date and due date fields so it is adding these two fields in wi State we need to add it right after the client name okay let's find the client name first this is the client name and after that I will copy paste those two fields and then add quantity and calculate subtotals modify the handle input change function let me find that function first create the subtotal for each item okay let me copy this and replace this with the new one and update the item fields to include the quantity input uh update the item Fields okay let me find the items field so here uh we need to add this somehow number and description so this is the quantity description and the amount section so we need to find out where we have to add it so this is the description this is also description okay so I think we need to add it before the description actually I think let's copy paste everything and we will add it here I delete everything and paste it instead and after that add the delete functionality handle remove function we need to add this function somewhere within this component modify the invoice preview so copy that and go to the invoice preview component and replace it with that uh okay the PDF download functionality to add the PDF download functionality you will need to integrate with the uh Library called html2 pdf.js or set up a backend service to handle this here is a simplified approach using html2 pdf.js this okay uh we have to click on the continue generation so that it could complete what it was typing okay the package has been installed now we need to wait for this one in the invo review we need to add the HTML to PDF we need to import this one okay let's copy the entire thing and replace it with that one okay remember to wrap the content of the invoice preview component in a div with the ID this okay let's try that uh this is the container let's add this ID or actually I think we need to create another div and then we need to add that ID here okay this will provide you with the base implementation so let's try it so this is the oh I left this commment let me find it and remove it so this is is kind of button that does not look good at all okay I think we need to remove this okay we need to improve the download button as well so let me tell it to chat jpt okay let's try to actually we need to remove these commments okay so it has given me the code to update the button so let me do that okay the button is better than before but the spacing is not good but let's try it first I will add the invoice date here due date and add a description the button does not look good I mean the alignment is very bad right now so it will multiply with the price this is the quantity this is the description and this is the price you can add multiple items and let me try to delete something yes we are able to delete okay now let's click on the download as PDF and let's open that PDF PDF is empty I cannot see anything in the PDF so maybe we did something wrong or something is not done correctly so it is getting the invise preview ID and I don't know if we added the ID yeah we have added the ID correctly I guess but it is still not working so let me complain this to jjpd that I downloaded the invoice but it was empty PDF the problem of an empty PDF usually arises from the asynchronous nature of the html2 PDF function it might be attempting to generate the PDF before HTML content is fully rendered or captured let's troubleshoot and resolve this issue ensure correct element selection make sure the element uh you are trying to convert to PDF is correctly uh identified as the ID yes that is right already delay PDF generation you can set a slight delay before PDF generation uh to ensure the content is rendered using set time out okay so let's replace this function handle download andice that one okay let's try it again I will click the download button again it is still empty for me maybe I should reload it it is still empty that's strange oh by the way make sure that content want to con uh you want to convert it visible in the viewport check CSS uh use a ref using react capturing Dom element directory directly via this is not uh idiomatic instead you should use uh a ref so let's try that in the invoice preview component okay and we need to by the way this function should be inside this [Music] component also we need to add this line the top so instead of getting it by the ID we can simply use this and then we need to add this ref here so here instead of adding ID here I will add this attribute okay now let's try it again go back here refresh it uh there is an ID user f is not defined we have to import the user F from the react on the top okay now let's try it again let me reload it get some dates any random date just to test it it is again empty that was not helpful at all uh maybe I think this is an error that I I'm getting here it is saying that fail to par Source map no such directory I think this is just related to type that should not be a problem maybe uh let me check the console to find any errors uh uh I don't see any errors but I see some errors in vs code console error message you are seeing is related to the missing Source map for HTML to PDF uh while this solution uh should this should not prevent PDF generation itself so it is saying that uh reinstall the html2 PDF I don't think that would solve the problem and exclude the source map loader okay that is a different thing that will also not fix the issue because this is just about the type uh check HTML to PDF version I don't think that is also a problem alternative libraries so it is saying that you can use a different one like using PDF make or JS PDF directly these libraries might have different setup but they are widely used for client side PDF generation so uh let's try a different Library so it is uh going to use a GS PDF combined with HTML 2 canvas so let's these two libraries copy the code and in the terminal I will paste it and it modify the download function in your invoice preview you can replace the handle download invoice function so let's wait for it to be completed and meanwhile I will find out that function this is the handle download invoice function so okay I'm going to copy paste this function here let me replace it now uh in the step three test the download so let's try test it actually I can see some errors here it is saying that these two are not defined because I did not import anything yet so we have to import those first on the top okay so now let's try it again I can see an error that invalid element provided as the first argument let me copy the error and give it to chat GPD uh when I clicked on the download I got I got this error the error suggest that HTML to canvas could not find or recognize the element provider for uh conversion so let's trouble uh troubleshoot this ensure elements existence uh ensure that elements existence so first double check the element with the ID we deleted that ID so I think that's why it was happening so let me add that ID back and I think this uh ref is not being used anymore so I can remove it and instead of that I will add the ID okay now let's so let's test it again click on the PDF F okay yes now this time I can see the invoice here but this invoice does not look professional let me give that screenshot to the chat gbt and tell it that look at this screenshot this is the invoice that you generated and PDF it does not look good also this is not P professional uh I also provided you a sample PDF uh a sample preview of invoice make sure to make it look like that so let me get a sample invoice from internet and we will give that sample to the P chat gbt and chat gbt should be able to help us to make it look like that so let me search from internet invoice preview uh invoice so go to the images let's try to find some very simple invoice that is easy to build so let me use this one yeah this look very nice so let me copy this take the screenshot of it and paste it here submit that I understand your concerns let's aim to make your invo look closer to the provided sample which indeed has more professional appearance to create this style uh we need to add a logo to the top right corner display the header uh display the header address and contact information uh prominently have a clear section for Bill to address okay uh use a table for itemized listing clearly display totals banking information and any notes at the bottom here is a basic structure using react with tailin CSS to achieve this okay I'm hoping that this time it will make something better for us okay now let's uh replace this div with the new one that was provided and also we need to add the logo so first uh let us look at what we got uh I can see an error that is saying that item do amount to fixed is not a function so why is that item do amount so this item is coming from here and this is coming from a loop so let's tell Chad about this error I got these errors the error you are seeing uh indicate that the amount property for each item in your data items array is not a number so let's address this issue ensure data Integrity first ensure that the data you are passing to this component is correct verify that every item in your data items array has an amount property okay this conditional rendering checks if item. amount is a number before typing trying to format it if it is not number it simply renders the value as it is Data parsing if your data uh is coming from an external Source or being so uh stored as a string for example from an input field you may need to pass it to a number using par float so let's try to do that uh I will actually give it my code and ask it to fix it yourself on reviewing your code I can identify the problem you are attempting to call to fixed on item. amount without ensuring it's a number that data. total also seems to be redundant since you already calculated the total within the component so let's address these issues par and validate the item amounts for item. amount and item. subtotal ensure they are numbers before attempting any operation on them convert string values to numbers using par float replace the data total reference you have calculated the total within the component so that instead of data. total here is the revised version of your component okay so first of all we need to add this part on the top okay we need to carefully add this content so we need to in the table D body so I think we just need to replace this T body section and then we need to add this part after the table so I will just have to replace this [Music] one okay let's try it again okay this is what I can see and this looks much much better and professional than before so let me get a logo from internet okay now I will C drag and drop this image in our public folder [Music] and I have to give it the right name the format of the logo is avif I don't know what that that is but that is an image okay the logo is visible here and that is looking great so now let's click on the download as PDF and see what it does with that it gave me the invo but it also added the download button uh in that I don't like that so let me tell to uh chat gbt with it is showing that one to ensure the download as PDF button uh is not included in the generated PDF you can temporarily hide it while screenshot is being taken and then display it again after the process is complete here is how to achieve that assign the unique ID to the download button so okay let's make these changes so in the handle download button it has added these two lines of code in the handle download button on the top let remove this one actually it added just one line of code extra and we need to hide it immediately so here I will hide it and then we need to show it uh show the download button again after it is done so in the then block at the end when uh PDF is created and saved we will display it back rest of the component so we need to add this ID to that button okay now let's try it again I'm going to click on that it has downloaded to the invoice and this time uh there is no download button so one uh last thing that I want to achieve is that right now there are several things that are hardcoded like the address the bank name bank account number and the email so we need to fix that as well it's great but there are few pieces of information that are still hardcoded like address email ATC m make them Dynamic so that user could provide them from the input absolutely let's make the necessary adjustments to ensure the that address email and other details are Dynamic and can be populated from data prop address and calculate inform information a contact information instead of hard coding these details uh actually the bank name should also be dynamic so it is not uh taking that into consideration so actually let's add these uh changes first so in your uh assume that your data object has these followings okay update the component replace the hardcoded values in the invoice preview component with the dynamic values from the data prop here is the updated invoice preview component so rest of the component and okay unchange up to the address [Music] okay invoice ID client name so here we need to add the dynamic address uh this is the address and I need to replace this line and then uh we need to add this [Music] email and then in in the invo preview we need to receive this information I also need to make Bank details Dynamic okay Bank details structure update the data prop okay update the component incorporate these new bank details in your in invoice preview so we have to just copy paste and only this part bank name and also the bank account okay now I will give it my invoice form to update it ingly update this invoice [Music] formly like add uh relevant inputs it ISC update invoice form component with Dynamic Bank details we need to add inputs for bank's name and account number then incorporate these values into the form data it is considering only two uh inputs but I want to consider all of the new things that we have added so we need to give it the proper context bank account B Bank name and all of these information so let me delete the values just I want to keep the names of the fields okay so let me edit my last prompt uh okay now I will click on the save and submit to make the form Fields dynamic as per your requirement we need to add new input Fields Bank name bank account address and contact name and contact email 1 2 3 4 uh okay yes date uh and client name is already there so we don't need for that so in the use State we need to add these uh new uh properties so let's go to the top and here I will add it and then we need to add this input after this part client name and dat input fields we need to copy paste these sections so let it complete it first okay so let us copy this entire code up to this level and scroll down collapse the client name invoice date due date and after that we need to add our new fields and now let's test it so this here this is what we have right now the updated details now let me add hello world or maybe I Tech you can see it is being updated in the real time in the invoice now I will add the dates and the due date and in the address uh XYZ Street ABC and NY whatever so contact email ABC gmail.com Bank name uh XYZ Bank LTD bank account any random account and I will add multiple uh items here so in the description you can see everything is being updated in the real time below that is very nice feature and here I will add the front and layout $100 two layouts $200 add item uh one back end 500 and deployment $200 okay everything is added in the real time total is $800 so now uh I will click on the download PDF and let's see if okay now let's check this inise all right we can see that we have the invoice number the date uh the client name address everything is dynamic and we have all of the items we have the total amount and we have the bank name and bank account so everything is very Dynamic and working correctly okay excellent one last thing is that I want to tell chat gbt that uh this uh these delete buttons does not look good so I will take a screenshot and give it to chat GPT and I will also give it my code this is my uh if you in the screenshot the delete button is not looking good make it uh better and user friendly and professional okay I have given it my code so let's see what it does with that I'm hoping that there would be a very small piece of code that we have to update I understand that you want to improve the appearance of the delete button and add Dynamic fields in the form of the information you mentioned so use an SVG icon or css style button for the delete button add the necessarily uh input Fields here is the updated version of your invoice form so okay I think this is the part that we need to copy paste uh so this is the button that it is trying to update now for us uh I want to keep this delete icon that looks good so I will just remove the X and add the delete icon now this is what I can see maybe we should not have the background color again the alignment does not look good so we can fix it by ourself uh or you can I ask CH GB so let me see if I can do it quickly so here I will add item Center and yes everything is fixed correctly but there is one thing that there should be a uh cursor pointer on the delete icon so I will add cursor pointer so next time if I will reload it the cursor pointer would be added there all right so I think this is now acceptable before ending this video let's take a quick look at our code that we have generated so far so this is the invoice form component that we have and in that we have a state that has all of the properties that we are want to update and maintain client name date due date items total address contact email Bank name bank account and in the items this is an array and every array would look like this subject with the properties description amount quantity and subtotal then we have uh these functions handle input change so if uh input is changed then it this function would be called and we are getting the target uh where the input was changed we are getting the name and value and then we are getting all of the items uh that we have added for the invoice and here we are updating the list we are updating the name with this value of that input if name is equal to amount if or if name is equal to quantity then uh it will execute this logic we are getting the amount and quantity and then we are calculating it and then we are updating the state here after that we have handled add input so we have set form data uh we are updating the state here here so whenever add item is clicked it will again update the uh State and it will update all of the item so it will searad the existing items and it will add an additional item in that and then at last we have the handle remove item function so if user clicks on the remove button let's try to delete it and you can see it was updated in the real time so it basically get the list of the item it remove it and then it update the list in the state and then we have all of these components that you can see here so these are all of the HTML we have we are iterating on the items Loop to create multiple items like you can see we have loaded the invoice preview component that we have in the separate file so so this is the input that this is how it look like we have on change on every input we are passing the form data that is existing one we are passing the current value of the bank name so this is same for for other inputs as well now let's quickly go to the invo preview in the invoice preview we have the this is not being used so I will remove it we are using GS PDF HTML to Canvas and we have a function invoice preview so actually this is a component name and we are get calculating the total value and then we are uh handling the download invoice button this function has a nested uh this function has is getting the download button Dome element and in uh invoice element based on these IDs so it is hiding the button whenever this function is called and then it will call this function HTML to to Canvas that is coming from this library and it is giving it this element uh object or Dome element to this function then uh this is this will give us a promise we will resolve that Promise by using then function in the then function we are giving it our call back function that would be executed once it is done once it is done it will give us a canvas in that canvas we will convert that canvas into the data URL base 64 URL uh uh for the image or PNG we are instantiating the JS PDF and with that PDF uh we are getting the image properties from that canvas and we are getting the width by using PDF internals page size get width and height with that we are adding image to the uh PDF image data is coming from here so actually we took a screenshot of uh the div element with the help of canvas and we are setting the PDF width and height we are now triggering the save function that will download the invoice. PDF with this name of the file and at the end it will display the button again so that it could be visible and this is all of the HTML that we have uh you can see we are iterating on the array of the items here to display all of the items and everything is same there you have it a functional invoice generator a nice uh Testament to Harmony between human oversight and ai's coding capabilities using chat GPT and chat gbt Vision has truly added a layer of dynamism and learning to our session today if you have found this approach intriguing and want to explore more such interactive coding challenges don't forget to hit that like button and subscribe your insights comment and feedback fuel our adventures so please share your thoughts below till our next video Stay curious and let's continue blurring the lines between humor intuition and AI brilliance