Welcome back.
In this video, let's fill out the transaction about a particular account.
But before you continue, let's add the currency symbol in front of this one.
So let's go to the account details page.
That is a component and dashboard account details.
And where I have the currency is let me add the dollar sign.
And here also and here also.
Let's see.
Yeah, this one looks good.
So let's work on the odd transactions and this one contains both the expenses and income.
So let's fill up this one.
And lucky for us, we have it inside the account.
So if you console.log the account pro, let's see you're going to have on that you're going to have
the transactions.
So let's see inside the objects we have the not this one.
I want the one from our account details, which is this one.
And you can see that we have transactions so we can make some conditions to check.
So here you go.
So let's locate the all transactions here so we can pass that one to it as a prop.
So here we go, account.
Equal to accounts dart transactions.
Let's go to all transaction components.
We have access to the accounts, sorry, transactions, how to limit us transactions.
So let me rename this one to transactions also.
Yeah, great.
So here we go.
So now we can go ahead and then look through and display it accordingly.
And this is a table.
So first is let's check if this particular account have transactions.
So here we go.
So let's let everything inside here.
And we are going to make some conditions and say that if the transactions length.
G h is less than or equal to zero.
Then we can add, let's say, h to this account.
And then the closing here as h to.
And let's bring the question mark here.
So this means that if there is no transaction, we are going to display this message, that this account
doesn't have any transaction.
Then let's paste the component for looping through.
So page DAX and there we go.
If I do that now, let's check it.
And you can see that these accounts don't have any transaction.
So let's try to center this one here using some table six classes.
And here let's add class name, text center.
Indeed at the center here.
And we can give it a color of red text color, text red.
And then the opacity 500 and.
Well, what happening?
Let's see.
Yeah, this account don't have any transaction.
So also, if this account don't have any transactions, then why this one?
So I think we need to modify this one a little bit.
Right, so we can implement that one right inside here so we can even check first before passing in
the.
So here we go.
Let's check if the accounts dot transactions.
Dark lamb is less than or equal to zero.
Then agreeing to display the H two as we did otherwise.
Let's display the component.
So let's copy this one here and now back here.
Let's replace with this h two.
So I think.
Yeah, let's replace everything.
Yeah.
Save it.
And now back here, we can undo everything.
Yes.
Yes, yes, yes.
Sorry, guys.
Yeah.
So now let's save it and let's refresh it.
Well, it's still here, so we are going to cut this one also inside the condition.
So cut it.
And now if you have it, then you can go ahead and then render it here.
So let's provide some fragments because I want to render multiple components.
So let me paste that.
And lastly, it's about this component also here and let me also paste it here and let's save it.
And now this one looks good, but I think the text is too much here.
So let's add some margin to that.
And this is a text we can see margin of value of, let's see, ten on both sides.
Yeah, this okay, this account don't have any transaction.
So how can we add transaction for the meantime?
We cannot add it here because we haven't implemented the form to add transaction.
But for the meantime, let's try to add an account from the back end.
So let's get back to the back end and here we go.
So inside the controller, let me show you the logic for that.
For this one too.
We have done it so inside the transactions and this one for creating, we need to pass in the ID of
the account that I want to associate this transaction to.
So back to the tender client, which is this one, let me click on collections and next is click on
transactions and create and remember to pass in your token and we can get it from the the browser and
look at storage.
You can copy this one and now here you place your token.
Now for the body less pays the idea of the accounts for the meantime, let's do it manually.
So let's locate the accounts because I want to find a particular account to add that one to and I want
to add transaction to this particular account for my mom's building.
So yeah, so let me copy the ID of this account of this account, which is this one.
And now for transactions, now I'm going to replace with this one.
Now let me hit send.
Now I got one transaction called funding the project.
So if I come here and I refresh it, so I think I'm not getting the ID of the account.
So let me get back to Dashboard and here let me click on this one and this is account ID, so let me
copy this one from here.
Let me paste this one here and let me send.
Yeah.
So here, let's refresh it.
You can see I have one transaction.
Let me add more for this one.
I'll call this one as.
Salary.
So transportation.
Transportation.
And they're going to be as expenses.
So let me hit send.
And now let me refresh it.
You're going to see two transactions.
Oh, sorry, because I'm not looping through.
That's why we see one here.
So let's go ahead and then look through that.
Perfect.
So here we have access to the transactions.
So let's see where we are going to look through.
And here we go.
So let's look at the table, which is this one.
And I want to create the rows like the table row and this one.
So here we have a comment called Look.
So let me look at the table one here, table row, collapse eight.
And now I'm going to copy this one.
And here we go.
Transactions dot map.
I have access to individual transaction.
And let's retain the table and let's pitch it.
Save it and let's see.
And I see that we have two transactions.
So let me fill up with the right names.
So here we go.
So the name of the transaction here is the transaction name.
Let's replace this one in a transaction name and then transaction type, and then let's move this one.
It has no use.
And then the amount and then the note and then the account name for.
Yeah, so let's see what we have and we have the transaction so I can add more in accordance one as
fitting within the employees and here as and here is two expenses and let's refresh it.
You can see I have feeding in the expenses type and then the amount.
So here we can add the author or the person who created this type of transaction.
But for the meantime, let's leave it because as soon as you look in, this account is solely yours.
So why are you populating the name?
So for me, I'm not going to do it.
If you want to do it, leave a question below and I will assist you how to do the one.
So here I have the IMA.
Let me comment the one and now everything is perfect.
What has left is about calculating the total balance, the total expenses, and then the total income.
And when I click on View History, I want to see the transaction about this particular project.
Let's get into that and then next video.