Point of Sale - Angular 9 - Walkthrough - YouTube

Okay guys, welcome to Muhammad Bilal channel and today I'm going to give the demo of my

application that is basically point of sale or you can say shop management system. The

technologies that I’m using in this project are angular 9, the latest version of angular,

NodeJS as my server side language and MySQL as my database and for designing I’m using

angular material. This project has three roles, first is admin, second is user and third is

management. These three roles are not allowed to visit each other pages because of security

I implemented in this project for example If I login with the admin and now admin wants

to navigate to management home page, it will revert back it to the admin home page because

admin is not allowed to visit the management home page. Okay, one thing I implemented in

this project is activity log. So, admin modified user, admin modified user, admin added cost

center. So all the CRUD operations that will be performed in your application will be saved

as an activity log, so you see the history that who updated which record and at which

time he updated that record. So it’s very easy for me to investigate that which user

is doing some kind of mistakes. Okay, one thing is If I navigate to user, than I navigate

to management user detail and lets edit it and then copy the URL, open private mode of

browser and paste that link here, and lets login first with the demo user, Okay lets

navigate to the users page and management user and edit this. So I am logged in from

two different users from two different locations and both are going to edit the same user,

so what will happen now? for example the admin user edit it first and saved it, now when

demo user will save this record he will get an error that data has already been modified

by another user, please refresh the page first and he navigate back and then come back to

this page again now he will be able to the this user.so in this way I tackle this behavior

that already edited field can’t be edited you first have to refresh the page in order

to edit that field. Okay let me close this one, let me see my profile. Okay I have already

updated this picture. Let me delete this picture first from my project. Now I want to update

my profile picture. So first I’ll select my profile picture and you can easily crop

profile picture and then upload and now you can see that picture here. Even you can see

your picture here or you can see your picture here also and you can even view this picture.

Okay that’s good. One another thing is the history I am maintaining in this project for

example I am going to create a new measurement unit 01 and demo mu. Ok so code already exists

as measurement unit 01 already exists so let me create 02 mu and save this one now let’s

navigate to the 02 and the admin user created this mu means measurement unit at this time

and no one modified it yet for example admin again modified this measurement unit now you

can see that admin created this and admin modified this and even you can see this in

your activity log that admin added measurement unit 02 admin added measurement unit 02 in

this way you can even filter it lets write measurement and these records are related

to the measurement unit admin modified measurement unit admin added measurement unit like measurement

unit will exists in all these records. Okay, so you can even change your password here

for example my password was admin now I am changing it to admin99 repeat password admin999

as they are not same so it will give error that password doesn’t match, okay lets change

this, now password successfully updated, let me logout and login again, invalid username

or password because it has been changed to admin99 lets login and yes user able to login.

Okay next thing I implemented in my project is masking, what’s masking? Masking is 01

and 01, who set that 01 to 001 because of this account masking, I set the triple hash

on second location and double hash to third location and if you write 1 here and see it

automatically converted into 01, now for example if you change that to #### now let’s logout

here and re-login and lets navigate to the chart of account now you can see that it has

converted your last to the four hashes mask, so that’s basically masking, okay 01 has

already been created. Let me delete this one, let me delete this one also cannot update

or delete the parent row because this account has already been user somewhere either in

product or in invoice so we have to delete those invoice or product first in order to

delete this one, so let’s create a new 02 , my second account, and this one is of normal

type and save it, now you can create 02-001 second branch account , you can’t save it

because the higher level account code you created 02 was of detail type and once you

set an account to detail you can’t create its child accounts also detail, so in order

to create this you first have to set this 01 to the group, basically the opposite of

detail is group, now you can easily create the 02-001, my second account now you can

create this one. Okay If I create an account, this one and you cannot save it because this

account will only be created when you already have this account and this account will only

be create when you have already this account so first you have to create 03 account and

then you’ll create its child accounts, so these all are basically the part of point

of sale application, if you are working on an application that doesn’t contain all

these features all these masking than it means that’s not a proper point of sale application.

A proper point of sale application must have all these features. Okay one another feature

in account page for example you edit this, currently you are in edit mode, now you will

click on generate next it will create 03 automatically and will shift to the newly created account

code, oh why it shifted to 04 because 03 was already created, same in this way if I click

