1 00:00:07,790 --> 00:00:08,900 Welcome back. 2 00:00:08,930 --> 00:00:14,960 In this video, let's fill out the transaction about a particular account. 3 00:00:15,320 --> 00:00:20,380 But before you continue, let's add the currency symbol in front of this one. 4 00:00:20,390 --> 00:00:23,810 So let's go to the account details page. 5 00:00:24,620 --> 00:00:28,850 That is a component and dashboard account details. 6 00:00:29,090 --> 00:00:33,290 And where I have the currency is let me add the dollar sign. 7 00:00:33,740 --> 00:00:38,270 And here also and here also. 8 00:00:38,630 --> 00:00:39,440 Let's see. 9 00:00:39,440 --> 00:00:41,120 Yeah, this one looks good. 10 00:00:41,450 --> 00:00:49,010 So let's work on the odd transactions and this one contains both the expenses and income. 11 00:00:49,010 --> 00:00:50,840 So let's fill up this one. 12 00:00:50,840 --> 00:00:55,670 And lucky for us, we have it inside the account. 13 00:00:55,850 --> 00:01:03,620 So if you console.log the account pro, let's see you're going to have on that you're going to have 14 00:01:03,620 --> 00:01:04,819 the transactions. 15 00:01:04,819 --> 00:01:10,460 So let's see inside the objects we have the not this one. 16 00:01:10,460 --> 00:01:13,970 I want the one from our account details, which is this one. 17 00:01:14,360 --> 00:01:19,460 And you can see that we have transactions so we can make some conditions to check. 18 00:01:19,460 --> 00:01:20,900 So here you go. 19 00:01:21,110 --> 00:01:26,900 So let's locate the all transactions here so we can pass that one to it as a prop. 20 00:01:26,900 --> 00:01:29,450 So here we go, account. 21 00:01:30,870 --> 00:01:36,000 Equal to accounts dart transactions. 22 00:01:39,050 --> 00:01:41,700 Let's go to all transaction components. 23 00:01:41,720 --> 00:01:49,040 We have access to the accounts, sorry, transactions, how to limit us transactions. 24 00:01:49,250 --> 00:01:52,580 So let me rename this one to transactions also. 25 00:01:53,510 --> 00:01:55,100 Yeah, great. 26 00:01:55,340 --> 00:01:56,630 So here we go. 27 00:01:57,530 --> 00:02:03,100 So now we can go ahead and then look through and display it accordingly. 28 00:02:03,110 --> 00:02:04,850 And this is a table. 29 00:02:05,150 --> 00:02:10,120 So first is let's check if this particular account have transactions. 30 00:02:10,130 --> 00:02:12,080 So here we go. 31 00:02:12,320 --> 00:02:15,440 So let's let everything inside here. 32 00:02:15,450 --> 00:02:22,580 And we are going to make some conditions and say that if the transactions length. 33 00:02:24,880 --> 00:02:28,180 G h is less than or equal to zero. 34 00:02:28,210 --> 00:02:34,660 Then we can add, let's say, h to this account. 35 00:02:35,080 --> 00:02:38,950 And then the closing here as h to. 36 00:02:40,200 --> 00:02:43,290 And let's bring the question mark here. 37 00:02:43,980 --> 00:02:50,610 So this means that if there is no transaction, we are going to display this message, that this account 38 00:02:50,610 --> 00:02:52,140 doesn't have any transaction. 39 00:02:52,470 --> 00:02:55,470 Then let's paste the component for looping through. 40 00:02:55,500 --> 00:02:57,870 So page DAX and there we go. 41 00:02:57,930 --> 00:03:00,360 If I do that now, let's check it. 42 00:03:00,360 --> 00:03:04,710 And you can see that these accounts don't have any transaction. 43 00:03:04,920 --> 00:03:09,900 So let's try to center this one here using some table six classes. 44 00:03:09,930 --> 00:03:16,290 And here let's add class name, text center. 45 00:03:18,370 --> 00:03:20,080 Indeed at the center here. 46 00:03:20,110 --> 00:03:25,900 And we can give it a color of red text color, text red. 47 00:03:25,900 --> 00:03:30,090 And then the opacity 500 and. 48 00:03:30,580 --> 00:03:32,020 Well, what happening? 49 00:03:32,770 --> 00:03:33,730 Let's see. 50 00:03:33,880 --> 00:03:37,360 Yeah, this account don't have any transaction. 51 00:03:37,570 --> 00:03:42,250 So also, if this account don't have any transactions, then why this one? 52 00:03:42,280 --> 00:03:44,710 So I think we need to modify this one a little bit. 53 00:03:44,710 --> 00:03:52,420 Right, so we can implement that one right inside here so we can even check first before passing in 54 00:03:52,420 --> 00:03:52,540 the. 55 00:03:52,900 --> 00:03:54,280 So here we go. 56 00:03:54,520 --> 00:03:59,530 Let's check if the accounts dot transactions. 57 00:04:02,580 --> 00:04:07,770 Dark lamb is less than or equal to zero. 58 00:04:09,890 --> 00:04:15,350 Then agreeing to display the H two as we did otherwise. 59 00:04:15,350 --> 00:04:17,690 Let's display the component. 60 00:04:17,930 --> 00:04:22,510 So let's copy this one here and now back here. 61 00:04:22,520 --> 00:04:24,890 Let's replace with this h two. 62 00:04:26,880 --> 00:04:28,020 So I think. 63 00:04:28,020 --> 00:04:30,100 Yeah, let's replace everything. 64 00:04:30,120 --> 00:04:30,630 Yeah. 65 00:04:31,340 --> 00:04:31,880 Yeah. 66 00:04:31,910 --> 00:04:32,590 Save it. 67 00:04:32,600 --> 00:04:35,720 And now back here, we can undo everything. 68 00:04:39,860 --> 00:04:40,190 Yes. 69 00:04:40,240 --> 00:04:41,020 Yes, yes, yes. 70 00:04:41,060 --> 00:04:42,110 Sorry, guys. 71 00:04:43,440 --> 00:04:43,950 Yeah. 72 00:04:43,980 --> 00:04:47,670 So now let's save it and let's refresh it. 73 00:04:48,090 --> 00:04:54,090 Well, it's still here, so we are going to cut this one also inside the condition. 74 00:04:54,090 --> 00:04:55,020 So cut it. 75 00:04:55,380 --> 00:04:59,670 And now if you have it, then you can go ahead and then render it here. 76 00:04:59,670 --> 00:05:05,160 So let's provide some fragments because I want to render multiple components. 77 00:05:05,430 --> 00:05:06,660 So let me paste that. 78 00:05:06,660 --> 00:05:13,470 And lastly, it's about this component also here and let me also paste it here and let's save it. 79 00:05:13,920 --> 00:05:20,070 And now this one looks good, but I think the text is too much here. 80 00:05:20,070 --> 00:05:23,070 So let's add some margin to that. 81 00:05:23,070 --> 00:05:30,750 And this is a text we can see margin of value of, let's see, ten on both sides. 82 00:05:30,840 --> 00:05:35,100 Yeah, this okay, this account don't have any transaction. 83 00:05:35,340 --> 00:05:38,640 So how can we add transaction for the meantime? 84 00:05:38,640 --> 00:05:44,370 We cannot add it here because we haven't implemented the form to add transaction. 85 00:05:44,640 --> 00:05:49,800 But for the meantime, let's try to add an account from the back end. 86 00:05:49,800 --> 00:05:52,950 So let's get back to the back end and here we go. 87 00:05:53,100 --> 00:05:56,970 So inside the controller, let me show you the logic for that. 88 00:05:56,970 --> 00:05:57,840 For this one too. 89 00:05:57,840 --> 00:06:06,270 We have done it so inside the transactions and this one for creating, we need to pass in the ID of 90 00:06:06,270 --> 00:06:10,890 the account that I want to associate this transaction to. 91 00:06:10,920 --> 00:06:17,700 So back to the tender client, which is this one, let me click on collections and next is click on 92 00:06:17,700 --> 00:06:26,270 transactions and create and remember to pass in your token and we can get it from the the browser and 93 00:06:26,370 --> 00:06:27,360 look at storage. 94 00:06:27,360 --> 00:06:31,410 You can copy this one and now here you place your token. 95 00:06:31,440 --> 00:06:38,040 Now for the body less pays the idea of the accounts for the meantime, let's do it manually. 96 00:06:38,190 --> 00:06:47,730 So let's locate the accounts because I want to find a particular account to add that one to and I want 97 00:06:47,730 --> 00:06:52,200 to add transaction to this particular account for my mom's building. 98 00:06:52,620 --> 00:07:00,360 So yeah, so let me copy the ID of this account of this account, which is this one. 99 00:07:00,690 --> 00:07:05,190 And now for transactions, now I'm going to replace with this one. 100 00:07:05,370 --> 00:07:06,900 Now let me hit send. 101 00:07:08,470 --> 00:07:12,190 Now I got one transaction called funding the project. 102 00:07:12,310 --> 00:07:19,660 So if I come here and I refresh it, so I think I'm not getting the ID of the account. 103 00:07:19,660 --> 00:07:26,440 So let me get back to Dashboard and here let me click on this one and this is account ID, so let me 104 00:07:26,440 --> 00:07:28,030 copy this one from here. 105 00:07:28,180 --> 00:07:31,590 Let me paste this one here and let me send. 106 00:07:33,410 --> 00:07:33,960 Yeah. 107 00:07:33,980 --> 00:07:36,320 So here, let's refresh it. 108 00:07:36,680 --> 00:07:38,750 You can see I have one transaction. 109 00:07:38,750 --> 00:07:40,770 Let me add more for this one. 110 00:07:40,790 --> 00:07:42,650 I'll call this one as. 111 00:07:43,850 --> 00:07:44,840 Salary. 112 00:07:45,590 --> 00:07:47,210 So transportation. 113 00:07:48,440 --> 00:07:50,210 Transportation. 114 00:07:53,170 --> 00:07:57,820 And they're going to be as expenses. 115 00:07:58,570 --> 00:08:00,700 So let me hit send. 116 00:08:01,630 --> 00:08:03,260 And now let me refresh it. 117 00:08:03,280 --> 00:08:05,050 You're going to see two transactions. 118 00:08:05,920 --> 00:08:08,230 Oh, sorry, because I'm not looping through. 119 00:08:08,260 --> 00:08:09,590 That's why we see one here. 120 00:08:10,060 --> 00:08:12,820 So let's go ahead and then look through that. 121 00:08:12,850 --> 00:08:13,300 Perfect. 122 00:08:13,300 --> 00:08:16,620 So here we have access to the transactions. 123 00:08:16,630 --> 00:08:19,780 So let's see where we are going to look through. 124 00:08:19,780 --> 00:08:21,250 And here we go. 125 00:08:21,430 --> 00:08:25,060 So let's look at the table, which is this one. 126 00:08:25,060 --> 00:08:30,670 And I want to create the rows like the table row and this one. 127 00:08:30,670 --> 00:08:33,380 So here we have a comment called Look. 128 00:08:33,400 --> 00:08:37,539 So let me look at the table one here, table row, collapse eight. 129 00:08:37,570 --> 00:08:39,940 And now I'm going to copy this one. 130 00:08:40,270 --> 00:08:41,530 And here we go. 131 00:08:41,679 --> 00:08:44,500 Transactions dot map. 132 00:08:45,610 --> 00:08:48,760 I have access to individual transaction. 133 00:08:51,260 --> 00:08:54,830 And let's retain the table and let's pitch it. 134 00:08:54,830 --> 00:08:56,630 Save it and let's see. 135 00:08:57,730 --> 00:09:00,250 And I see that we have two transactions. 136 00:09:00,250 --> 00:09:02,770 So let me fill up with the right names. 137 00:09:02,950 --> 00:09:04,600 So here we go. 138 00:09:05,680 --> 00:09:10,990 So the name of the transaction here is the transaction name. 139 00:09:12,790 --> 00:09:20,740 Let's replace this one in a transaction name and then transaction type, and then let's move this one. 140 00:09:20,770 --> 00:09:22,030 It has no use. 141 00:09:22,390 --> 00:09:30,400 And then the amount and then the note and then the account name for. 142 00:09:30,400 --> 00:09:39,190 Yeah, so let's see what we have and we have the transaction so I can add more in accordance one as 143 00:09:39,190 --> 00:09:48,880 fitting within the employees and here as and here is two expenses and let's refresh it. 144 00:09:49,420 --> 00:09:53,110 You can see I have feeding in the expenses type and then the amount. 145 00:09:53,110 --> 00:10:00,010 So here we can add the author or the person who created this type of transaction. 146 00:10:00,010 --> 00:10:05,710 But for the meantime, let's leave it because as soon as you look in, this account is solely yours. 147 00:10:05,710 --> 00:10:07,600 So why are you populating the name? 148 00:10:07,600 --> 00:10:09,460 So for me, I'm not going to do it. 149 00:10:09,460 --> 00:10:14,980 If you want to do it, leave a question below and I will assist you how to do the one. 150 00:10:14,980 --> 00:10:17,710 So here I have the IMA. 151 00:10:17,740 --> 00:10:23,140 Let me comment the one and now everything is perfect. 152 00:10:23,380 --> 00:10:31,150 What has left is about calculating the total balance, the total expenses, and then the total income. 153 00:10:31,150 --> 00:10:37,720 And when I click on View History, I want to see the transaction about this particular project. 154 00:10:37,750 --> 00:10:40,210 Let's get into that and then next video.