on this and I’ll create generate next than it will create 02-002 and you can see here

and it has been changed to the new mode basically, okay, for example let me delete this customer,

okay you cannot delete this customer because it has already been used in invoice, receipt

or product. Let me delete all the data. Currently customers and suppliers

tables are empty, okay now you want to create a customer. For customer you first has to

select his account and why I am only seeing one account here, the second account and we

have four accounts here because the type of only this account is customer, these all three

are normal, now if I set this also to the customer, now you can see two accounts here,

and you can set first customer, save. Same in this way you won’t be able to see any

account in supplier because no account has created of supplier type. Let me edit this

one and set this to the supplier and now you will be able to see that account while creating

new supplier, yes you can see here. Okay first supplier, save. Now one customer and one supplier

has been created. Now for example if you want to create an entry of invoice, what’s an

entry? Entry is basically a master detail concept, one master can have multiple details,

so here you can add one and here you can add multiple details that basically your one record,

so this code will automatically be created that’s of 10 digit code and 2020 current

year has automatically been selected and current month has automatically been selected, let

me select the customer, okay now let’s select the product, oh we don’t have any product

yet created so in order to create an invoice you should have create its corresponding product

first, so let me create the product, product is same like chart of account, as you can

see masking here. Product, cost center and chart of account I applied masking on these

three setups, chart of account, cost center and product. You can see your masking, you

can change your masking here. Okay so, let me create a new product 01 olper, let me set

its measurement unit to this and inventory account to this and cost of goods account

to this and lets save this now you will be able to see that product in invoice. Yes here‘s

olper, now for example you buy the four packets of olper, each of rate 100 than your total

amount will become 400 and you are giving discount of rupees 10 on each packet of olper

than the total discount will become 40 and 400-40 will become 360 it means your net amount

has become 360, lets add this one. Okay first invoice, let select the customer here save

this, oh yes you have successfully saved your invoice. Now let’s see how it looks like,

that’s great. As you have added only one detail so you are only seeing one transaction

here that was of four quantity hundred rate and 10 discount rate now for example you want

to give more discount, lets edit this one, click on this, let me give you the discount

of 20 rupees and it became eighty and 400-80 becomes 320 and lets update this one and save

this now you can see the total discount amount has become eighty and you can see eighty here,

so what’s the history, admin created this invoice and admin updated this invoice at

this time, you can even print it, let’s see how it looks like in print, oh I am printing

only the history of invoice okay lets create a receipt. For receipt, okay let’s talk

about the code that invoice created for itself and that is here 10 digit code so in the receipt

again it is disable so it means that your code will automatically be created that is

of 10 digit, let me write the description, first receipt, select the customer and overall

amount was 450 rupees and I give the 50 discount and total net amount has become 400 lets save

this and your receipt has been successfully saved. Now you can see here you have just

created the receipt but not yet modified this one, now let me login with demo user in private

window, demo user and lets go to the receipts and let me update this receipt, save. Now

you can see that the demo user has updated this receipt that the admin user created so

in this way, as you can see already in activity log that the demo user, the last CRUD operation

performed in this application was by demo user that he modified the receipt this one.

So in this way, you can add the voucher, payment, bill, invoice and all these are a part of

point of sale application. Okay one another thing, the responsiveness of application,

let me show you the responsiveness of this application, have you seen the complete view

of application has been changed and left it shift it to, yes here it convert itself into

the table form basically and here it revert itself into the card form and you can even

click on this here and lets navigate back and you can see here all the users. So you

can see that I created a separate view for mobile it means that this application can

run easily on mobiles also. So this is you are online, it means you are connected to

the internet, now let me off the internet for this browser offline, and here is you

are offline, let me connect it again and you are online basically it will just show you

your network connectivity. Let’s logout and login with user and user cannot see all

the setups like accounts, cost centers, measurement units, user can’t see anything. User can

just see the entries. Now If user wants to navigate to the users page, that is the functionality

of auth guard, it won’t navigate you the users page because admin can only see the

users page or admin only has the access to that page and even normal user can’t see

the activity log because activity log can only be seen to the admin so I think I have

covered a lot for this application. okay at the end if you want to see the complete technical

view of this application , if you want to deep dive in this application from technical

point of view than I have created another YouTube video on that and you can find the

link of that video in the description and please like comment and subscribe.