yoganandhank
/
gccmanpower
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
All GCC vendors and employee details for IT department management
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 Commits
1 Branch
0 Tags
17 MiB
Tree: 05acba4b41
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '05acba4b41'
${ noResults }
gccmanpower/src/main/resources/templates/gccservicepaymenttracker/dashboard.html

5199 lines
237 KiB
Raw Normal View History

added payment processing tracker
4 months ago
​
​
​
login bugs resolved added session properly
3 months ago
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
added payment processing tracker
4 months ago
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
​
​
​
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
changes in toner management and payment tracker
2 weeks ago
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in payment dashboard page and service
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
​
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
​
​
​
changes in adjustment management open in same page detailed view and added fin_year in edit option and excel export fields bug cleared
2 months ago
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
​
​
​
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
added payment processing tracker
4 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
added payment processing tracker
4 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
​
added payment processing tracker
4 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
added payment processing tracker
4 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
changes in toner management and payment tracker
2 weeks ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
changes in toner management and payment tracker
2 weeks ago
added payment processing tracker
4 months ago
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
new UI and query changes in gccadjustment management project and payment tracker , gcc manpower
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
minor changes in payment tracker dashboard page
3 months ago
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
minor changes in payment tracker dashboard page
3 months ago
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
minor changes in payment tracker dashboard page
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
minor changes in payment tracker dashboard page
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
added deleted records to view in manpower and payment tracker files
3 months ago
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
added payment processing tracker
4 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
changes in payment dashboard page and service
3 months ago
added payment processing tracker
4 months ago
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
added payment processing tracker
4 months ago
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
added updated by in all view options and added history
3 months ago
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added updated by in all view options and added history
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
added updated by in all view options and added history
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
​
​
added deleted records to view in manpower and payment tracker files
3 months ago
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in payment dashboard page and service
3 months ago
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in payment dashboard page and service
3 months ago
added payment processing tracker
4 months ago
added updated by in all view options and added history
3 months ago
added deleted records to view in manpower and payment tracker files
3 months ago
added payment processing tracker
4 months ago
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in dashboard page dynamically load status
3 months ago
added payment processing tracker
4 months ago
​
changes in dashboard page dynamically load status
3 months ago
added payment processing tracker
4 months ago
​
​
​
​
​
added updated by in all view options and added history
3 months ago
added deleted records to view in manpower and payment tracker files
3 months ago
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
added payment processing tracker
4 months ago
​
changes in dashboard page dynamically load status
3 months ago
added payment processing tracker
4 months ago
changes in dashboard page dynamically load status
3 months ago
​
added payment processing tracker
4 months ago
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
changes in payment dashboard page and service
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
changes in payment dashboard page and service
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in payment dashboard page and service
3 months ago
added payment processing tracker
4 months ago
​
changes in dashboard page dynamically load status
3 months ago
added payment processing tracker
4 months ago
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
​
​
​
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
changes in dashboard page dynamically load status
3 months ago
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
​
​
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
changes in dashboard page dynamically load status
3 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
minor changes in payment tracker dashboard page
3 months ago
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in payment dashboard page and service
3 months ago
​
​
changes in dashboard page dynamically load status
3 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
changes in dashboard page dynamically load status
3 months ago
changes in payment dashboard page and service
3 months ago
​
​
​
​
minor changes in payment tracker dashboard page
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
minor changes in payment tracker dashboard page
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
​
changes in payment dashboard page and service
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
changes in dashboard page dynamically load status
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
added payment processing tracker
4 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
added payment processing tracker
4 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
added payment processing tracker
4 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
changes in adjustment management open in same page detailed view and added fin_year in edit option and excel export fields bug cleared
2 months ago
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
changes in dashboard page dynamically load status
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in dashboard page dynamically load status
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
added payment processing tracker
4 months ago
​
​
changes in dashboard page dynamically load status
3 months ago
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
added payment processing tracker
4 months ago
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in payment dashboard page and service
3 months ago
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added updated by in all view options and added history
3 months ago
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
added payment processing tracker
4 months ago
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
changes in dashboard page dynamically load status
3 months ago
​
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
added payment processing tracker
4 months ago
​
​
changes in dashboard page dynamically load status
3 months ago
added payment processing tracker
4 months ago
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
added payment processing tracker
4 months ago
added updated by in all view options and added history
3 months ago
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added updated by in all view options and added history
3 months ago
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
added payment processing tracker
4 months ago
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
added payment processing tracker
4 months ago
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
added payment processing tracker
4 months ago
changes in dashboard page dynamically load status
3 months ago
added payment processing tracker
4 months ago
changes in dashboard page dynamically load status
3 months ago
added payment processing tracker
4 months ago
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
changes in toner management and payment tracker
2 weeks ago
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
changes in dashboard page dynamically load status
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in dashboard page dynamically load status
3 months ago
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
​
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
changes in toner management and payment tracker
2 weeks ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
changes in toner management and payment tracker
2 weeks ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
changes in toner management and payment tracker
2 weeks ago
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
minor changes in payment tracker dashboard page
3 months ago
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
changes in dashboard page dynamically load status
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in dashboard page dynamically load status
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
changes in dashboard page dynamically load status
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in dashboard page dynamically load status
3 months ago
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in payment dashboard page and service
3 months ago
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
changes in payment dashboard page and service
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
changes in dashboard page dynamically load status
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in dashboard page dynamically load status
3 months ago
changes in payment dashboard page and service
3 months ago
​
​
​
​
​
​
​
​
​
​
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
changes in payment dashboard page and service
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
changes in dashboard page dynamically load status
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
changes in dashboard page dynamically load status
3 months ago
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
changes in dashboard page dynamically load status
3 months ago
changes in payment dashboard page and service
3 months ago
​
​
​
​
​
​
​
​
​
​
minor changes in payment tracker dashboard page
3 months ago
changes in payment dashboard page and service
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
​
changes in payment dashboard page and service
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
changes in dashboard page dynamically load status
3 months ago
new changes in manpower and toner management and payment tracker api and UI changes
3 months ago
​
​
​
​
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
changes in dashboard page dynamically load status
3 months ago
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added deleted records to view in manpower and payment tracker files
3 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added spring security correctly and payment tracker, toner managemnt UI changes
3 months ago
​
​
​
​
​
​
​
​
​
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
​
​
​
changes in adjustment management open in same page detailed view and added fin_year in edit option and excel export fields bug cleared
2 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
added new adjustment management api's service and controller , html pages and javascript and some UI changes in payment tracker and manpower
2 months ago
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
added deleted records to view in manpower and payment tracker files
3 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
minor changes in payment tracker dashboard page
3 months ago
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in payment dashboard page and service
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
minor changes in payment tracker dashboard page
3 months ago
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
​
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
​
​
​
​
​
​
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
​
added deleted records to view in manpower and payment tracker files
3 months ago
UI and apis changes in payment tracker and toner management project
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
changes in payment dashboard page and service
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
changes in payment dashboard page and service
3 months ago
​
​
UI and apis changes in payment tracker and toner management project
3 months ago
changes in payment dashboard page and service
3 months ago
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
changes in payment dashboard page and service
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
changes in payment dashboard page and service
3 months ago
​
​
​
​
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
changes in payment dashboard page and service
3 months ago
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
​
​
​
​
​
​
new UI and query changes in gccadjustment management project and payment tracker , gcc manpower
3 months ago
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
added piechart and days wise count and vendor wise count added for payment tracker project
4 months ago
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
added payment processing tracker
4 months ago
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
added updated by in all view options and added history
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
added updated by in all view options and added history
3 months ago
​
​
​
​
​
​
newly added controller , service , pages and changes in tapal , toner, adjustment management projects
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
added updated by in all view options and added history
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
added updated by in all view options and added history
3 months ago
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
newly added toner management project and changes in manpower , payment tracker ui and api's
3 months ago
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
​
​
new changes added adjustment management controller, service, pages and manpower standby count, and payment tracker last updated files
3 months ago
added deleted records to view in manpower and payment tracker files
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in manpower and payment tracker project ui and query changes
3 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 months ago
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org" lang="en">
  4. <head>
  5. <script th:inline="javascript">
  6. (function () {
  7. const currentUser = /*[[${session.pay_usrName}]]*/ null;
  8. if (currentUser && sessionStorage.getItem("pay_usrName") !== currentUser) {
  9. window.location.replace(/*[[@{/gccservicepaymenttracker/login}]]*/ '/gccservicepaymenttracker/login');
  10. }
  11. })();
  12. </script>
  13. <meta charset="UTF-8">
  14. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  15. <title>GCC Payment Tracker - Dashboard</title>
  17. <!-- CSRF Tokens -->
  18. <meta th:if="${_csrf != null}" name="_csrf" th:content="${_csrf.token}" />
  19. <meta th:if="${_csrf != null}" name="_csrf_header" th:content="${_csrf.headerName}" />
  21. <!-- Google Fonts -->
  22. <link
  23. href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap"
  24. rel="stylesheet">
  26. <!-- Bootstrap & FontAwesome -->
  27. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  28. <link rel="stylesheet" th:href="@{/assets/font-awesome-6.5.2/css/all.min.css}" type="text/css">
  30. <!-- Flatpickr Datepicker -->
  31. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  32. <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  33. <!-- Chart.js -->
  34. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  35. <!-- SheetJS for Export to Excel -->
  36. <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
  38. <!-- Custom Style Sheet mapping to theme -->
  39. <style>
  40. .text-info-dark {
  41. color: #075985 !important;
  42. font-weight: 600;
  43. }
  45. .text-warning-dark {
  46. color: #92400e !important;
  47. font-weight: 600;
  48. }
  50. .text-success-dark {
  51. color: #166534 !important;
  52. font-weight: bold;
  53. }
  55. .text-danger-dark {
  56. color: #991b1b !important;
  57. font-weight: bold;
  58. }
  60. body {
  61. background-color: #f4f7f6;
  62. font-family: 'Poppins', sans-serif;
  63. color: #333;
  64. }
  66. .header {
  67. background: linear-gradient(135deg, #09303d, #0f5c78);
  68. color: #fff;
  69. padding: 15px 30px;
  70. display: flex;
  71. justify-content: space-between;
  72. align-items: center;
  73. box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  74. }
  76. .logo-left {
  77. display: flex;
  78. align-items: center;
  79. gap: 15px;
  80. }
  82. .logo-left img {
  83. width: 60px;
  84. height: 60px;
  85. }
  87. .logo-text h2 {
  88. font-family: 'Outfit', sans-serif;
  89. font-size: 1.1rem;
  90. font-weight: 700;
  91. margin: 0;
  92. line-height: 1.2;
  93. letter-spacing: 0.5px;
  94. }
  96. .logo-text p {
  97. font-size: 0.7rem;
  98. margin: 0;
  99. color: #aed6f1;
  100. }
  102. .header-title h2 {
  103. font-family: 'Outfit', sans-serif;
  104. font-size: 1.5rem;
  105. font-weight: 700;
  106. margin: 0;
  107. }
  109. .user-menu {
  110. display: flex;
  111. align-items: center;
  112. gap: 15px;
  113. }
  115. .user-badge {
  116. background: rgba(255, 255, 255, 0.15);
  117. padding: 8px 16px;
  118. border-radius: 20px;
  119. font-size: 0.85rem;
  120. font-weight: 600;
  121. display: flex;
  122. align-items: center;
  123. gap: 8px;
  124. }
  126. .btn-logout {
  127. background: #e74c3c;
  128. color: #fff;
  129. border: none;
  130. padding: 8px 16px;
  131. border-radius: 20px;
  132. font-size: 0.85rem;
  133. font-weight: 600;
  134. cursor: pointer;
  135. transition: all 0.3s;
  136. text-decoration: none;
  137. display: inline-flex;
  138. align-items: center;
  139. gap: 6px;
  140. }
  142. .btn-logout:hover {
  143. background: #c0392b;
  144. color: #fff;
  145. transform: translateY(-1.5px);
  146. }
  148. .main-container {
  149. max-width: 95%;
  150. margin: 35px auto;
  151. padding: 0 15px;
  152. }
  154. /* 4 Category Cards Dashboard */
  155. .category-grid {
  156. display: grid;
  157. grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  158. gap: 20px;
  159. margin-bottom: 35px;
  160. }
  162. .category-card {
  163. background: #ffffff;
  164. border: 1px solid #eef2f6;
  165. border-radius: 16px;
  166. padding: 24px;
  167. box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
  168. transition: all 0.3s ease;
  169. position: relative;
  170. overflow: hidden;
  171. cursor: pointer;
  172. display: flex;
  173. align-items: center;
  174. justify-content: space-between;
  175. }
  177. .category-card::before {
  178. content: '';
  179. position: absolute;
  180. top: 0;
  181. left: 0;
  182. width: 5px;
  183. height: 100%;
  184. }
  186. /* SD Card Accent */
  187. .category-card.card-sd::before {
  188. background-color: #0f5c78;
  189. }
  191. .category-card.card-sd.active {
  192. border-color: #0f5c78;
  193. box-shadow: 0 10px 25px rgba(15, 92, 120, 0.15);
  194. background-color: #f0f7f9;
  195. }
  197. /* Invoice Card Accent */
  198. .category-card.card-invoice::before {
  199. background-color: #27ae60;
  200. }
  202. .category-card.card-invoice.active {
  203. border-color: #27ae60;
  204. box-shadow: 0 10px 25px rgba(39, 174, 96, 0.15);
  205. background-color: #f1fbf4;
  206. }
  208. /* EMD Card Accent */
  209. .category-card.card-emd::before {
  210. background-color: #8e44ad;
  211. }
  213. .category-card.card-emd.active {
  214. border-color: #8e44ad;
  215. box-shadow: 0 10px 25px rgba(142, 68, 173, 0.15);
  216. background-color: #f9f2fc;
  217. }
  219. /* BG Card Accent */
  220. .category-card.card-bg::before {
  221. background-color: #1e40af;
  222. }
  224. .category-card.card-bg.active {
  225. border-color: #1e40af;
  226. box-shadow: 0 10px 25px rgba(30, 64, 175, 0.15);
  227. background-color: #eff6ff;
  228. }
  230. /* DC Card Accent */
  231. .category-card.card-dc::before {
  232. background-color: #b91c1c;
  233. }
  235. .category-card.card-dc.active {
  236. border-color: #b91c1c;
  237. box-shadow: 0 10px 25px rgba(185, 28, 28, 0.15);
  238. background-color: #fef2f2;
  239. }
  241. /* ASD Card Accent */
  242. .category-card.card-asd::before {
  243. background-color: #d35400;
  244. }
  246. .category-card.card-asd.active {
  247. border-color: #d35400;
  248. box-shadow: 0 10px 25px rgba(211, 84, 0, 0.15);
  249. background-color: #fdf5e6;
  250. }
  252. /* Agreement Card Accent */
  253. .category-card.card-agreement::before {
  254. background-color: #db2777;
  255. }
  257. .category-card.card-agreement.active {
  258. border-color: #db2777;
  259. box-shadow: 0 10px 25px rgba(219, 39, 119, 0.15);
  260. background-color: #fdf2f8;
  261. }
  263. /* Total No of Bills Card Accent */
  264. .category-card.card-total::before {
  265. background-color: #2563eb;
  266. }
  268. .category-card.card-total.active {
  269. border-color: #2563eb;
  270. box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
  271. background-color: #eff6ff;
  272. }
  274. .card-total .card-icon {
  275. color: #2563eb;
  276. }
  278. /* Completed Card Accent */
  279. .category-card.card-completed::before {
  280. background-color: #166534;
  281. }
  283. .category-card.card-completed.active {
  284. border-color: #166534;
  285. box-shadow: 0 10px 25px rgba(22, 101, 52, 0.15);
  286. background-color: #f0fdf4;
  287. }
  289. .card-completed .card-icon {
  290. color: #166534;
  291. }
  293. /* Pending Card Accent */
  294. .category-card.card-pending::before {
  295. background-color: #991b1b;
  296. }
  298. .category-card.card-pending.active {
  299. border-color: #991b1b;
  300. box-shadow: 0 10px 25px rgba(153, 27, 27, 0.15);
  301. background-color: #fef2f2;
  302. }
  304. .card-pending .card-icon {
  305. color: #991b1b;
  306. }
  308. .pending-split-box {
  309. transition: all 0.2s ease-in-out;
  310. }
  312. .pending-split-box:hover {
  313. transform: translateY(-2px);
  314. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  315. filter: brightness(0.97);
  316. }
  318. .category-card:hover {
  319. transform: translateY(-4px);
  320. box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  321. }
  323. .card-left {
  324. display: flex;
  325. flex-direction: column;
  326. gap: 5px;
  327. }
  329. .card-icon {
  330. font-size: 2.2rem;
  331. opacity: 0.85;
  332. transition: all 0.3s;
  333. }
  335. .card-sd .card-icon {
  336. color: #0f5c78;
  337. }
  339. .card-invoice .card-icon {
  340. color: #27ae60;
  341. }
  343. .card-emd .card-icon {
  344. color: #8e44ad;
  345. }
  347. .card-bg .card-icon {
  348. color: #1e40af;
  349. }
  351. .card-dc .card-icon {
  352. color: #b91c1c;
  353. }
  355. .card-asd .card-icon {
  356. color: #d35400;
  357. }
  359. .card-agreement .card-icon {
  360. color: #db2777;
  361. }
  363. .category-card:hover .card-icon {
  364. transform: scale(1.1);
  365. }
  367. .card-title {
  368. font-family: 'Outfit', sans-serif;
  369. font-size: 0.95rem;
  370. font-weight: 700;
  371. color: #64748b;
  372. text-transform: uppercase;
  373. letter-spacing: 0.5px;
  374. margin: 0;
  375. }
  377. .card-value {
  378. font-family: 'Outfit', sans-serif;
  379. font-size: 1.85rem;
  380. font-weight: 800;
  381. color: #1e293b;
  382. margin: 0;
  383. }
  385. /* Filter Section */
  386. .filter-card {
  387. background: #ffffff;
  388. border-radius: 16px;
  389. border: 1px solid #eef2f6;
  390. box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
  391. padding: 24px;
  392. margin-bottom: 30px;
  393. }
  395. .filter-grid {
  396. display: grid;
  397. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  398. gap: 20px;
  399. align-items: end;
  400. }
  402. .filter-group {
  403. display: flex;
  404. flex-direction: column;
  405. gap: 8px;
  406. }
  408. .filter-label {
  409. font-size: 0.8rem;
  410. font-weight: 700;
  411. color: #64748b;
  412. text-transform: uppercase;
  413. letter-spacing: 0.5px;
  414. }
  416. .filter-input {
  417. height: 44px;
  418. border-radius: 10px;
  419. border: 1.5px solid #cbd5e1;
  420. padding: 10px 16px;
  421. font-size: 0.9rem;
  422. font-weight: 500;
  423. color: #334155;
  424. background-color: #f8fafc;
  425. transition: all 0.3s ease;
  426. }
  428. .filter-input:focus {
  429. outline: none;
  430. border-color: #0f5c78;
  431. background-color: #ffffff;
  432. box-shadow: 0 0 0 3px rgba(15, 92, 120, 0.15);
  433. }
  435. .btn-filter-search {
  436. height: 44px;
  437. border-radius: 10px;
  438. border: none;
  439. background: linear-gradient(135deg, #0f5c78, #1781a6);
  440. color: #ffffff;
  441. font-weight: 600;
  442. font-size: 0.9rem;
  443. transition: all 0.3s;
  444. display: flex;
  445. align-items: center;
  446. justify-content: center;
  447. gap: 8px;
  448. cursor: pointer;
  449. box-shadow: 0 4px 10px rgba(15, 92, 120, 0.25);
  450. }
  452. .btn-filter-search:hover {
  453. background: linear-gradient(135deg, #1781a6, #0f5c78);
  454. transform: translateY(-1.5px);
  455. }
  457. .btn-filter-reset {
  458. height: 44px;
  459. border-radius: 10px;
  460. border: 1.5px solid #cbd5e1;
  461. background-color: #ffffff;
  462. color: #475569;
  463. font-weight: 600;
  464. font-size: 0.9rem;
  465. transition: all 0.3s;
  466. display: flex;
  467. align-items: center;
  468. justify-content: center;
  469. gap: 8px;
  470. cursor: pointer;
  471. }
  473. .btn-filter-reset:hover {
  474. background-color: #f1f5f9;
  475. color: #0f5c78;
  476. border-color: #0f5c78;
  477. }
  479. /* Table Card Section */
  480. .table-card {
  481. background: #ffffff;
  482. border-radius: 16px;
  483. border: 1px solid #eef2f6;
  484. box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
  485. padding: 24px;
  486. }
  488. .table-card-header {
  489. display: flex;
  490. justify-content: space-between;
  491. align-items: center;
  492. margin-bottom: 20px;
  493. flex-wrap: wrap;
  494. gap: 15px;
  495. }
  497. .table-card-title {
  498. font-family: 'Outfit', sans-serif;
  499. font-size: 1.25rem;
  500. font-weight: 700;
  501. color: #1e293b;
  502. margin: 0;
  503. display: flex;
  504. align-items: center;
  505. gap: 10px;
  506. }
  508. .active-filter-badge {
  509. background-color: #e2e8f0;
  510. color: #475569;
  511. font-size: 0.78rem;
  512. font-weight: 700;
  513. padding: 5px 12px;
  514. border-radius: 20px;
  515. text-transform: uppercase;
  516. }
  518. .btn-add-record {
  519. background: linear-gradient(135deg, #0f5c78, #1781a6);
  520. color: #ffffff;
  521. border: none;
  522. padding: 10px 20px;
  523. border-radius: 10px;
  524. font-size: 0.9rem;
  525. font-weight: 600;
  526. cursor: pointer;
  527. transition: all 0.3s;
  528. display: inline-flex;
  529. align-items: center;
  530. gap: 8px;
  531. box-shadow: 0 4px 10px rgba(15, 92, 120, 0.2);
  532. text-decoration: none;
  533. }
  535. .btn-add-record:hover {
  536. background: linear-gradient(135deg, #1781a6, #0f5c78);
  537. transform: translateY(-2px);
  538. color: #ffffff;
  539. }
  541. /* Custom Data Grid Table */
  542. .grid-table {
  543. font-size: 0.85rem;
  544. }
  546. .grid-table th {
  547. background-color: #f1f5f9 !important;
  548. color: #475569 !important;
  549. font-weight: 700;
  550. text-transform: uppercase;
  551. font-size: 0.75rem;
  552. letter-spacing: 0.5px;
  553. padding: 14px 10px;
  554. border-bottom: 2px solid #cbd5e1 !important;
  555. vertical-align: middle;
  556. }
  558. .grid-table td {
  559. padding: 12px 10px;
  560. vertical-align: middle;
  561. border-bottom: 1px solid #e2e8f0;
  562. }
  564. .grid-table tbody tr:hover {
  565. background-color: #f8fafc;
  566. }
  568. /* Badges for status */
  569. .status-badge {
  570. font-size: 0.72rem;
  571. font-weight: 700;
  572. padding: 4px 10px;
  573. border-radius: 12px;
  574. text-transform: uppercase;
  575. display: inline-block;
  576. }
  578. .status-pending {
  579. background-color: #fef9c3;
  580. color: #854d0e;
  581. }
  583. .status-awaiting-details {
  584. background-color: #ffedd5;
  585. color: #c2410c;
  586. }
  588. .status-pending-with-dept {
  589. background-color: #e0f2fe;
  590. color: #0369a1;
  591. }
  593. .status-completed {
  594. background-color: #d1fae5;
  595. color: #065f46;
  596. }
  598. .status-no-action {
  599. background-color: #f1f5f9;
  600. color: #475569;
  601. }
  603. .status-processed {
  604. background-color: #dbeafe;
  605. color: #1e40af;
  606. }
  608. .status-approved {
  609. background-color: #d1fae5;
  610. color: #065f46;
  611. }
  613. .status-paid {
  614. background-color: #dcfce7;
  615. color: #166534;
  616. }
  618. .status-rejected {
  619. background-color: #fee2e2;
  620. color: #991b1b;
  621. }
  623. .status-default {
  624. background-color: #f1f5f9;
  625. color: #475569;
  626. }
  628. /* Type Badges */
  629. .type-badge {
  630. font-size: 0.72rem;
  631. font-weight: 700;
  632. padding: 4px 10px;
  633. border-radius: 12px;
  634. text-transform: uppercase;
  635. display: inline-block;
  636. }
  638. .type-sd {
  639. background-color: #f0f7f9;
  640. color: #0f5c78;
  641. border: 1px solid rgba(15, 92, 120, 0.25);
  642. }
  644. .type-tax-invoice {
  645. background-color: #f1fbf4;
  646. color: #27ae60;
  647. border: 1px solid rgba(39, 174, 96, 0.25);
  648. }
  650. .type-emd {
  651. background-color: #f9f2fc;
  652. color: #8e44ad;
  653. border: 1px solid rgba(142, 68, 173, 0.25);
  654. }
  656. .type-bank-guarantee {
  657. background-color: #eff6ff;
  658. color: #1e40af;
  659. border: 1px solid rgba(30, 64, 175, 0.25);
  660. }
  662. .type-delivery-chellan {
  663. background-color: #fef2f2;
  664. color: #b91c1c;
  665. border: 1px solid rgba(185, 28, 28, 0.25);
  666. }
  668. .type-asd {
  669. background-color: #fdf5e6;
  670. color: #d35400;
  671. border: 1px solid rgba(211, 84, 0, 0.25);
  672. }
  674. .type-agreement {
  675. background-color: #fdf2f8;
  676. color: #db2777;
  677. border: 1px solid rgba(219, 39, 119, 0.25);
  678. }
  680. .btn-grid-action {
  681. width: 32px;
  682. height: 32px;
  683. border-radius: 8px;
  684. border: none;
  685. display: inline-flex;
  686. align-items: center;
  687. justify-content: center;
  688. font-size: 0.85rem;
  689. cursor: pointer;
  690. transition: all 0.2s;
  691. }
  693. .btn-grid-edit {
  694. background-color: #e0f2fe;
  695. color: #0369a1;
  696. }
  698. .btn-grid-edit:hover {
  699. background-color: #0369a1;
  700. color: #ffffff;
  701. transform: scale(1.08);
  702. }
  704. .btn-grid-delete {
  705. background-color: #fee2e2;
  706. color: #b91c1c;
  707. }
  709. .btn-grid-delete:hover {
  710. background-color: #b91c1c;
  711. color: #ffffff;
  712. transform: scale(1.08);
  713. }
  715. .btn-grid-pdf {
  716. background-color: #fef2f2;
  717. color: #b91c1c;
  718. border: 1px solid rgba(185, 28, 28, 0.15) !important;
  719. }
  721. .btn-grid-pdf:hover {
  722. background-color: #b91c1c;
  723. color: #ffffff;
  724. transform: scale(1.08);
  725. }
  727. /* Loading Overlay styling */
  728. #loading-overlay {
  729. position: fixed;
  730. top: 0;
  731. left: 0;
  732. width: 100vw;
  733. height: 100vh;
  734. background: rgba(255, 255, 255, 0.75);
  735. backdrop-filter: blur(8px);
  736. -webkit-backdrop-filter: blur(8px);
  737. z-index: 99999;
  738. display: none;
  739. flex-direction: column;
  740. align-items: center;
  741. justify-content: center;
  742. opacity: 0;
  743. pointer-events: none;
  744. transition: opacity 0.3s ease;
  745. }
  747. #loading-overlay.active {
  748. opacity: 1;
  749. pointer-events: all;
  750. display: flex;
  751. }
  753. .loader-spinner-container {
  754. background: white;
  755. padding: 2.5rem 3.5rem;
  756. border-radius: 16px;
  757. box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  758. border: 1px solid rgba(15, 92, 120, 0.1);
  759. display: flex;
  760. flex-direction: column;
  761. align-items: center;
  762. gap: 1.25rem;
  763. }
  765. .loader-spinner {
  766. font-size: 3rem;
  767. color: #0f5c78;
  768. }
  770. .loader-text {
  771. font-family: 'Outfit', 'Inter', sans-serif;
  772. font-size: 1.1rem;
  773. font-weight: 600;
  774. color: #0f5c78;
  775. letter-spacing: 0.5px;
  776. }
  778. .empty-state {
  779. text-align: center;
  780. padding: 60px 20px;
  781. color: #64748b;
  782. }
  784. .empty-icon {
  785. font-size: 3.5rem;
  786. color: #cbd5e1;
  787. margin-bottom: 15px;
  788. }
  790. /* Custom Modal Header Styling */
  791. .modal-custom-header {
  792. background-color: #0f5c78;
  793. color: white;
  794. border-top-left-radius: 14px;
  795. border-top-right-radius: 14px;
  796. padding: 18px 24px;
  797. display: flex;
  798. justify-content: space-between;
  799. align-items: center;
  800. }
  802. .modal-custom-title {
  803. font-weight: 700;
  804. font-size: 1.25rem;
  805. display: flex;
  806. align-items: center;
  807. gap: 10px;
  808. margin: 0;
  809. font-family: 'Outfit', sans-serif;
  810. }
  812. .modal-content {
  813. border-radius: 14px;
  814. border: none;
  815. box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
  816. }
  818. /* Pagination and Table Controls Styling */
  819. .pagination .page-item .page-link {
  820. color: #0f5c78;
  821. border-color: #cbd5e1;
  822. font-weight: 500;
  823. padding: 6px 12px;
  824. transition: all 0.2s;
  825. }
  827. .pagination .page-item.active .page-link {
  828. background-color: #0f5c78;
  829. border-color: #0f5c78;
  830. color: #ffffff;
  831. }
  833. .pagination .page-item .page-link:hover {
  834. background-color: #e2e8f0;
  835. border-color: #0f5c78;
  836. color: #0f5c78;
  837. }
  839. .pagination .page-item.disabled .page-link {
  840. color: #94a3b8;
  841. border-color: #cbd5e1;
  842. background-color: #f1f5f9;
  843. }
  845. .table-controls-row {
  846. display: flex;
  847. justify-content: space-between;
  848. align-items: center;
  849. margin-bottom: 20px;
  850. flex-wrap: wrap;
  851. gap: 15px;
  852. }
  854. .table-controls-left,
  855. .table-controls-right {
  856. display: flex;
  857. align-items: center;
  858. gap: 8px;
  859. }
  861. /* Interactive Summary Cell Styles */
  862. .cursor-pointer {
  863. cursor: pointer;
  864. transition: all 0.2s ease;
  865. }
  867. .cursor-pointer:hover {
  868. background-color: #cbd5e1 !important;
  869. transform: scale(1.08);
  870. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  871. z-index: 5;
  872. position: relative;
  873. }
  875. /* Customized premium scrollbar for responsive tables */
  876. .table-responsive::-webkit-scrollbar {
  877. height: 6px;
  878. width: 6px;
  879. }
  881. .table-responsive::-webkit-scrollbar-thumb {
  882. background: #cbd5e1;
  883. border-radius: 4px;
  884. }
  886. .table-responsive::-webkit-scrollbar-track {
  887. background: #f8fafc;
  888. }
  890. /* Force table cells to wrap cleanly and prevent word clipping */
  891. .grid-table th,
  892. .grid-table td {
  893. white-space: normal;
  894. }
  896. /* Keep straight horizontal scrolling layout only on mobile phone viewports */
  897. @media (max-width: 767.98px) {
  899. .grid-table th,
  900. .grid-table td {
  901. white-space: nowrap;
  902. }
  903. }
  905. /* Media Queries for all devices */
  906. @media (max-width: 991.98px) {
  907. .header {
  908. flex-direction: column;
  909. gap: 15px;
  910. text-align: center;
  911. padding: 20px;
  912. }
  914. .header-title h2 {
  915. font-size: 1.35rem;
  916. }
  918. .user-menu {
  919. width: 100%;
  920. justify-content: center;
  921. }
  923. .main-container {
  924. max-width: 100%;
  925. margin: 15px auto;
  926. }
  928. .category-grid {
  929. grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  930. gap: 15px;
  931. margin-bottom: 25px;
  932. }
  934. .card-value {
  935. font-size: 1.5rem;
  936. }
  938. .card-icon {
  939. font-size: 1.85rem;
  940. }
  941. }
  943. @media (max-width: 575.98px) {
  944. .header-title h2 {
  945. font-size: 1.15rem;
  946. }
  948. .category-grid {
  949. grid-template-columns: repeat(2, 1fr);
  950. gap: 10px;
  951. }
  953. .category-card {
  954. padding: 16px;
  955. border-radius: 12px;
  956. }
  958. .card-value {
  959. font-size: 1.25rem;
  960. }
  962. .card-icon {
  963. font-size: 1.5rem;
  964. }
  966. .filter-card,
  967. .table-card {
  968. padding: 16px;
  969. border-radius: 12px;
  970. }
  972. .table-controls-row {
  973. flex-direction: column;
  974. align-items: stretch;
  975. gap: 10px;
  976. }
  978. .table-controls-right input {
  979. width: 100% !important;
  980. }
  982. .btn-add-record {
  983. width: 100%;
  984. justify-content: center;
  985. }
  986. }
  988. /* Make modal-xl wider to fit multi-column data tables comfortably without squishing text */
  989. @media (min-width: 1200px) {
  990. .modal-xl {
  991. max-width: 94% !important;
  992. }
  993. }
  995. @media (min-width: 1600px) {
  996. .modal-xl {
  997. max-width: 1550px !important;
  998. }
  999. }
  1000. </style>
  1001. </head>
  1003. <body>
  1005. <!-- Fullscreen Loading Overlay -->
  1006. <div id="loading-overlay">
  1007. <div class="loader-spinner-container">
  1008. <i class="fa-solid fa-spinner fa-spin loader-spinner"></i>
  1009. <span class="loader-text" id="loader-overlay-text">Processing...</span>
  1010. </div>
  1011. </div>
  1013. <!-- Header Bar -->
  1014. <div class="header">
  1015. <div class="logo-left">
  1016. <img th:src="@{/assets/header-images/gcc1.png}" alt="Greater Chennai Corporation Logo">
  1017. <div class="logo-text">
  1018. <h2>GREATER CHENNAI CORPORATION</h2>
  1019. <p>பெருநகர சென்னை மாநகராட்சி</p>
  1020. </div>
  1021. </div>
  1022. <div class="header-title">
  1023. <h2>Payment Processing Tracker</h2>
  1024. </div>
  1025. <div class="user-menu" style="display: flex; align-items: center; gap: 15px;">
  1026. <!-- Latest Update Badge -->
  1027. <div id="latest-update-badge" class="d-flex align-items-center gap-2 p-2 px-3 rounded text-white"
  1028. style="display: none !important; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.8rem; font-family: 'Outfit', sans-serif; cursor: pointer; transition: all 0.3s;"
  1029. onclick="openLatestUpdatesModal()">
  1030. <i class="fa-solid fa-bell text-warning animate-bounce"></i>
  1031. <div>
  1032. Latest Update: <span class="fw-bold text-warning" id="latest-update-count">0</span> File(s) on
  1033. <span class="fw-semibold" id="latest-update-time">-</span>
  1034. </div>
  1035. </div>
  1037. <span class="user-badge">
  1038. <i class="fa-solid fa-user-shield"></i>
  1039. <span th:text="${usrName}">Guest</span>
  1040. </span>
  1041. <a th:href="@{/gccservicepaymenttracker/logout}" class="btn-logout">
  1042. <i class="fa-solid fa-right-from-bracket"></i> Logout
  1043. </a>
  1044. </div>
  1045. </div>
  1047. <div class="main-container">
  1049. <!-- As On Date & Completed View Mode Display Bar (Above Total No of Bills card) -->
  1050. <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  1051. <div class="as-on-date-badge p-2 px-3 rounded-pill bg-white shadow-sm d-inline-flex align-items-center gap-2"
  1052. style="border: 1px solid #e2e8f0; font-size: 0.88rem; color: #475569; font-weight: 600;">
  1053. <i class="fa-regular fa-calendar-check text-primary fs-6"></i>
  1054. <span>As on Date: <strong id="as-on-date-val" style="color: #09303d;"></strong></span>
  1055. </div>
  1057. <div class="completed-view-badge p-2 px-3 rounded-pill bg-white shadow-sm d-inline-flex align-items-center gap-2"
  1058. style="border: 1px solid #e2e8f0; font-size: 0.88rem; color: #475569; font-weight: 600;">
  1059. <i class="fa-solid fa-filter text-success fs-6"></i>
  1060. <span>Completed View Mode:</span>
  1061. <select id="completed-view-mode" class="form-select form-select-sm border-0 py-0 ps-1 pe-4 fw-bold"
  1062. style="color: #09303d; width: auto; font-size: 0.88rem; cursor: pointer; box-shadow: none;"
  1063. onchange="onCompletedViewModeChange()">
  1064. <option value="current_month">Current Month Completed</option>
  1065. <option value="last_month_completed">Last Month Completed List</option>
  1066. <option value="all_history">All Completed (History)</option>
  1067. </select>
  1068. </div>
  1069. </div>
  1071. <!-- Category Grid (3 Cards) -->
  1072. <div class="category-grid">
  1074. <!-- Total No of Bills -->
  1075. <div class="category-card card-total" onclick="openModalForCount('total', null, 'Total No of Bills')">
  1076. <div class="card-left">
  1077. <h3 class="card-title">Total No of Bills</h3>
  1078. <p class="card-value" id="count-total">0</p>
  1079. </div>
  1080. <i class="fa-solid fa-folder-open card-icon"></i>
  1081. </div>
  1083. <!-- Completed Bills -->
  1084. <div class="category-card card-completed"
  1085. onclick="openModalForCount('completed_custom', null, 'Completed Bills')">
  1086. <div class="card-left">
  1087. <h3 class="card-title">Completed Bills</h3>
  1088. <p class="card-value" id="count-completed">0</p>
  1089. </div>
  1090. <i class="fa-solid fa-circle-check card-icon"></i>
  1091. </div>
  1093. <!-- Pending Bills -->
  1094. <div class="category-card card-pending"
  1095. onclick="openModalForCount('pending_custom', null, 'Pending Bills')">
  1096. <div class="card-left flex-grow-1">
  1097. <div class="d-flex justify-content-between align-items-center">
  1098. <div>
  1099. <h3 class="card-title">Pending Bills</h3>
  1100. <p class="card-value" id="count-pending">0</p>
  1101. </div>
  1102. </div>
  1103. <!-- Split: Pending with IT Cell & Pending with Others -->
  1104. <div class="d-flex gap-2 mt-2 pt-2 border-top" style="border-color: #fee2e2 !important;">
  1105. <div class="pending-split-box flex-fill text-center py-1 px-2 rounded-2"
  1106. style="background-color: #e0f2fe; border: 1px solid #bae6fd; cursor: pointer;"
  1107. onclick="event.stopPropagation(); openModalForCount('it_cell_custom', null, 'Pending with IT Cell');"
  1108. title="Click to view Pending with IT Cell">
  1109. <span class="d-block fw-bold"
  1110. style="font-size: 0.68rem; color: #0369a1; text-transform: uppercase; letter-spacing: 0.3px;">IT
  1111. Cell</span>
  1112. <span class="fw-bold font-monospace" id="count-pending-itcell"
  1113. style="font-size: 0.95rem; color: #0284c7;">0</span>
  1114. </div>
  1115. <div class="pending-split-box flex-fill text-center py-1 px-2 rounded-2"
  1116. style="background-color: #fff7ed; border: 1px solid #ffedd5; cursor: pointer;"
  1117. onclick="event.stopPropagation(); openModalForCount('others_custom', null, 'Pending with Others');"
  1118. title="Click to view Pending with Others">
  1119. <span class="d-block fw-bold"
  1120. style="font-size: 0.68rem; color: #c2410c; text-transform: uppercase; letter-spacing: 0.3px;">Others</span>
  1121. <span class="fw-bold font-monospace" id="count-pending-others"
  1122. style="font-size: 0.95rem; color: #ea580c;">0</span>
  1123. </div>
  1124. </div>
  1125. </div>
  1126. <i class="fa-solid fa-clock card-icon ms-3"></i>
  1127. </div>
  1129. </div>
  1131. <!-- Executive Summary & Charts Section -->
  1132. <div class="row g-4 mb-4">
  1133. <!-- Executive Summary Table Card -->
  1134. <div class="col-lg-8">
  1135. <div class="card h-100 border-0 shadow-sm" style="border-radius: 16px; overflow: hidden;">
  1136. <div class="card-header bg-white py-3 border-0">
  1137. <h4 class="card-title mb-0 fw-bold"
  1138. style="font-family: 'Outfit', sans-serif; color: #09303d; font-size: 1.15rem;">
  1139. <i class="fa-solid fa-chart-line me-2 text-primary"></i>Total No of Pending Bills days wise
  1140. count
  1141. </h4>
  1142. </div>
  1143. <div class="card-body p-3">
  1144. <div class="table-responsive">
  1145. <table class="table table-bordered text-center align-middle mb-0"
  1146. style="font-size: 0.82rem; border-color: #e2e8f0;">
  1147. <thead class="table-light text-secondary fw-bold" style="font-size: 0.75rem;">
  1148. <tr id="summary-thead-tr">
  1149. <th style="background-color: #f8fafc; color: #475569;">Total No of Bills</th>
  1150. <th style="background-color: #f0fdf4; color: #166534;">Completed Bills</th>
  1151. <th style="background-color: #fef2f2; color: #991b1b;">Pending Bills</th>
  1152. <th style="background-color: #fafaf9; color: #44403c;">1 to 15 Days</th>
  1153. <th style="background-color: #fafaf9; color: #44403c;">16 to 30 Days</th>
  1154. <th style="background-color: #fafaf9; color: #44403c;">31 to 60 Days</th>
  1155. <th style="background-color: #fafaf9; color: #44403c;">61 to 90 Days</th>
  1156. <th style="background-color: #fafaf9; color: #44403c;">91 to 120 Days</th>
  1157. <th style="background-color: #fafaf9; color: #44403c;">Over 120 Days</th>
  1158. </tr>
  1159. </thead>
  1160. <tbody>
  1161. <tr class="fw-bold" style="font-size: 1rem; color: #1e293b;" id="summary-tbody-tr">
  1162. <td id="summary-total" class="cursor-pointer text-primary"
  1163. style="background-color: #f8fafc;"
  1164. onclick="openModalForCount('total', null, 'Total No of Bills')">0</td>
  1165. <td id="summary-completed" class="cursor-pointer text-success"
  1166. onclick="openModalForCount('completed_custom', null, 'Completed Bills')">0
  1167. </td>
  1168. <td id="summary-pending" class="cursor-pointer text-danger"
  1169. style="color: #991b1b; font-weight: bold;"
  1170. onclick="openModalForCount('pending_custom', null, 'Pending Bills')">0</td>
  1171. <td id="summary-1-15" class="cursor-pointer"
  1172. onclick="openModalForCount('age', [1, 15], 'Age: 1 to 15 Days')">0</td>
  1173. <td id="summary-16-30" class="cursor-pointer"
  1174. onclick="openModalForCount('age', [16, 30], 'Age: 16 to 30 Days')">0</td>
  1175. <td id="summary-31-60" class="cursor-pointer"
  1176. onclick="openModalForCount('age', [31, 60], 'Age: 31 to 60 Days')">0</td>
  1177. <td id="summary-61-90" class="cursor-pointer"
  1178. onclick="openModalForCount('age', [61, 90], 'Age: 61 to 90 Days')">0</td>
  1179. <td id="summary-91-120" class="cursor-pointer"
  1180. onclick="openModalForCount('age', [91, 120], 'Age: 91 to 120 Days')">0</td>
  1181. <td id="summary-over-120" class="cursor-pointer text-danger"
  1182. onclick="openModalForCount('age', [121, null], 'Age: Over 120 Days')">0</td>
  1183. </tr>
  1184. </tbody>
  1185. </table>
  1186. </div>
  1187. <p class="text-muted mt-2 mb-0" style="font-size: 0.72rem; font-style: italic;">
  1188. <i class="fa-solid fa-circle-info me-1"></i>Tip: Click on any count cell to filter the
  1189. detailed payment tracker list below.
  1190. </p>
  1191. </div>
  1192. </div>
  1193. </div>
  1195. <!-- Pie Chart Card -->
  1196. <div class="col-lg-4">
  1197. <div class="card h-100 border-0 shadow-sm" style="border-radius: 16px;">
  1198. <div class="card-header bg-white py-3 border-0">
  1199. <h4 class="card-title mb-0 fw-bold"
  1200. style="font-family: 'Outfit', sans-serif; color: #09303d; font-size: 1.15rem;">
  1201. <i class="fa-solid fa-chart-pie me-2 text-primary"></i>Total Bills in Percentage
  1202. </h4>
  1203. </div>
  1204. <div class="card-body d-flex align-items-center justify-content-center p-2"
  1205. style="position: relative; height: 180px;">
  1206. <canvas id="statusPieChart" style="max-height: 100%; max-width: 100%;"></canvas>
  1207. </div>
  1208. </div>
  1209. </div>
  1210. </div>
  1212. <!-- Vendor Breakdown Details Card -->
  1213. <div class="card border-0 shadow-sm mb-4" style="border-radius: 16px; overflow: hidden;">
  1214. <div
  1215. class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center flex-wrap gap-2">
  1216. <h4 class="card-title mb-0 fw-bold"
  1217. style="font-family: 'Outfit', sans-serif; color: #09303d; font-size: 1.15rem;">
  1218. <i class="fa-solid fa-users-viewfinder me-2 text-primary"></i>Vendor Breakdown Details
  1219. </h4>
  1220. <div style="font-size: 0.8rem; color: #64748b;">
  1221. <input type="text" id="vendor-breakdown-search" class="form-control form-control-sm"
  1222. style="width: 200px; border-radius: 8px;" placeholder="Search vendor breakdown..."
  1223. oninput="filterVendorBreakdown(this.value)">
  1224. </div>
  1225. </div>
  1226. <div class="card-body p-3">
  1227. <div class="table-responsive" style="max-height: 280px; overflow-y: auto;">
  1228. <table class="table table-striped table-bordered text-center align-middle mb-0"
  1229. style="font-size: 0.8rem; border-color: #e2e8f0;">
  1230. <thead class="table-light sticky-top text-secondary fw-bold"
  1231. style="font-size: 0.72rem; z-index: 10;">
  1232. <tr id="vendor-breakdown-thead-tr">
  1233. <th style="text-align: left; background-color: #f8fafc;">Vendor Name</th>
  1234. <th style="background-color: #f8fafc;">Total No of Bills</th>
  1235. <th style="background-color: #f0fdf4;">Completed Bills</th>
  1236. <th style="background-color: #fffbeb;">Awaiting Details</th>
  1237. <th style="background-color: #f0f9ff;">Pending with Dept</th>
  1238. <th style="background-color: #fef2f2;">Pending</th>
  1239. <th class="age-col d-none" style="background-color: #fafaf9;">1 to 15 Days</th>
  1240. <th class="age-col d-none" style="background-color: #fafaf9;">16 to 30 Days</th>
  1241. <th class="age-col d-none" style="background-color: #fafaf9;">31 to 60 Days</th>
  1242. <th class="age-col d-none" style="background-color: #fafaf9;">61 to 90 Days</th>
  1243. <th class="age-col d-none" style="background-color: #fafaf9;">91 to 120 Days</th>
  1244. <th class="age-col d-none" style="background-color: #fafaf9;">Over 120 Days</th>
  1245. </tr>
  1246. </thead>
  1247. <tbody id="vendor-breakdown-tbody">
  1248. <!-- Populated dynamically via JS -->
  1249. </tbody>
  1250. </table>
  1251. </div>
  1252. </div>
  1253. </div>
  1255. <!-- Filter Card -->
  1256. <div class="filter-card">
  1257. <div class="filter-grid">
  1259. <!-- Date range picker
  1260. <div class="filter-group">
  1261. <label class="filter-label" for="filter-from-date">From Date</label>
  1262. <input type="text" id="filter-from-date" class="filter-input" placeholder="dd/mm/yyyy" readonly>
  1263. </div>
  1265. <div class="filter-group">
  1266. <label class="filter-label" for="filter-to-date">To Date</label>
  1267. <input type="text" id="filter-to-date" class="filter-input" placeholder="dd/mm/yyyy" readonly>
  1268. </div>
  1269. -->
  1271. <!-- Type Filter -->
  1272. <div class="filter-group">
  1273. <label class="filter-label" for="filter-type">Type</label>
  1274. <select id="filter-type" class="filter-input" onchange="handleTypeFilterChange(this.value)">
  1275. <option value="all">- All Types -</option>
  1276. <!-- Commented out static options to load from database
  1277. <option value="sd">Security Deposit</option>
  1278. <option value="tax invoice">Tax Invoice</option>
  1279. <option value="emd">EMD</option>
  1280. <option value="asd">ASD</option>
  1281. <option value="agreement">Agreement</option>
  1282. -->
  1283. </select>
  1284. </div>
  1286. <!-- Status Filter -->
  1287. <div class="filter-group">
  1288. <label class="filter-label" for="filter-status">Status</label>
  1289. <select id="filter-status" class="filter-input" onchange="loadList()">
  1290. <option value="">- All Statuses -</option>
  1291. </select>
  1292. </div>
  1294. <!-- Text Search -->
  1295. <div class="filter-group">
  1296. <label class="filter-label" for="search-text">Search Keyword</label>
  1297. <input type="text" id="search-text" class="filter-input" placeholder="Vendor, subject, invoice #..."
  1298. oninput="handleSearchInput(this.value)">
  1299. </div>
  1301. <!-- Action buttons -->
  1302. <button class="btn-filter-search" onclick="loadList()">
  1303. <i class="fa-solid fa-magnifying-glass"></i> Filter
  1304. </button>
  1306. <button class="btn-filter-reset" onclick="resetFilters()">
  1307. <i class="fa-solid fa-rotate-right"></i> Reset
  1308. </button>
  1310. </div>
  1311. </div>
  1313. <!-- Table Card Section -->
  1314. <div class="table-card">
  1316. <div class="table-card-header">
  1317. <h3 class="table-card-title">
  1318. <i class="fa-solid fa-table-list text-primary"></i>
  1319. <span>Payment Tracking Details</span>
  1320. <span class="active-filter-badge" id="active-category-badge">Type: All Types</span>
  1321. <span class="active-filter-badge ms-2" id="click-filter-badge"
  1322. style="display: none; background-color: #fee2e2; color: #b91c1c;"></span>
  1323. </h3>
  1324. <div class="d-flex align-items-center gap-2">
  1325. <button class="btn btn-sm btn-success fw-bold px-3 d-flex align-items-center gap-2"
  1326. style="border-radius: 8px; height: 36px; font-size: 0.85rem;"
  1327. onclick="exportMainTableToExcel()">
  1328. <i class="fa-solid fa-file-excel"></i> Export to Excel
  1329. </button>
  1330. <button th:if="${isAdmin}"
  1331. class="btn btn-sm btn-danger fw-bold px-3 d-flex align-items-center gap-2"
  1332. style="border-radius: 8px; height: 36px; font-size: 0.85rem; margin: 0;"
  1333. onclick="openDeletedRecordsModal()">
  1334. <i class="fa-solid fa-trash-can"></i> Deleted Records
  1335. </button>
  1336. <button th:if="${isAdmin}" class="btn-add-record" onclick="openAddModal()"
  1337. style="margin: 0; height: 36px;">
  1338. <i class="fa-solid fa-circle-plus"></i> Add Payment Tracking Record
  1339. </button>
  1340. </div>
  1341. </div>
  1343. <!-- Table Controls: Page size & Real-time Search -->
  1344. <div class="table-controls-row">
  1345. <div class="table-controls-left">
  1346. <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">Show</span>
  1347. <select id="table-page-size" class="form-select form-select-sm" style="width: 80px;"
  1348. onchange="changePageSize(this.value)">
  1349. <option value="10">10</option>
  1350. <option value="20" selected>20</option>
  1351. <option value="30">30</option>
  1352. <option value="40">40</option>
  1353. <option value="50">50</option>
  1354. </select>
  1355. <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">entries</span>
  1356. </div>
  1357. <div class="table-controls-right">
  1358. <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">Search:</span>
  1359. <input type="text" id="table-search" class="form-control form-control-sm" style="width: 250px;"
  1360. placeholder="Search in this table..." oninput="handleTableSearch(this.value)">
  1361. </div>
  1362. </div>
  1364. <!-- Responsive Table Grid -->
  1365. <div class="table-responsive">
  1366. <table class="table grid-table table-striped table-hover align-middle" id="tracking-table">
  1367. <!-- Commented out old thead code
  1368. <thead>
  1369. <tr>
  1370. <th class="text-center" style="width: 50px;">S.No</th>
  1371. <th>Received Date</th>
  1372. <th>Type</th>
  1373. <th>Vendor Name</th>
  1374. <th>Subject</th>
  1375. <th>Amount</th>
  1376. <th>Invoice No</th>
  1377. <th>Receipt No</th>
  1378. <th>Invoice Date</th>
  1379. <th>Physical File No</th>
  1380. <th>Remarks</th>
  1381. <th>TAT</th>
  1382. <th>Status</th>
  1383. <th>Followup</th>
  1384. <th>My Followup</th>
  1385. <th class="text-center" style="width: 100px;">Actions</th>
  1386. </tr>
  1387. </thead>
  1388. -->
  1389. <thead>
  1390. <tr>
  1391. <th class="text-center" style="width: 50px;">Sr. No.</th>
  1392. <th onclick="sortMainTable('received_date')" style="cursor: pointer; user-select: none;">
  1393. Received Date <span id="main-sort-received_date-icon"><i class="fa-solid fa-sort ms-1"
  1394. style="opacity: 0.4;"></i></span></th>
  1395. <th onclick="sortMainTable('invoice_date')" style="cursor: pointer; user-select: none;">
  1396. Invoice Date <span id="main-sort-invoice_date-icon"><i class="fa-solid fa-sort ms-1"
  1397. style="opacity: 0.4;"></i></span></th>
  1398. <th>Physical File No.</th>
  1399. <th>eFile No./ Receipt No.</th>
  1400. <th>Subject</th>
  1401. <th>Type of File</th>
  1402. <th>Vendor Name</th>
  1403. <th>Amount</th>
  1404. <th>Age of Bill (Days)</th>
  1405. <th>Status</th>
  1406. <th>Remarks</th>
  1407. <th>Mail Screenshot</th>
  1408. <th>Payment Review</th>
  1409. <th onclick="sortMainTable('updated_date')" style="cursor: pointer; user-select: none;">Last
  1410. Updated At <span id="main-sort-updated_date-icon"><i class="fa-solid fa-sort ms-1"
  1411. style="opacity: 0.4;"></i></span></th>
  1412. <th>Last Updated By</th>
  1413. <th class="text-center" style="width: 120px;">Actions</th>
  1414. </tr>
  1415. </thead>
  1416. <tbody id="tracking-tbody">
  1417. <!-- Populated dynamically via JS -->
  1418. </tbody>
  1419. </table>
  1420. <div id="no-records-found" class="empty-state" style="display: none;">
  1421. <i class="fa-solid fa-folder-open empty-icon"></i>
  1422. <h4>No Records Found</h4>
  1423. <p>No payment tracking records match the active criteria.</p>
  1424. </div>
  1425. </div>
  1427. <!-- Pagination Controls -->
  1428. <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap gap-2">
  1429. <div class="text-secondary fw-semibold" style="font-size: 0.85rem;" id="pagination-info">
  1430. Showing 0 to 0 of 0 entries
  1431. </div>
  1432. <nav aria-label="Table navigation">
  1433. <ul class="pagination pagination-sm mb-0" id="pagination-controls">
  1434. <!-- Populated dynamically via JS -->
  1435. </ul>
  1436. </nav>
  1437. </div>
  1439. </div>
  1441. </div>
  1443. <!-- Add/Edit Modal Form -->
  1444. <div class="modal fade" id="recordModal" tabindex="-1" aria-labelledby="recordModalLabel" aria-hidden="true">
  1445. <div class="modal-dialog modal-lg modal-dialog-centered">
  1446. <div class="modal-content">
  1447. <div class="modal-custom-header">
  1448. <h5 class="modal-custom-title" id="recordModalLabel">
  1449. <i class="fa-solid fa-file-invoice-dollar"></i> Add/Edit Record
  1450. </h5>
  1451. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  1452. aria-label="Close"></button>
  1453. </div>
  1454. <div class="modal-body">
  1455. <form id="recordForm" onsubmit="saveRecord(event)">
  1456. <input type="hidden" id="form-id" name="id">
  1458. <div class="row g-3">
  1460. <!-- Received Date -->
  1461. <div class="col-md-6">
  1462. <label for="form-received-date" class="form-label fw-semibold text-secondary">Received
  1463. Date <span class="text-danger">*</span></label>
  1464. <input type="date" class="form-control" id="form-received-date" required
  1465. onclick="this.showPicker()">
  1466. </div>
  1468. <!-- Type -->
  1469. <div class="col-md-6">
  1470. <label for="form-type" class="form-label fw-semibold text-secondary">Type <span
  1471. class="text-danger">*</span></label>
  1472. <select class="form-select" id="form-type" required>
  1473. <!-- Commented out static options to load from database
  1474. <option value="sd">Security Deposit</option>
  1475. <option value="tax invoice">Tax Invoice</option>
  1476. <option value="emd">EMD</option>
  1477. <option value="asd">ASD</option>
  1478. <option value="agreement">Agreement</option>
  1479. -->
  1480. </select>
  1481. </div>
  1483. <!-- Vendor Name (Dynamic dropdown + Write-in) -->
  1484. <div class="col-md-6">
  1485. <label for="form-vendor-select" class="form-label fw-semibold text-secondary">Vendor
  1486. Name <span class="text-danger">*</span></label>
  1487. <select class="form-select mb-2" id="form-vendor-select"
  1488. onchange="toggleCustomVendor()">
  1489. <option value="">-- Select Vendor --</option>
  1490. <!-- Commented out model-populated options
  1491. <option th:each="vendor : ${vendorDetails}" th:value="${vendor.vendor_name}"
  1492. th:text="${vendor.vendor_name}"></option>
  1493. -->
  1494. <option value="__custom__">-- Write-in custom vendor --</option>
  1495. </select>
  1496. <input type="text" class="form-control" id="form-vendor-custom"
  1497. placeholder="Enter Custom Vendor Name" style="display: none;">
  1498. </div>
  1500. <!-- Subject -->
  1501. <div class="col-md-6">
  1502. <label for="form-subject" class="form-label fw-semibold text-secondary">Subject <span
  1503. class="text-danger">*</span></label>
  1504. <input type="text" class="form-control" id="form-subject"
  1505. placeholder="Enter subject/matter" required>
  1506. </div>
  1508. <!-- Amount -->
  1509. <div class="col-md-6">
  1510. <label for="form-amount" class="form-label fw-semibold text-secondary">Amount <span
  1511. class="text-danger">*</span></label>
  1512. <input type="text" class="form-control" id="form-amount"
  1513. placeholder="Enter amount (e.g. 50,000)" required>
  1514. </div>
  1516. <!-- Invoice No -->
  1517. <div class="col-md-6">
  1518. <label for="form-invoice-no" class="form-label fw-semibold text-secondary">Invoice
  1519. No</label>
  1520. <input type="text" class="form-control" id="form-invoice-no"
  1521. placeholder="Enter invoice number">
  1522. </div>
  1524. <!-- Receipt No -->
  1525. <div class="col-md-6">
  1526. <label for="form-receiptno" class="form-label fw-semibold text-secondary">Receipt
  1527. No</label>
  1528. <input type="text" class="form-control" id="form-receiptno"
  1529. placeholder="Enter Receipt No">
  1530. </div>
  1532. <!-- Invoice Date -->
  1533. <div class="col-md-6">
  1534. <label for="form-invoice-date" class="form-label fw-semibold text-secondary">Invoice
  1535. Date</label>
  1536. <input type="date" class="form-control" id="form-invoice-date"
  1537. onclick="this.showPicker()">
  1538. </div>
  1540. <!-- Physical File No -->
  1541. <div class="col-md-6">
  1542. <label for="form-physical-file-no"
  1543. class="form-label fw-semibold text-secondary">Physical File No</label>
  1544. <input type="text" class="form-control" id="form-physical-file-no"
  1545. placeholder="Enter physical file reference number">
  1546. </div>
  1548. <!-- TAT -->
  1549. <!-- <div class="col-md-6">
  1550. <label for="form-tat" class="form-label fw-semibold text-secondary">Turnaround Time
  1551. (TAT)</label>
  1552. <input type="text" class="form-control" id="form-tat" placeholder="e.g. 5 days">
  1553. </div> -->
  1555. <!-- Status -->
  1556. <div class="col-md-6">
  1557. <label for="form-status" class="form-label fw-semibold text-secondary">Status <span
  1558. class="text-danger">*</span></label>
  1559. <select class="form-select" id="form-status" required>
  1560. </select>
  1561. </div>
  1563. <!-- Followup commented out
  1564. <div class="col-md-6">
  1565. <label for="form-followup"
  1566. class="form-label fw-semibold text-secondary">Follow-up</label>
  1567. <input type="text" class="form-control" id="form-followup" placeholder="Follow-up note">
  1568. </div>
  1569. -->
  1571. <!-- My Followup commented out
  1572. <div class="col-md-6">
  1573. <label for="form-myfollowup" class="form-label fw-semibold text-secondary">My
  1574. Follow-up</label>
  1575. <input type="text" class="form-control" id="form-myfollowup"
  1576. placeholder="Internal follow-up note">
  1577. </div>
  1578. -->
  1580. <!-- Order By commented out
  1581. <div class="col-md-6">
  1582. <label for="form-orderby" class="form-label fw-semibold text-secondary">Order By</label>
  1583. <input type="text" class="form-control" id="form-orderby"
  1584. placeholder="Reference order description">
  1585. </div>
  1586. -->
  1588. <!-- PDF Attachment -->
  1589. <div class="col-md-12">
  1590. <label for="form-pdf" class="form-label fw-semibold text-secondary">PDF Attachment
  1591. (Optional)</label>
  1592. <input type="file" class="form-control" id="form-pdf" accept="application/pdf">
  1593. <div id="form-existing-pdf-container" class="mt-2" style="display: none;">
  1594. <span class="text-secondary fw-semibold">Current Document:</span>
  1595. <a id="form-existing-pdf-link" href="#" target="_blank"
  1596. class="ms-1 text-primary fw-bold text-decoration-none">
  1597. <i class="fa-solid fa-file-pdf"></i> View PDF
  1598. </a>
  1599. </div>
  1600. </div>
  1602. <!-- Screenshot Attachment -->
  1603. <div class="col-md-12 mt-3">
  1604. <label for="form-screenshot" class="form-label fw-semibold text-secondary">Screenshot
  1605. Attachment
  1606. (Optional)</label>
  1607. <input type="file" class="form-control" id="form-screenshot" accept="image/*">
  1608. <div id="form-existing-screenshot-container" class="mt-2" style="display: none;">
  1609. <span class="text-secondary fw-semibold">Current Screenshot:</span>
  1610. <a id="form-existing-screenshot-link" href="#" target="_blank"
  1611. class="ms-1 text-primary fw-bold text-decoration-none">
  1612. <i class="fa-solid fa-image"></i> View Screenshot
  1613. </a>
  1614. </div>
  1615. </div>
  1617. <!-- Remarks -->
  1618. <div class="col-12">
  1619. <label for="form-remarks" class="form-label fw-semibold text-secondary">Remarks</label>
  1620. <textarea class="form-control" id="form-remarks" rows="2"
  1621. placeholder="Additional remarks..."></textarea>
  1622. </div>
  1624. <!-- Payment Review -->
  1625. <div class="col-12 mt-3">
  1626. <label for="form-payment-review" class="form-label fw-semibold text-secondary">Payment
  1627. Review</label>
  1628. <textarea class="form-control" id="form-payment-review" rows="2"
  1629. placeholder="Enter payment review details..."></textarea>
  1630. </div>
  1632. </div>
  1634. <div class="d-flex justify-content-end gap-2 mt-4">
  1635. <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
  1636. <button type="submit" class="btn btn-primary px-4"
  1637. style="background-color: #0f5c78; border-color: #0f5c78;">
  1638. <i class="fa-solid fa-save"></i> Save Record
  1639. </button>
  1640. </div>
  1641. </form>
  1642. </div>
  1643. </div>
  1644. </div>
  1645. </div>
  1647. <!-- History Modal -->
  1648. <div class="modal fade" id="historyModal" tabindex="-1" aria-labelledby="historyModalLabel" aria-hidden="true">
  1649. <div class="modal-dialog modal-xl modal-dialog-centered">
  1650. <div class="modal-content">
  1651. <div class="modal-custom-header" style="background-color: #2c3e50;">
  1652. <h5 class="modal-custom-title" id="historyModalLabel">
  1653. <i class="fa-solid fa-clock-rotate-left"></i> Payment Record Update History
  1654. </h5>
  1655. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  1656. aria-label="Close"></button>
  1657. </div>
  1658. <div class="modal-body">
  1659. <div class="table-responsive" style="max-height: 400px; border: 1px solid #eef2f6;">
  1660. <table class="table table-hover modal-table grid-table" id="history-table">
  1661. <thead>
  1662. <tr>
  1663. <th style="width: 50px;" class="text-center">S.No</th>
  1664. <th>Received Date</th>
  1665. <th>Invoice Date</th>
  1666. <th>Subject</th>
  1667. <th>Type</th>
  1668. <th>Vendor Name</th>
  1669. <th>Amount</th>
  1670. <th>Status</th>
  1671. <th>Remarks</th>
  1672. <th>Payment Review</th>
  1673. <th>Last Updated At</th>
  1674. <th>Last Updated By</th>
  1675. <th class="text-center" style="width: 80px;">Document</th>
  1676. </tr>
  1677. </thead>
  1678. <tbody id="history-tbody">
  1679. <!-- Populated dynamically -->
  1680. </tbody>
  1681. </table>
  1682. <div id="no-history-found" class="text-center text-muted py-5" style="display: none;">
  1683. <i class="fa-solid fa-history fs-1 mb-3 text-secondary" style="opacity: 0.5;"></i>
  1684. <p class="fw-bold mb-0">No update history found for this record.</p>
  1685. </div>
  1686. </div>
  1687. </div>
  1688. </div>
  1689. </div>
  1690. </div>
  1692. <!-- Delete Confirmation Modal with Remarks -->
  1693. <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
  1694. aria-hidden="true" style="z-index: 1070;">
  1695. <div class="modal-dialog modal-dialog-centered">
  1696. <div class="modal-content">
  1697. <div class="modal-custom-header" style="background-color: #dc3545; color: white;">
  1698. <h5 class="modal-custom-title" id="deleteConfirmModalLabel">
  1699. <i class="fa-solid fa-triangle-exclamation"></i> Confirm Delete
  1700. </h5>
  1701. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  1702. aria-label="Close"></button>
  1703. </div>
  1704. <div class="modal-body">
  1705. <p class="text-dark fw-semibold">Are you sure you want to delete this payment tracking record?</p>
  1706. <div class="mb-3">
  1707. <label for="delete-remarks" class="form-label fw-bold text-secondary text-uppercase"
  1708. style="font-size: 0.75rem;">Remarks / Reason for Deletion <span
  1709. class="text-danger">*</span></label>
  1710. <textarea id="delete-remarks" class="form-control" rows="3"
  1711. placeholder="Enter remarks for deleting this record..." required></textarea>
  1712. </div>
  1713. </div>
  1714. <div class="modal-footer bg-light p-2">
  1715. <button type="button" class="btn btn-sm btn-secondary px-3" data-bs-dismiss="modal">Cancel</button>
  1716. <button type="button" class="btn btn-sm btn-danger px-3" onclick="submitDeleteRecord()">Delete
  1717. Record</button>
  1718. </div>
  1719. <!-- OLD IN-PAGE MODAL (COMMENTED OUT FOR REFERENCE - ALL COUNT METRICS NOW OPEN IN A NEW TAB)
  1720. <div class="modal fade" id="countDetailsModal" tabindex="-1" aria-labelledby="countDetailsModalLabel"
  1721. aria-hidden="true">
  1722. <div class="modal-dialog modal-xl modal-dialog-centered">
  1723. <div class="modal-content">
  1724. <div class="modal-custom-header" style="background-color: #0f5c78;">
  1725. <h5 class="modal-custom-title" id="countDetailsModalLabel">
  1726. <i class="fa-solid fa-list-check"></i> Count Details
  1727. </h5>
  1728. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  1729. aria-label="Close"></button>
  1730. </div>
  1731. <div class="modal-body" style="padding: 1.5rem;">
  1732. <div class="mb-3">
  1733. <div class="d-flex align-items-center mb-2">
  1734. <span class="text-uppercase fw-bold text-muted me-2" style="font-size: 0.75rem; letter-spacing: 0.5px;">Type Filter</span>
  1735. </div>
  1736. <div id="modal-type-badges" class="d-inline-flex flex-wrap gap-2 align-middle">
  1737. </div>
  1738. </div>
  1739. <div class="mb-4">
  1740. <div class="d-flex align-items-center mb-2">
  1741. <span class="text-uppercase fw-bold text-muted me-2" style="font-size: 0.75rem; letter-spacing: 0.5px;">Status Filter</span>
  1742. </div>
  1743. <div id="modal-status-badges" class="d-inline-flex flex-wrap gap-2 align-middle">
  1744. </div>
  1745. </div>
  1746. <div class="row g-3 align-items-end mb-4 p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #e2e8f0;">
  1747. <div class="col-md-3">
  1748. <label class="form-label fw-bold text-secondary" style="font-size: 0.82rem;">Type of Bill</label>
  1749. <select id="modal-filter-type" class="filter-input" onchange="applyModalFilters()">
  1750. <option value="all">- All Types -</option>
  1751. </select>
  1752. </div>
  1753. <div class="col-md-3">
  1754. <label class="form-label fw-bold text-secondary" style="font-size: 0.82rem;">Status</label>
  1755. <select id="modal-filter-status" class="filter-input" onchange="applyModalFilters()">
  1756. <option value="all">- All Statuses -</option>
  1757. </select>
  1758. </div>
  1759. <div class="col-md-3">
  1760. <label class="form-label fw-bold text-secondary" style="font-size: 0.82rem;">Vendor</label>
  1761. <select id="modal-filter-vendor" class="filter-input" onchange="applyModalFilters()">
  1762. <option value="all">- All Vendors -</option>
  1763. </select>
  1764. </div>
  1765. <div class="col-md-3">
  1766. <label class="form-label fw-bold text-secondary" style="font-size: 0.82rem;">Search Table</label>
  1767. <input type="text" id="modal-table-search" class="filter-input" placeholder="Search bill, vendor, dept..." oninput="applyModalFilters()">
  1768. </div>
  1769. </div>
  1770. <div class="d-flex justify-content-between align-items-center mb-3 px-1">
  1771. <div class="d-flex align-items-center gap-2">
  1772. <span class="badge bg-secondary px-3 py-2" id="modal-records-count" style="font-size: 0.85rem; font-weight: 600;">0 Records</span>
  1773. </div>
  1774. <div class="d-flex align-items-center gap-2">
  1775. <button class="btn btn-sm btn-success fw-bold px-3 d-flex align-items-center gap-1" style="border-radius: 6px; font-size: 0.82rem;" onclick="exportModalTableToExcel()">
  1776. <i class="fa-solid fa-file-excel"></i> Export Excel
  1777. </button>
  1778. </div>
  1779. </div>
  1780. <div class="table-responsive" style="max-height: 450px; overflow-y: auto; border: 1px solid #eef2f6;">
  1781. <table class="table grid-table table-striped table-hover align-middle mb-0" id="modal-tracking-table">
  1782. <thead class="table-light">
  1783. <tr>
  1784. <th class="text-center" style="width: 50px;">Sr. No.</th>
  1785. <th onclick="sortModalTable('received_date')" style="cursor: pointer; user-select: none;">Received Date <span id="modal-sort-received_date-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1786. <th onclick="sortModalTable('bill_date')" style="cursor: pointer; user-select: none;">Invoice Date <span id="modal-sort-bill_date-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1787. <th onclick="sortModalTable('department_name')" style="cursor: pointer; user-select: none;">Department <span id="modal-sort-department_name-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1788. <th onclick="sortModalTable('file_no')" style="cursor: pointer; user-select: none;">Physical File No. <span id="modal-sort-file_no-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1789. <th onclick="sortModalTable('bill_no')" style="cursor: pointer; user-select: none;">eFile No./ Receipt No. <span id="modal-sort-bill_no-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1790. <th onclick="sortModalTable('subject')" style="cursor: pointer; user-select: none;">Subject <span id="modal-sort-subject-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1791. <th onclick="sortModalTable('resolved_type')" style="cursor: pointer; user-select: none;">Type of File <span id="modal-sort-resolved_type-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1792. <th onclick="sortModalTable('vendor_name')" style="cursor: pointer; user-select: none;">Vendor Name <span id="modal-sort-vendor_name-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1793. <th onclick="sortModalTable('amount')" style="cursor: pointer; user-select: none;">Amount <span id="modal-sort-amount-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1794. <th onclick="sortModalTable('age')" style="cursor: pointer; user-select: none;">Age of Bill (Days) <span id="modal-sort-age-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1795. <th onclick="sortModalTable('resolved_status')" style="cursor: pointer; user-select: none;">Status <span id="modal-sort-resolved_status-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1796. <th>Remarks</th>
  1797. <th onclick="sortModalTable('updated_date')" style="cursor: pointer; user-select: none;">Last Updated Date <span id="modal-sort-updated_date-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
  1798. <th>Last Updated By</th>
  1799. <th class="text-center" style="width: 120px;">Actions</th>
  1800. </tr>
  1801. </thead>
  1802. <tbody id="modal-tracking-tbody">
  1803. </tbody>
  1804. </table>
  1805. <div id="modal-no-records-found" class="empty-state text-center py-5" style="display: none;">
  1806. <i class="fa-solid fa-folder-open empty-icon" style="font-size: 2.5rem; color: #cbd5e1; margin-bottom: 10px;"></i>
  1807. <h5>No Records Found</h5>
  1808. <p>No payment tracking records match the active criteria.</p>
  1809. </div>
  1810. </div>
  1811. </div>
  1812. </div>
  1813. </div>
  1814. </div>
  1815. -->
  1816. </div>
  1817. </div>
  1818. </div>
  1820. <!-- Deleted Records Modal -->
  1821. <div class="modal fade" id="deletedRecordsModal" tabindex="-1" aria-labelledby="deletedRecordsModalLabel"
  1822. aria-hidden="true">
  1823. <div class="modal-dialog modal-xl modal-dialog-centered">
  1824. <div class="modal-content">
  1825. <div class="modal-custom-header" style="background-color: #dc3545;">
  1826. <h5 class="modal-custom-title" id="deletedRecordsModalLabel">
  1827. <i class="fa-solid fa-trash-can"></i> Deleted Payment Records
  1828. </h5>
  1829. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  1830. aria-label="Close"></button>
  1831. </div>
  1832. <div class="modal-body" style="padding: 1.5rem;">
  1833. <!-- Responsive Table Inside Modal -->
  1834. <div class="table-responsive"
  1835. style="max-height: 450px; overflow-y: auto; border: 1px solid #eef2f6;">
  1836. <table class="table grid-table table-striped table-hover align-middle mb-0"
  1837. id="deleted-tracking-table">
  1838. <thead class="table-light">
  1839. <tr>
  1840. <th class="text-center" style="width: 50px;">Sr. No.</th>
  1841. <th>Received Date</th>
  1842. <th>Invoice Date</th>
  1843. <th>Physical File No.</th>
  1844. <th>eFile No./ Receipt No.</th>
  1845. <th>Subject</th>
  1846. <th>Type of File</th>
  1847. <th>Vendor Name</th>
  1848. <th>Amount</th>
  1849. <th>Age of Bill (Days)</th>
  1850. <th>Status</th>
  1851. <th>Deletion Remarks</th>
  1852. <th>Payment Review</th>
  1853. <th>Deleted Date</th>
  1854. <th>Deleted By</th>
  1855. <th class="text-center" style="width: 100px;">Actions</th>
  1856. </tr>
  1857. </thead>
  1858. <tbody id="deleted-tracking-tbody">
  1859. <!-- Populated dynamically via JS -->
  1860. </tbody>
  1861. </table>
  1862. <div id="deleted-no-records-found" class="empty-state text-center py-5" style="display: none;">
  1863. <i class="fa-solid fa-trash-arrow-up empty-icon"
  1864. style="font-size: 2.5rem; color: #cbd5e1; margin-bottom: 10px;"></i>
  1865. <h5>No Deleted Records</h5>
  1866. <p>No deleted payment tracking records found in the database.</p>
  1867. </div>
  1868. </div>
  1869. </div>
  1870. </div>
  1871. </div>
  1872. </div>
  1873. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  1875. <!-- Custom Page Scripting -->
  1876. <script th:inline="javascript">
  1877. const contextPath = /*[[@{/}]]*/ '';
  1878. const isAdmin = /*[[${isAdmin}]]*/ false;
  1880. let activeCategory = 'all';
  1881. let allRecords = [];
  1882. let allBackendData = [];
  1884. function getLocalDateString(dateTimeStr) {
  1885. if (!dateTimeStr) return null;
  1886. try {
  1887. const d = new Date(dateTimeStr);
  1888. if (isNaN(d.getTime())) return null;
  1889. const dd = String(d.getDate()).padStart(2, '0');
  1890. const MM = String(d.getMonth() + 1).padStart(2, '0');
  1891. const yyyy = d.getFullYear();
  1892. return `${yyyy}-${MM}-${dd}`;
  1893. } catch (e) {
  1894. return null;
  1895. }
  1896. }
  1897. let currentFilteredRecords = [];
  1898. let recordModalObj = null;
  1899. let historyModalObj = null;
  1900. let deletedRecordsModalObj = null;
  1901. let currentPage = 1;
  1902. let pageSize = 20;
  1904. // Custom dashboard filter & chart instances
  1905. let activeClickFilter = null;
  1906. let statusChartInstance = null;
  1907. let vendorBreakdownData = [];
  1908. let showVendorAgeBreakdown = false;
  1910. // Dynamic lists for types, vendors, and statuses
  1911. let activeTypes = [];
  1912. let activeVendors = [];
  1913. let activeStatus = [];
  1915. // Date Pickers
  1916. // let fromDatePicker, toDatePicker;
  1918. document.addEventListener('DOMContentLoaded', async () => {
  1919. recordModalObj = new bootstrap.Modal(document.getElementById('recordModal'));
  1920. historyModalObj = new bootstrap.Modal(document.getElementById('historyModal'));
  1921. deletedRecordsModalObj = new bootstrap.Modal(document.getElementById('deletedRecordsModal'));
  1922. // initDatePickers();
  1923. await loadTypesAndVendors();
  1924. loadCounts();
  1925. loadList();
  1926. });
  1928. // Helper to map type_name to a category code
  1929. function getCategoryCode(typeName) {
  1930. const type = String(typeName).toLowerCase().trim();
  1931. if (type === 'asd' || type.includes('asd') || type.includes('additional security')) {
  1932. return 'asd';
  1933. } else if (type.includes('agreement')) {
  1934. return 'agreement';
  1935. } else if (type === 'sd' || (type.includes('security') && !type.includes('additional') && !type.includes('asd'))) {
  1936. return 'sd';
  1937. } else if (type.includes('invoice') || type.includes('bill')) {
  1938. return 'tax invoice';
  1939. } else if (type === 'emd' || type.includes('earnest')) {
  1940. return 'emd';
  1941. } else if (type.includes('guarantee') || type === 'bg') {
  1942. return 'bank guarantee';
  1943. } else if (type.includes('chellan') || type.includes('challan') || type === 'dc') {
  1944. return 'delivery chellan';
  1945. }
  1946. return type;
  1947. }
  1949. // Fetch types, vendors, and statuses from DB endpoints
  1950. async function loadTypesAndVendors() {
  1951. try {
  1952. const [typesRes, vendorsRes, statusRes] = await Promise.all([
  1953. fetch(contextPath + 'gccservicepaymenttracker/api/types?_=' + new Date().getTime()),
  1954. fetch(contextPath + 'gccservicepaymenttracker/api/vendors?_=' + new Date().getTime()),
  1955. fetch(contextPath + 'gccservicepaymenttracker/api/statuslist?_=' + new Date().getTime())
  1956. ]);
  1957. activeTypes = await typesRes.json();
  1958. activeVendors = await vendorsRes.json();
  1959. const allFetched = await statusRes.json();
  1960. const fetchedStatus = allFetched.filter(s => {
  1961. const name = String(s.status_name).toLowerCase().trim();
  1962. return !name.includes('duplicate') && !name.includes('no action') && !name.includes('action required');
  1963. });
  1965. // Sort activeStatus to have completed first, then non-completed in a custom logical order
  1966. const completedStatuses = fetchedStatus.filter(s => getStatusKey(s.status_name) === 'completed');
  1967. const nonCompletedStatuses = fetchedStatus.filter(s => getStatusKey(s.status_name) !== 'completed');
  1969. function getNonCompletedOrderScore(statusName) {
  1970. const name = String(statusName).toLowerCase();
  1971. if (name.includes('awaiting') || name.includes('details')) return 0;
  1972. if (name.includes('initiated') || name.includes('to be')) return 1;
  1973. if (name.includes('eoffice') || name.includes('e-office')) return 2;
  1974. if (name.includes('uac')) return 3;
  1975. if (name.includes('fm unit') || name.includes('fmunit') || name.includes('fm_unit')) return 4;
  1976. return 99;
  1977. }
  1979. nonCompletedStatuses.sort((a, b) => {
  1980. const scoreA = getNonCompletedOrderScore(a.status_name);
  1981. const scoreB = getNonCompletedOrderScore(b.status_name);
  1982. if (scoreA !== scoreB) {
  1983. return scoreA - scoreB;
  1984. }
  1985. return a.status_name.localeCompare(b.status_name);
  1986. });
  1988. activeStatus = [...completedStatuses, ...nonCompletedStatuses];
  1990. populateDropdowns();
  1991. } catch (err) {
  1992. console.error("Error loading types, vendors or statuses:", err);
  1993. }
  1994. }
  1996. function getStatusKey(statusName) {
  1997. if (!statusName) return 'default';
  1998. const name = String(statusName).toLowerCase().trim();
  1999. if (name.includes('completed') || name.includes('approved') || name.includes('paid')) {
  2000. return 'completed';
  2001. }
  2002. if (name.includes('awaiting') || name.includes('details')) {
  2003. return 'awaiting details';
  2004. }
  2005. if (name.includes('dept') || name.includes('uac') || name.includes('fm unit')) {
  2006. return 'pending with dept';
  2007. }
  2008. if (name.includes('pending') || name.includes('initiated') || name.includes('eoffice') || name.includes('e-office')) {
  2009. return 'pending';
  2010. }
  2011. if (name.includes('no action') || name.includes('action required') || name.includes('duplicate')) {
  2012. return 'no action';
  2013. }
  2014. return 'default';
  2015. }
  2017. function getStatusGroup(statusName) {
  2018. if (!statusName) return 'others';
  2019. const name = String(statusName).toLowerCase().trim();
  2020. if (name.includes('completed') || name.includes('approved') || name.includes('paid')) {
  2021. return 'completed';
  2022. }
  2023. if (name.includes('initiated') || name.includes('eoffice') || name.includes('e-office')) {
  2024. return 'it_cell';
  2025. }
  2026. return 'others';
  2027. }
  2029. const statusColors = {
  2030. 'completed': { bg: '#f0fdf4', text: '#166534', badgeClass: 'text-success-dark' },
  2031. 'awaiting details': { bg: '#fffbeb', text: '#92400e', badgeClass: 'text-warning-dark' },
  2032. 'pending with dept': { bg: '#f0f9ff', text: '#075985', badgeClass: 'text-info-dark' },
  2033. 'pending': { bg: '#fef2f2', text: '#991b1b', badgeClass: 'text-danger-dark' },
  2034. 'no action': { bg: '#fafaf9', text: '#44403c', badgeClass: 'text-secondary' },
  2035. 'processed': { bg: '#dbeafe', text: '#1e40af', badgeClass: 'text-primary' },
  2036. 'approved': { bg: '#d1fae5', text: '#065f46', badgeClass: 'text-success-dark' },
  2037. 'paid': { bg: '#dcfce7', text: '#166534', badgeClass: 'text-success-dark' },
  2038. 'rejected': { bg: '#fee2e2', text: '#991b1b', badgeClass: 'text-danger-dark' }
  2039. };
  2041. function getStatusStyle(statusName) {
  2042. const key = getStatusKey(statusName);
  2043. return statusColors[key] || { bg: '#f1f5f9', text: '#475569', badgeClass: 'text-secondary' };
  2044. }
  2046. // Populate selects with dynamic options
  2047. function populateDropdowns() {
  2048. // Populate filter-type
  2049. const filterTypeSelect = document.getElementById('filter-type');
  2050. if (filterTypeSelect) {
  2051. filterTypeSelect.innerHTML = '<option value="all">- All Types -</option>';
  2052. activeTypes.forEach(t => {
  2053. const categoryCode = getCategoryCode(t.type_name);
  2054. const opt = document.createElement('option');
  2055. opt.value = categoryCode;
  2056. opt.textContent = t.type_name;
  2057. filterTypeSelect.appendChild(opt);
  2058. });
  2059. }
  2061. // Populate form-type
  2062. const formTypeSelect = document.getElementById('form-type');
  2063. if (formTypeSelect) {
  2064. formTypeSelect.innerHTML = '<option value="">-- Select Type --</option>';
  2065. activeTypes.forEach(t => {
  2066. const opt = document.createElement('option');
  2067. opt.value = t.id;
  2068. opt.textContent = t.type_name;
  2069. formTypeSelect.appendChild(opt);
  2070. });
  2071. }
  2073. // Populate filter-status
  2074. const filterStatusSelect = document.getElementById('filter-status');
  2075. if (filterStatusSelect) {
  2076. filterStatusSelect.innerHTML = '<option value="">- All Statuses -</option>';
  2077. activeStatus.forEach(s => {
  2078. const opt = document.createElement('option');
  2079. opt.value = s.id;
  2080. opt.textContent = s.status_name;
  2081. filterStatusSelect.appendChild(opt);
  2082. });
  2083. }
  2085. // Populate form-status
  2086. const formStatusSelect = document.getElementById('form-status');
  2087. if (formStatusSelect) {
  2088. formStatusSelect.innerHTML = '<option value="">-- Select Status --</option>';
  2089. activeStatus.forEach(s => {
  2090. const opt = document.createElement('option');
  2091. opt.value = s.id;
  2092. opt.textContent = s.status_name;
  2093. formStatusSelect.appendChild(opt);
  2094. });
  2095. }
  2097. // Populate form-vendor-select
  2098. const formVendorSelect = document.getElementById('form-vendor-select');
  2099. if (formVendorSelect) {
  2100. formVendorSelect.innerHTML = '<option value="">-- Select Vendor --</option>';
  2101. activeVendors.forEach(v => {
  2102. const opt = document.createElement('option');
  2103. opt.value = v.id;
  2104. opt.textContent = v.vendor_name;
  2105. formVendorSelect.appendChild(opt);
  2106. });
  2107. const customOpt = document.createElement('option');
  2108. customOpt.value = '__custom__';
  2109. customOpt.textContent = '-- Write-in custom vendor --';
  2110. formVendorSelect.appendChild(customOpt);
  2111. }
  2113. // Dynamically populate summary table headers
  2114. const summaryTheadTr = document.getElementById('summary-thead-tr');
  2115. if (summaryTheadTr) {
  2116. let summaryHeadHtml = `
  2117. <th style="background-color: #f8fafc; color: #475569;">Total No of Bills</th>
  2118. <th style="background-color: #f0fdf4; color: #166534;">Completed Bills</th>
  2119. <th style="background-color: #fef2f2; color: #991b1b;">Pending Bills</th>
  2120. `;
  2121. summaryHeadHtml += `
  2122. <th style="background-color: #fafaf9; color: #44403c;">1 to 15 Days</th>
  2123. <th style="background-color: #fafaf9; color: #44403c;">16 to 30 Days</th>
  2124. <th style="background-color: #fafaf9; color: #44403c;">31 to 60 Days</th>
  2125. <th style="background-color: #fafaf9; color: #44403c;">61 to 90 Days</th>
  2126. <th style="background-color: #fafaf9; color: #44403c;">91 to 120 Days</th>
  2127. <th style="background-color: #fafaf9; color: #44403c;">Over 120 Days</th>
  2128. `;
  2129. summaryTheadTr.innerHTML = summaryHeadHtml;
  2130. }
  2132. // Dynamically populate vendor breakdown table headers
  2133. const vendorBreakdownTheadTr = document.getElementById('vendor-breakdown-thead-tr');
  2134. if (vendorBreakdownTheadTr) {
  2135. const completedStatuses = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed');
  2136. const nonCompletedStatuses = activeStatus.filter(s => getStatusKey(s.status_name) !== 'completed');
  2138. let vendorHeadHtml = `
  2139. <th style="text-align: left; background-color: #f8fafc;">Vendor Name</th>
  2140. <th style="background-color: #f8fafc;">Total No of Bills</th>
  2141. `;
  2142. completedStatuses.forEach(s => {
  2143. const style = getStatusStyle(s.status_name);
  2144. vendorHeadHtml += `<th style="background-color: ${style.bg}; color: ${style.text};">${escapeHtml(s.status_name)}</th>`;
  2145. });
  2147. // Pending Bills column header with click toggle icon
  2148. const toggleIcon = showPendingSubBreakdown ? 'fa-angles-left' : 'fa-angles-right';
  2149. const titleText = showPendingSubBreakdown ? 'Click to hide status breakdown' : 'Click to show Pending with IT Cell & Pending with Others breakdown';
  2150. const subDNone = showPendingSubBreakdown ? '' : 'd-none';
  2152. vendorHeadHtml += `
  2153. <th class="cursor-pointer" style="background-color: #fef2f2; color: #991b1b; cursor: pointer;" onclick="togglePendingSubBreakdown()" title="${titleText}">
  2154. Pending Bills <i class="fa-solid ${toggleIcon} ms-1 text-muted" style="transition: transform 0.2s;"></i>
  2155. </th>
  2156. `;
  2158. // Sub-breakdown headers under Pending (Shown when showPendingSubBreakdown is true)
  2159. vendorHeadHtml += `
  2160. <th class="pending-sub-col ${subDNone}" style="background-color: #e0f2fe; color: #0369a1;">Pending with IT Cell</th>
  2161. <th class="pending-sub-col ${subDNone}" style="background-color: #fff7ed; color: #c2410c;">Pending with Others</th>
  2162. `;
  2164. // Days-wise count headers - ALWAYS VISIBLE BY DEFAULT
  2165. vendorHeadHtml += `
  2166. <th class="age-col" style="background-color: #fafaf9;">1 to 15 Days</th>
  2167. <th class="age-col" style="background-color: #fafaf9;">16 to 30 Days</th>
  2168. <th class="age-col" style="background-color: #fafaf9;">31 to 60 Days</th>
  2169. <th class="age-col" style="background-color: #fafaf9;">61 to 90 Days</th>
  2170. <th class="age-col" style="background-color: #fafaf9;">91 to 120 Days</th>
  2171. <th class="age-col" style="background-color: #fafaf9;">Over 120 Days</th>
  2172. `;
  2173. vendorBreakdownTheadTr.innerHTML = vendorHeadHtml;
  2174. }
  2175. }
  2177. let showPendingSubBreakdown = false;
  2179. function togglePendingSubBreakdown() {
  2180. showPendingSubBreakdown = !showPendingSubBreakdown;
  2181. populateDropdowns();
  2182. renderVendorBreakdown();
  2183. }
  2185. // Helper to get status name by ID or fallback to status value
  2186. function getStatusName(statusVal) {
  2187. if (statusVal === null || statusVal === undefined || String(statusVal).trim() === '') {
  2188. return '-';
  2189. }
  2190. const cleanVal = String(statusVal).trim();
  2191. const statusObj = activeStatus.find(s => String(s.id) === cleanVal);
  2192. if (statusObj) {
  2193. return statusObj.status_name;
  2194. }
  2195. return statusVal;
  2196. }
  2198. // Show/hide loader overlay
  2199. function showLoader(show, text = 'Processing...') {
  2200. const overlay = document.getElementById('loading-overlay');
  2201. const overlayText = document.getElementById('loader-overlay-text');
  2202. overlayText.textContent = text;
  2203. if (show) {
  2204. overlay.classList.add('active');
  2205. } else {
  2206. overlay.classList.remove('active');
  2207. }
  2208. }
  2210. // Get CSRF details
  2211. function getCsrfHeaders() {
  2212. const csrfToken = document.querySelector("meta[name='_csrf']")?.getAttribute("content");
  2213. const csrfHeader = document.querySelector("meta[name='_csrf_header']")?.getAttribute("content");
  2214. const headers = {};
  2215. if (csrfToken && csrfHeader) {
  2216. headers[csrfHeader] = csrfToken;
  2217. }
  2218. return headers;
  2219. }
  2221. function loadCounts() {
  2222. // No-op: counts are dynamically calculated and set by calculateSummaries()
  2223. }
  2225. // Sorting States and Logic
  2226. let mainSortCol = '';
  2227. let mainSortAsc = true;
  2228. let modalSortCol = '';
  2229. let modalSortAsc = true;
  2231. function sortMainTable(colName) {
  2232. if (mainSortCol === colName) {
  2233. mainSortAsc = !mainSortAsc;
  2234. } else {
  2235. mainSortCol = colName;
  2236. mainSortAsc = true;
  2237. }
  2238. updateSortHeaders('main');
  2239. renderTable();
  2240. }
  2242. function sortModalTable(colName) {
  2243. if (modalSortCol === colName) {
  2244. modalSortAsc = !modalSortAsc;
  2245. } else {
  2246. modalSortCol = colName;
  2247. modalSortAsc = true;
  2248. }
  2249. updateSortHeaders('modal');
  2250. applyModalFilters();
  2251. }
  2253. function updateSortHeaders(type) {
  2254. const cols = ['received_date', 'invoice_date', 'updated_date'];
  2255. cols.forEach(col => {
  2256. const elementId = `${type}-sort-${col}-icon`;
  2257. const el = document.getElementById(elementId);
  2258. if (!el) return;
  2260. const activeCol = (type === 'main') ? mainSortCol : modalSortCol;
  2261. const activeAsc = (type === 'main') ? mainSortAsc : modalSortAsc;
  2263. if (activeCol === col) {
  2264. el.innerHTML = activeAsc
  2265. ? `<i class="fa-solid fa-sort-up ms-1 text-primary"></i>`
  2266. : `<i class="fa-solid fa-sort-down ms-1 text-primary"></i>`;
  2267. } else {
  2268. el.innerHTML = `<i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i>`;
  2269. }
  2270. });
  2271. }
  2273. // Handles select change of card
  2274. function selectCategory(category, cardElement) {
  2275. const isActive = cardElement.classList.contains('active');
  2277. // Remove active class from all
  2278. document.querySelectorAll('.category-card').forEach(el => el.classList.remove('active'));
  2280. const filterTypeSelect = document.getElementById('filter-type');
  2282. if (isActive) {
  2283. activeCategory = 'all';
  2284. document.getElementById('active-category-badge').textContent = 'Type: All Types';
  2285. if (filterTypeSelect) {
  2286. filterTypeSelect.value = 'all';
  2287. }
  2288. } else {
  2289. cardElement.classList.add('active');
  2290. activeCategory = category;
  2292. if (filterTypeSelect) {
  2293. filterTypeSelect.value = category;
  2294. }
  2296. // Update badge text
  2297. const labels = {
  2298. 'sd': 'Security Deposit',
  2299. 'tax invoice': 'Tax Invoice',
  2300. 'emd': 'EMD',
  2301. 'asd': 'ASD',
  2302. 'agreement': 'Agreement'
  2303. };
  2304. document.getElementById('active-category-badge').textContent = 'Type: ' + (labels[category] || category);
  2305. }
  2307. // Refresh list
  2308. loadList();
  2310. // Smoothly scroll down to the table card
  2311. document.querySelector('.table-card')?.scrollIntoView({ behavior: 'smooth' });
  2312. }
  2314. // Loading and Rendering list data
  2315. function loadList() {
  2316. showLoader(true, 'Loading payment tracking details...');
  2318. const statusVal = document.getElementById('filter-status').value;
  2319. const searchVal = document.getElementById('search-text').value;
  2321. // Sync search-text to table-search when hitting main filter search
  2322. const tblSearch = document.getElementById('table-search');
  2323. if (tblSearch) {
  2324. tblSearch.value = searchVal;
  2325. }
  2327. // Build query params
  2328. const params = new URLSearchParams();
  2329. if (activeCategory && activeCategory !== 'all') {
  2330. params.append('category', activeCategory);
  2331. }
  2333. if (statusVal) params.append('status', statusVal);
  2335. // Add cache buster
  2336. params.append('_', new Date().getTime());
  2338. fetch(contextPath + 'gccservicepaymenttracker/api/list?' + params.toString())
  2339. .then(response => response.json())
  2340. .then(data => {
  2341. allBackendData = data;
  2342. applyCompletedViewFilter();
  2343. currentPage = 1;
  2344. clearClickFilter(null);
  2345. updateAsOnDateDisplay();
  2346. calculateSummaries();
  2347. renderTable();
  2348. updateLatestUpdateBadge();
  2349. if (document.getElementById('countDetailsModal')?.classList.contains('show')) {
  2350. applyModalFilters();
  2351. }
  2352. })
  2353. .catch(err => {
  2354. console.error("Error loading details:", err);
  2355. showLoader(false);
  2356. });
  2357. }
  2359. function applyCompletedViewFilter() {
  2360. const mode = document.getElementById('completed-view-mode')?.value || 'current_month';
  2362. const now = new Date();
  2363. const firstDayOfCurrentMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0, 0);
  2364. const firstDayOfLastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1, 0, 0, 0, 0);
  2366. allRecords = allBackendData.filter(row => {
  2367. const statusName = String(row.resolved_status || getStatusName(row.status) || '').trim();
  2368. const statusVal = String(row.status || '').trim();
  2369. const matchedStatus = activeStatus.find(s =>
  2370. String(s.id) === statusVal ||
  2371. s.status_name.toLowerCase().trim() === statusName.toLowerCase().trim()
  2372. );
  2373. const isCompleted = matchedStatus && getStatusKey(matchedStatus.status_name) === 'completed';
  2374. if (isCompleted) {
  2375. const compDateStr = row.updated_date || row.received_date || row.cdate;
  2376. let compDate = compDateStr ? new Date(compDateStr) : null;
  2377. if (compDate && !isNaN(compDate.getTime())) {
  2378. if (mode === 'current_month') {
  2379. if (compDate < firstDayOfCurrentMonth) {
  2380. return false; // Exclude completed bills of previous months
  2381. }
  2382. } else if (mode === 'last_month_completed') {
  2383. if (compDate < firstDayOfLastMonth || compDate >= firstDayOfCurrentMonth) {
  2384. return false; // Include ONLY completed bills of the previous month
  2385. }
  2386. }
  2387. // For 'all_history', include all completed bills
  2388. }
  2389. }
  2390. return true;
  2391. });
  2392. }
  2394. function onCompletedViewModeChange() {
  2395. applyCompletedViewFilter();
  2396. calculateSummaries();
  2397. renderTable();
  2398. }
  2400. function renderTable() {
  2401. const tbody = document.getElementById('tracking-tbody');
  2402. const noRecords = document.getElementById('no-records-found');
  2403. tbody.innerHTML = '';
  2405. const searchVal = document.getElementById('table-search')?.value || '';
  2406. let query = searchVal.toLowerCase().trim();
  2408. let filtered = allRecords.filter(row => {
  2409. // Apply activeClickFilter if set
  2410. if (activeClickFilter) {
  2411. const age = parseInt(calculateAgeOfBill(row.received_date), 10);
  2412. const status = String(row.resolved_status || getStatusName(row.status) || '').trim();
  2413. const vendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  2415. if (activeClickFilter.type === 'status') {
  2416. const filterVal = String(activeClickFilter.value);
  2417. const matched = activeStatus.find(s => String(s.id) === filterVal);
  2418. if (matched) {
  2419. const rowStatusStr = String(row.status || '').trim();
  2420. const matches = rowStatusStr === String(matched.id) ||
  2421. rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
  2422. if (!matches) return false;
  2423. } else {
  2424. if (status.toLowerCase() !== filterVal.toLowerCase()) return false;
  2425. }
  2426. } else if (activeClickFilter.type === 'age') {
  2427. const [min, max] = activeClickFilter.value;
  2428. if (max !== null) {
  2429. if (age < min || age > max) return false;
  2430. } else {
  2431. if (age < min) return false;
  2432. }
  2433. } else if (activeClickFilter.type === 'vendor') {
  2434. if (vendor !== activeClickFilter.vendorName) return false;
  2436. if (activeClickFilter.col) {
  2437. if (activeClickFilter.col.match(/^[0-9]+$/)) {
  2438. const matched = activeStatus.find(s => String(s.id) === activeClickFilter.col);
  2439. if (matched) {
  2440. const rowStatusStr = String(row.status || '').trim();
  2441. const rowMatches = rowStatusStr === String(matched.id) ||
  2442. rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
  2443. if (!rowMatches) return false;
  2444. }
  2445. } else {
  2446. if (activeClickFilter.col === 'completed' && status.toLowerCase() !== 'completed') return false;
  2447. if (activeClickFilter.col === 'awaiting' && status.toLowerCase() !== 'awaiting details') return false;
  2448. if (activeClickFilter.col === 'pending_dept' && status.toLowerCase() !== 'pending with dept') return false;
  2450. if (activeClickFilter.col === 'age_1_15' && (age < 1 || age > 15)) return false;
  2451. if (activeClickFilter.col === 'age_16_30' && (age < 16 || age > 30)) return false;
  2452. if (activeClickFilter.col === 'age_31_60' && (age < 31 || age > 60)) return false;
  2453. if (activeClickFilter.col === 'age_61_90' && (age < 61 || age > 90)) return false;
  2454. if (activeClickFilter.col === 'age_91_120' && (age < 91 || age > 120)) return false;
  2455. if (activeClickFilter.col === 'age_over_120' && age <= 120) return false;
  2456. }
  2457. }
  2458. }
  2459. }
  2461. if (!query) return true;
  2462. const vName = String(row.resolved_vendor || row.vendor_name || '').toLowerCase();
  2463. const tName = String(row.resolved_type || row.type || '').toLowerCase();
  2464. const statusName = String(row.resolved_status || getStatusName(row.status) || '').toLowerCase();
  2465. return (
  2466. vName.includes(query) ||
  2467. tName.includes(query) ||
  2468. (row.subject && String(row.subject).toLowerCase().includes(query)) ||
  2469. (row.amount && String(row.amount).toLowerCase().includes(query)) ||
  2470. (row.invoice_no && String(row.invoice_no).toLowerCase().includes(query)) ||
  2471. (row.receiptno && String(row.receiptno).toLowerCase().includes(query)) ||
  2472. (row.physical_file_no && String(row.physical_file_no).toLowerCase().includes(query)) ||
  2473. (row.remarks && String(row.remarks).toLowerCase().includes(query)) ||
  2474. (row.tat && String(row.tat).toLowerCase().includes(query)) ||
  2475. statusName.includes(query)
  2476. );
  2477. });
  2479. // Sort main table dataset
  2480. if (mainSortCol) {
  2481. filtered.sort((a, b) => {
  2482. let valA = a[mainSortCol] || '';
  2483. let valB = b[mainSortCol] || '';
  2485. let timeA = valA ? new Date(valA).getTime() : 0;
  2486. let timeB = valB ? new Date(valB).getTime() : 0;
  2487. if (isNaN(timeA)) timeA = 0;
  2488. if (isNaN(timeB)) timeB = 0;
  2490. if (timeA !== timeB) {
  2491. return mainSortAsc ? timeA - timeB : timeB - timeA;
  2492. }
  2493. return mainSortAsc ? String(valA).localeCompare(String(valB)) : String(valB).localeCompare(String(valA));
  2494. });
  2495. }
  2497. currentFilteredRecords = filtered;
  2499. showLoader(false);
  2501. const totalRecords = filtered.length;
  2502. if (totalRecords === 0) {
  2503. noRecords.style.display = 'block';
  2504. document.getElementById('pagination-info').textContent = 'Showing 0 to 0 of 0 entries';
  2505. document.getElementById('pagination-controls').innerHTML = '';
  2506. return;
  2507. }
  2509. noRecords.style.display = 'none';
  2511. // Paginate
  2512. const totalPages = Math.ceil(totalRecords / pageSize);
  2513. if (currentPage > totalPages) {
  2514. currentPage = totalPages;
  2515. }
  2516. if (currentPage < 1) {
  2517. currentPage = 1;
  2518. }
  2520. const startIndex = (currentPage - 1) * pageSize;
  2521. const endIndex = Math.min(startIndex + pageSize, totalRecords);
  2522. const paginatedData = filtered.slice(startIndex, endIndex);
  2524. // Update Pagination Info
  2525. document.getElementById('pagination-info').textContent =
  2526. `Showing ${startIndex + 1} to ${endIndex} of ${totalRecords} entries`;
  2528. paginatedData.forEach((row, pageIndex) => {
  2529. const globalIndex = startIndex + pageIndex;
  2530. const tr = document.createElement('tr');
  2532. // S.No
  2533. const tdIndex = document.createElement('td');
  2534. tdIndex.className = 'text-center fw-semibold text-secondary';
  2535. tdIndex.textContent = globalIndex + 1;
  2536. tr.appendChild(tdIndex);
  2538. // Helper for blank values
  2539. const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
  2541. // Format Dates (yyyy-MM-dd to dd/MM/yyyy)
  2542. const formatDate = dateStr => {
  2543. if (!dateStr) return '-';
  2544. const parts = dateStr.split('-');
  2545. if (parts.length === 3) {
  2546. return `${parts[2]}/${parts[1]}/${parts[0]}`;
  2547. }
  2548. return dateStr;
  2549. };
  2551. // Format Date-Times (yyyy-MM-ddTHH:mm:ss... to dd/MM/yyyy HH:mm:ss)
  2552. const formatDateTime = dateTimeStr => {
  2553. if (!dateTimeStr) return '-';
  2554. try {
  2555. const d = new Date(dateTimeStr);
  2556. if (!isNaN(d.getTime())) {
  2557. const dd = String(d.getDate()).padStart(2, '0');
  2558. const MM = String(d.getMonth() + 1).padStart(2, '0');
  2559. const yyyy = d.getFullYear();
  2560. const HH = String(d.getHours()).padStart(2, '0');
  2561. const mm = String(d.getMinutes()).padStart(2, '0');
  2562. const ss = String(d.getSeconds()).padStart(2, '0');
  2563. return `${dd}/${MM}/${yyyy} ${HH}:${mm}:${ss}`;
  2564. }
  2565. } catch (e) {
  2566. console.error(e);
  2567. }
  2568. return dateTimeStr;
  2569. };
  2573. const getTypeBadge = (typeVal, filePath) => {
  2574. const cleanType = String(typeVal || '').trim().toLowerCase();
  2575. let label = cleanType;
  2576. let badgeClass = 'type-sd';
  2578. if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
  2579. label = 'ASD';
  2580. badgeClass = 'type-asd';
  2581. } else if (cleanType.includes('agreement')) {
  2582. label = 'Agreement';
  2583. badgeClass = 'type-agreement';
  2584. } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
  2585. label = 'Security Deposit';
  2586. badgeClass = 'type-sd';
  2587. } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
  2588. label = 'Tax Invoice';
  2589. badgeClass = 'type-tax-invoice';
  2590. } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
  2591. label = 'EMD';
  2592. badgeClass = 'type-emd';
  2593. } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
  2594. label = 'Bank Guarantee';
  2595. badgeClass = 'type-bank-guarantee';
  2596. } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
  2597. label = 'Delivery Chellan';
  2598. badgeClass = 'type-delivery-chellan';
  2599. } else {
  2600. // Fallback: check if cleanType is a numeric ID from activeTypes
  2601. const typeObj = activeTypes.find(t => String(t.id) === cleanType);
  2602. if (typeObj) {
  2603. return getTypeBadge(typeObj.type_name, filePath);
  2604. }
  2605. label = typeVal || '-';
  2606. badgeClass = 'status-default';
  2607. }
  2609. let onClickAttr = '';
  2610. if (filePath) {
  2611. let pdfUrl = filePath;
  2612. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  2613. pdfUrl = contextPath + pdfUrl.substring(1);
  2614. } else {
  2615. pdfUrl = contextPath + pdfUrl;
  2616. }
  2617. onClickAttr = `onclick="window.open('${escapeHtml(pdfUrl)}', '_blank')"`;
  2618. } else {
  2619. onClickAttr = `onclick="alert('pdf file not uploaded')"`;
  2620. }
  2622. return `<span class="type-badge ${badgeClass} cursor-pointer" ${onClickAttr} style="cursor: pointer;" title="${filePath ? 'Click to view PDF' : 'PDF not uploaded'}">${label}</span>`;
  2623. };
  2625. const dispStatus = String(row.resolved_status || getStatusName(row.status) || '').trim();
  2627. let screenshotHtml = '-';
  2628. if (row.mail_screenshot_path) {
  2629. let imgUrl = row.mail_screenshot_path;
  2630. if (contextPath && contextPath.endsWith('/') && imgUrl.startsWith('/')) {
  2631. imgUrl = contextPath + imgUrl.substring(1);
  2632. } else {
  2633. imgUrl = contextPath + imgUrl;
  2634. }
  2635. screenshotHtml = `<a href="${imgUrl}" target="_blank" class="btn btn-sm btn-outline-info py-0 px-2" style="font-size: 0.75rem; border-color: #06b6d4; color: #06b6d4; display: inline-flex; align-items: center; gap: 4px;" title="View Screenshot"><i class="fa-solid fa-image"></i> View</a>`;
  2636. }
  2638. tr.innerHTML += `
  2639. <td>${formatDate(row.received_date)}</td>
  2640. <td>${formatDate(row.invoice_date)}</td>
  2641. <td>${text(row.physical_file_no)}</td>
  2642. <td>${text(row.receiptno)}</td>
  2643. <td>${text(row.subject)}</td>
  2644. <td>${getTypeBadge(row.resolved_type || row.type, row.file_path)}</td>
  2645. <td class="fw-semibold text-secondary">${text(row.resolved_vendor || row.vendor_name)}</td>
  2646. <td class="fw-semibold text-dark">&#8377; ${text(row.amount)}</td>
  2647. <td>${calculateAgeOfBill(row.received_date)}</td>
  2648. <td><span class="status-badge status-${dispStatus.toLowerCase().replace(/\s+/g, '-')}">${text(dispStatus)}</span></td>
  2649. <td><small class="text-muted">${text(row.remarks)}</small></td>
  2650. <td>${screenshotHtml}</td>
  2651. <td><small class="text-muted">${text(row.payment_review)}</small></td>
  2652. <td>${formatDateTime(row.updated_date)}</td>
  2653. <td class="fw-semibold text-secondary">${text(row.updated_by_name || '-')}</td>
  2654. `;
  2656. // Actions cell
  2657. const tdActions = document.createElement('td');
  2658. tdActions.className = 'text-center';
  2660. if (row.file_path) {
  2661. const btnViewPdf = document.createElement('button');
  2662. btnViewPdf.className = 'btn-grid-action btn-grid-pdf me-1';
  2663. btnViewPdf.innerHTML = '<i class="fa-solid fa-file-pdf"></i>';
  2664. btnViewPdf.title = 'View PDF Document';
  2665. btnViewPdf.onclick = () => {
  2666. let pdfUrl = row.file_path;
  2667. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  2668. pdfUrl = contextPath + pdfUrl.substring(1);
  2669. } else {
  2670. pdfUrl = contextPath + pdfUrl;
  2671. }
  2672. window.open(pdfUrl, '_blank');
  2673. };
  2674. tdActions.appendChild(btnViewPdf);
  2675. }
  2677. if (row.mail_screenshot_path) {
  2678. const btnViewScreenshot = document.createElement('button');
  2679. btnViewScreenshot.className = 'btn-grid-action btn-outline-info me-1';
  2680. btnViewScreenshot.style.border = '1px solid #06b6d4';
  2681. btnViewScreenshot.style.color = '#06b6d4';
  2682. btnViewScreenshot.innerHTML = '<i class="fa-solid fa-image"></i>';
  2683. btnViewScreenshot.title = 'View Screenshot';
  2684. btnViewScreenshot.onclick = () => {
  2685. let imgUrl = row.mail_screenshot_path;
  2686. if (contextPath && contextPath.endsWith('/') && imgUrl.startsWith('/')) {
  2687. imgUrl = contextPath + imgUrl.substring(1);
  2688. } else {
  2689. imgUrl = contextPath + imgUrl;
  2690. }
  2691. window.open(imgUrl, '_blank');
  2692. };
  2693. tdActions.appendChild(btnViewScreenshot);
  2694. }
  2696. // History Button (Available to all logged in users)
  2697. const btnHistory = document.createElement('button');
  2698. btnHistory.className = 'btn-grid-action btn-outline-secondary me-1';
  2699. btnHistory.innerHTML = '<i class="fa-solid fa-clock-rotate-left"></i>';
  2700. btnHistory.style.border = '1px solid #cbd5e1';
  2701. btnHistory.title = 'View Update History';
  2702. btnHistory.onclick = () => showHistoryModal(row.id);
  2703. tdActions.appendChild(btnHistory);
  2705. if (isAdmin) {
  2706. const btnEdit = document.createElement('button');
  2707. btnEdit.className = 'btn-grid-action btn-grid-edit me-1';
  2708. btnEdit.innerHTML = '<i class="fa-solid fa-pen-to-square"></i>';
  2709. btnEdit.title = 'Edit Record';
  2710. btnEdit.onclick = () => openEditModal(row);
  2712. const btnDelete = document.createElement('button');
  2713. btnDelete.className = 'btn-grid-action btn-grid-delete';
  2714. btnDelete.innerHTML = '<i class="fa-solid fa-trash-can"></i>';
  2715. btnDelete.title = 'Delete Record';
  2716. btnDelete.onclick = () => deleteRecord(row.id);
  2718. tdActions.appendChild(btnEdit);
  2719. tdActions.appendChild(btnDelete);
  2720. }
  2721. tr.appendChild(tdActions);
  2723. tbody.appendChild(tr);
  2724. });
  2726. // Rebuild Pagination Controls
  2727. buildPaginationControls(totalPages);
  2728. }
  2730. function buildPaginationControls(totalPages) {
  2731. const container = document.getElementById('pagination-controls');
  2732. container.innerHTML = '';
  2734. if (totalPages <= 1) {
  2735. return;
  2736. }
  2738. // Previous Button
  2739. const prevLi = document.createElement('li');
  2740. prevLi.className = 'page-item' + (currentPage === 1 ? ' disabled' : '');
  2741. prevLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${currentPage - 1})">Previous</a>`;
  2742. container.appendChild(prevLi);
  2744. // Page numbers
  2745. const maxVisible = 5;
  2746. let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
  2747. let endPage = Math.min(totalPages, startPage + maxVisible - 1);
  2749. if (endPage - startPage + 1 < maxVisible) {
  2750. startPage = Math.max(1, endPage - maxVisible + 1);
  2751. }
  2753. if (startPage > 1) {
  2754. const firstLi = document.createElement('li');
  2755. firstLi.className = 'page-item';
  2756. firstLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(1)">1</a>`;
  2757. container.appendChild(firstLi);
  2759. if (startPage > 2) {
  2760. const dotsLi = document.createElement('li');
  2761. dotsLi.className = 'page-item disabled';
  2762. dotsLi.innerHTML = `<span class="page-link">...</span>`;
  2763. container.appendChild(dotsLi);
  2764. }
  2765. }
  2767. for (let i = startPage; i <= endPage; i++) {
  2768. const pageLi = document.createElement('li');
  2769. pageLi.className = 'page-item' + (i === currentPage ? ' active' : '');
  2770. pageLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${i})">${i}</a>`;
  2771. container.appendChild(pageLi);
  2772. }
  2774. if (endPage < totalPages) {
  2775. if (endPage < totalPages - 1) {
  2776. const dotsLi = document.createElement('li');
  2777. dotsLi.className = 'page-item disabled';
  2778. dotsLi.innerHTML = `<span class="page-link">...</span>`;
  2779. container.appendChild(dotsLi);
  2780. }
  2782. const lastLi = document.createElement('li');
  2783. lastLi.className = 'page-item';
  2784. lastLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${totalPages})">${totalPages}</a>`;
  2785. container.appendChild(lastLi);
  2786. }
  2788. // Next Button
  2789. const nextLi = document.createElement('li');
  2790. nextLi.className = 'page-item' + (currentPage === totalPages ? ' disabled' : '');
  2791. nextLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${currentPage + 1})">Next</a>`;
  2792. container.appendChild(nextLi);
  2793. }
  2795. function goToPage(page) {
  2796. currentPage = page;
  2797. renderTable();
  2798. }
  2800. function changePageSize(size) {
  2801. pageSize = parseInt(size, 10);
  2802. currentPage = 1;
  2803. renderTable();
  2804. }
  2806. // Handles search in local table search input
  2807. function handleTableSearch(keyword) {
  2808. const filterSearch = document.getElementById('search-text');
  2809. if (filterSearch) {
  2810. filterSearch.value = keyword;
  2811. }
  2812. currentPage = 1;
  2813. renderTable();
  2814. }
  2816. function handleSearchInput(keyword) {
  2817. const tblSearch = document.getElementById('table-search');
  2818. if (tblSearch) {
  2819. tblSearch.value = keyword;
  2820. }
  2821. currentPage = 1;
  2822. renderTable();
  2823. }
  2825. function handleTypeFilterChange(category) {
  2826. activeCategory = category;
  2828. // Remove active class from all top cards
  2829. document.querySelectorAll('.category-card').forEach(el => el.classList.remove('active'));
  2831. if (category !== 'all') {
  2832. const classMap = {
  2833. 'sd': 'card-sd',
  2834. 'tax invoice': 'card-invoice',
  2835. 'emd': 'card-emd',
  2836. 'asd': 'card-asd',
  2837. 'agreement': 'card-agreement'
  2838. };
  2839. const cardClass = classMap[category];
  2840. if (cardClass) {
  2841. const cardElement = document.querySelector('.' + cardClass);
  2842. if (cardElement) {
  2843. cardElement.classList.add('active');
  2844. }
  2845. }
  2847. const labels = {
  2848. 'sd': 'Security Deposit',
  2849. 'tax invoice': 'Tax Invoice',
  2850. 'emd': 'EMD',
  2851. 'asd': 'ASD',
  2852. 'agreement': 'Agreement'
  2853. };
  2854. document.getElementById('active-category-badge').textContent = 'Type: ' + (labels[category] || category);
  2855. } else {
  2856. document.getElementById('active-category-badge').textContent = 'Type: All Types';
  2857. }
  2859. loadList();
  2860. }
  2862. function resetFilters() {
  2863. document.getElementById('filter-status').value = '';
  2864. document.getElementById('search-text').value = '';
  2866. const filterType = document.getElementById('filter-type');
  2867. if (filterType) {
  2868. filterType.value = 'all';
  2869. }
  2871. activeCategory = 'all';
  2872. document.querySelectorAll('.category-card').forEach(el => el.classList.remove('active'));
  2873. document.getElementById('active-category-badge').textContent = 'Type: All Types';
  2875. const tblSearch = document.getElementById('table-search');
  2876. if (tblSearch) {
  2877. tblSearch.value = '';
  2878. }
  2879. currentPage = 1;
  2880. loadList();
  2881. }
  2883. // Toggle text field for dynamic vendor select dropdown
  2884. function toggleCustomVendor() {
  2885. const select = document.getElementById('form-vendor-select');
  2886. const customInput = document.getElementById('form-vendor-custom');
  2887. if (select.value === '__custom__') {
  2888. customInput.style.display = 'block';
  2889. customInput.required = true;
  2890. } else {
  2891. customInput.style.display = 'none';
  2892. customInput.required = false;
  2893. customInput.value = '';
  2894. }
  2895. }
  2897. // Edit/Add Modals
  2898. function openAddModal() {
  2899. document.getElementById('recordModalLabel').innerHTML = '<i class="fa-solid fa-circle-plus"></i> Add Payment Tracking Record';
  2900. document.getElementById('recordForm').reset();
  2901. document.getElementById('form-id').value = '';
  2903. // Set type to active category by default
  2904. const formTypeSelect = document.getElementById('form-type');
  2905. formTypeSelect.value = '';
  2906. if (activeCategory && activeCategory !== 'all') {
  2907. for (let option of formTypeSelect.options) {
  2908. if (option.value) {
  2909. const typeObj = activeTypes.find(t => String(t.id) === String(option.value));
  2910. if (typeObj && getCategoryCode(typeObj.type_name) === activeCategory) {
  2911. formTypeSelect.value = option.value;
  2912. break;
  2913. }
  2914. }
  2915. }
  2916. }
  2917. const pendingObj = activeStatus.find(s => s.status_name.toLowerCase().trim() === 'pending');
  2918. document.getElementById('form-status').value = pendingObj ? String(pendingObj.id) : '';
  2920. document.getElementById('form-vendor-custom').style.display = 'none';
  2921. document.getElementById('form-vendor-custom').required = false;
  2923. // Reset PDF upload elements
  2924. document.getElementById('form-pdf').value = '';
  2925. document.getElementById('form-existing-pdf-container').style.display = 'none';
  2927. // Reset Screenshot upload elements
  2928. document.getElementById('form-screenshot').value = '';
  2929. document.getElementById('form-existing-screenshot-container').style.display = 'none';
  2931. recordModalObj.show();
  2932. }
  2934. function openEditModal(row) {
  2935. document.getElementById('recordModalLabel').innerHTML = '<i class="fa-solid fa-file-signature"></i> Edit Payment Tracking Record';
  2936. document.getElementById('recordForm').reset();
  2938. document.getElementById('form-id').value = row.id;
  2939. document.getElementById('form-received-date').value = row.received_date || '';
  2941. // Set type select
  2942. const typeSelect = document.getElementById('form-type');
  2943. const rowType = String(row.type || '').trim().toLowerCase();
  2944. typeSelect.value = '';
  2946. let found = false;
  2947. for (let option of typeSelect.options) {
  2948. if (option.value && String(option.value) === String(row.type)) {
  2949. typeSelect.value = option.value;
  2950. found = true;
  2951. break;
  2952. }
  2953. }
  2955. if (!found && rowType) {
  2956. const legacyCategory = getCategoryCode(rowType);
  2957. for (let option of typeSelect.options) {
  2958. if (option.value) {
  2959. const typeObj = activeTypes.find(t => String(t.id) === String(option.value));
  2960. if (typeObj) {
  2961. const optCategory = getCategoryCode(typeObj.type_name);
  2962. if (optCategory === legacyCategory) {
  2963. typeSelect.value = option.value;
  2964. found = true;
  2965. break;
  2966. }
  2967. }
  2968. }
  2969. }
  2970. }
  2972. document.getElementById('form-subject').value = row.subject || '';
  2973. document.getElementById('form-amount').value = row.amount || '';
  2974. document.getElementById('form-invoice-no').value = row.invoice_no || '';
  2976. document.getElementById('form-receiptno').value = row.receiptno || '';
  2978. document.getElementById('form-invoice-date').value = row.invoice_date || '';
  2979. document.getElementById('form-physical-file-no').value = row.physical_file_no || '';
  2980. const tatEl = document.getElementById('form-tat');
  2981. if (tatEl) tatEl.value = row.tat || '';
  2983. const statusSelect = document.getElementById('form-status');
  2984. const rowStatus = String(row.status || '').trim();
  2985. statusSelect.value = '';
  2987. let statusFound = false;
  2988. // 1. Try matching by option value (which can be ID or exact string match)
  2989. for (let option of statusSelect.options) {
  2990. if (option.value && String(option.value).toLowerCase() === rowStatus.toLowerCase()) {
  2991. statusSelect.value = option.value;
  2992. statusFound = true;
  2993. break;
  2994. }
  2995. }
  2997. // 2. Try matching by option text content (which is the status name)
  2998. if (!statusFound && rowStatus) {
  2999. for (let option of statusSelect.options) {
  3000. if (option.text && option.text.toLowerCase().trim() === rowStatus.toLowerCase().trim()) {
  3001. statusSelect.value = option.value;
  3002. statusFound = true;
  3003. break;
  3004. }
  3005. }
  3006. }
  3008. // Fallback default
  3009. if (!statusFound) {
  3010. const pendingObj = activeStatus.find(s => s.status_name.toLowerCase().trim() === 'pending');
  3011. statusSelect.value = pendingObj ? String(pendingObj.id) : '';
  3012. }
  3013. const followupEl = document.getElementById('form-followup');
  3014. if (followupEl) followupEl.value = row.followup || '';
  3015. const myfollowupEl = document.getElementById('form-myfollowup');
  3016. if (myfollowupEl) myfollowupEl.value = row.myfollowup || '';
  3017. const orderbyEl = document.getElementById('form-orderby');
  3018. if (orderbyEl) orderbyEl.value = row.order_by || '';
  3019. document.getElementById('form-remarks').value = row.remarks || '';
  3020. document.getElementById('form-payment-review').value = row.payment_review || '';
  3022. // Set vendor select (using ID or legacy fallback/custom)
  3023. const select = document.getElementById('form-vendor-select');
  3024. const vendorVal = String(row.vendor_name || '').trim();
  3025. select.value = '';
  3026. document.getElementById('form-vendor-custom').style.display = 'none';
  3027. document.getElementById('form-vendor-custom').required = false;
  3028. document.getElementById('form-vendor-custom').value = '';
  3030. if (vendorVal) {
  3031. let optionFound = false;
  3032. for (let option of select.options) {
  3033. if (option.value && option.value !== '__custom__' && String(option.value) === vendorVal) {
  3034. select.value = option.value;
  3035. optionFound = true;
  3036. break;
  3037. }
  3038. }
  3040. if (!optionFound) {
  3041. const matchedVendor = activeVendors.find(v => String(v.vendor_name).toLowerCase().trim() === vendorVal.toLowerCase());
  3042. if (matchedVendor) {
  3043. select.value = String(matchedVendor.id);
  3044. optionFound = true;
  3045. }
  3046. }
  3048. if (!optionFound) {
  3049. select.value = '__custom__';
  3050. const customInput = document.getElementById('form-vendor-custom');
  3051. customInput.style.display = 'block';
  3052. customInput.required = true;
  3053. customInput.value = row.vendor_name;
  3054. }
  3055. }
  3057. // Populate/Reset PDF elements
  3058. document.getElementById('form-pdf').value = '';
  3059. const existingPdfContainer = document.getElementById('form-existing-pdf-container');
  3060. const existingPdfLink = document.getElementById('form-existing-pdf-link');
  3061. if (row.file_path) {
  3062. existingPdfContainer.style.display = 'block';
  3063. let pdfUrl = row.file_path;
  3064. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  3065. pdfUrl = contextPath + pdfUrl.substring(1);
  3066. } else {
  3067. pdfUrl = contextPath + pdfUrl;
  3068. }
  3069. existingPdfLink.href = pdfUrl;
  3070. } else {
  3071. existingPdfContainer.style.display = 'none';
  3072. }
  3074. // Populate/Reset Screenshot elements
  3075. document.getElementById('form-screenshot').value = '';
  3076. const existingScreenshotContainer = document.getElementById('form-existing-screenshot-container');
  3077. const existingScreenshotLink = document.getElementById('form-existing-screenshot-link');
  3078. if (row.mail_screenshot_path) {
  3079. existingScreenshotContainer.style.display = 'block';
  3080. let imgUrl = row.mail_screenshot_path;
  3081. if (contextPath && contextPath.endsWith('/') && imgUrl.startsWith('/')) {
  3082. imgUrl = contextPath + imgUrl.substring(1);
  3083. } else {
  3084. imgUrl = contextPath + imgUrl;
  3085. }
  3086. existingScreenshotLink.href = imgUrl;
  3087. } else {
  3088. existingScreenshotContainer.style.display = 'none';
  3089. }
  3091. recordModalObj.show();
  3092. }
  3094. // SAVE Record API call
  3095. async function saveRecord(event) {
  3096. event.preventDefault();
  3097. showLoader(true, 'Saving record details...');
  3099. const id = document.getElementById('form-id').value;
  3100. const received_date = document.getElementById('form-received-date').value;
  3101. const type = document.getElementById('form-type').value;
  3102. const subject = document.getElementById('form-subject').value;
  3103. const amount = document.getElementById('form-amount').value;
  3104. const invoice_no = document.getElementById('form-invoice-no').value;
  3105. const receiptno = document.getElementById('form-receiptno').value;
  3106. const invoice_date = document.getElementById('form-invoice-date').value;
  3107. const physical_file_no = document.getElementById('form-physical-file-no').value;
  3108. const tatEl = document.getElementById('form-tat');
  3109. const tat = tatEl ? tatEl.value : '';
  3110. const status = document.getElementById('form-status').value;
  3111. // Preserve original values if they were loaded in edit mode
  3112. let originalRecord = null;
  3113. if (id) {
  3114. originalRecord = allRecords.find(r => String(r.id) === String(id));
  3115. }
  3116. const followupEl = document.getElementById('form-followup');
  3117. const followup = followupEl ? followupEl.value : (originalRecord ? originalRecord.followup : '');
  3118. const myfollowupEl = document.getElementById('form-myfollowup');
  3119. const myfollowup = myfollowupEl ? myfollowupEl.value : (originalRecord ? originalRecord.myfollowup : '');
  3120. const orderbyEl = document.getElementById('form-orderby');
  3121. const order_by = orderbyEl ? orderbyEl.value : (originalRecord ? originalRecord.order_by : '');
  3122. const remarks = document.getElementById('form-remarks').value;
  3123. const payment_review = document.getElementById('form-payment-review').value;
  3125. // Resolve vendor
  3126. const vendorSelect = document.getElementById('form-vendor-select').value;
  3127. const vendorName = vendorSelect === '__custom__' ? document.getElementById('form-vendor-custom').value : vendorSelect;
  3129. if (!vendorName) {
  3130. alert('Please select or specify a vendor.');
  3131. showLoader(false);
  3132. return;
  3133. }
  3135. // Upload PDF if selected
  3136. let filePath = originalRecord ? originalRecord.file_path : null;
  3137. const pdfInput = document.getElementById('form-pdf');
  3138. if (pdfInput && pdfInput.files && pdfInput.files.length > 0) {
  3139. showLoader(true, 'Uploading PDF document...');
  3140. const formData = new FormData();
  3141. formData.append('file', pdfInput.files[0]);
  3143. const csrfHeaders = getCsrfHeaders();
  3144. try {
  3145. const uploadResponse = await fetch(contextPath + 'gccservicepaymenttracker/api/upload-pdf', {
  3146. method: 'POST',
  3147. headers: {
  3148. ...csrfHeaders
  3149. },
  3150. body: formData
  3151. });
  3152. const uploadResult = await uploadResponse.json();
  3153. if (uploadResult.success) {
  3154. filePath = uploadResult.filePath;
  3155. } else {
  3156. alert(uploadResult.error || 'Failed to upload PDF file.');
  3157. showLoader(false);
  3158. return;
  3159. }
  3160. } catch (err) {
  3161. console.error("Upload error:", err);
  3162. alert("Failed to upload PDF due to connection error.");
  3163. showLoader(false);
  3164. return;
  3165. }
  3166. }
  3168. // Upload Screenshot if selected
  3169. let screenshotPath = originalRecord ? originalRecord.mail_screenshot_path : null;
  3170. const screenshotInput = document.getElementById('form-screenshot');
  3171. if (screenshotInput && screenshotInput.files && screenshotInput.files.length > 0) {
  3172. showLoader(true, 'Uploading Screenshot...');
  3173. const formData = new FormData();
  3174. formData.append('file', screenshotInput.files[0]);
  3176. const csrfHeaders = getCsrfHeaders();
  3177. try {
  3178. const uploadResponse = await fetch(contextPath + 'gccservicepaymenttracker/api/upload-screenshot', {
  3179. method: 'POST',
  3180. headers: {
  3181. ...csrfHeaders
  3182. },
  3183. body: formData
  3184. });
  3185. const uploadResult = await uploadResponse.json();
  3186. if (uploadResult.success) {
  3187. screenshotPath = uploadResult.filePath;
  3188. } else {
  3189. alert(uploadResult.error || 'Failed to upload Screenshot.');
  3190. showLoader(false);
  3191. return;
  3192. }
  3193. } catch (err) {
  3194. console.error("Upload error:", err);
  3195. alert("Failed to upload Screenshot due to connection error.");
  3196. showLoader(false);
  3197. return;
  3198. }
  3199. }
  3201. const payload = {
  3202. id, received_date, type, vendor_name: vendorName, subject, amount, invoice_no,
  3203. receiptno, invoice_date, physical_file_no, tat, status, followup,
  3204. myfollowup, order_by, remarks, payment_review, file_path: filePath,
  3205. mail_screenshot_path: screenshotPath
  3206. };
  3208. const csrfHeaders = getCsrfHeaders();
  3209. const headers = {
  3210. 'Content-Type': 'application/json',
  3211. ...csrfHeaders
  3212. };
  3214. try {
  3215. showLoader(true, 'Saving record details...');
  3216. const response = await fetch(contextPath + 'gccservicepaymenttracker/api/save', {
  3217. method: 'POST',
  3218. headers: headers,
  3219. body: JSON.stringify(payload)
  3220. });
  3221. const data = await response.json();
  3222. if (data.success) {
  3223. recordModalObj.hide();
  3224. loadCounts();
  3225. loadList();
  3226. } else {
  3227. alert(data.error || 'Failed to save record.');
  3228. showLoader(false);
  3229. }
  3230. } catch (err) {
  3231. console.error("Save Error:", err);
  3232. alert("Failed to save record due to connection error.");
  3233. showLoader(false);
  3234. }
  3235. }
  3237. // Calculate age of bill (days) dynamically from received date
  3238. function calculateAgeOfBill(receivedDateStr) {
  3239. if (!receivedDateStr) return '0';
  3240. try {
  3241. const recDate = new Date(receivedDateStr);
  3242. if (isNaN(recDate.getTime())) return '0';
  3243. recDate.setHours(0, 0, 0, 0);
  3245. const today = new Date();
  3246. today.setHours(0, 0, 0, 0);
  3248. const graceDate = new Date(recDate);
  3249. graceDate.setDate(graceDate.getDate());
  3251. if (today <= graceDate) {
  3252. return '0';
  3253. } else {
  3254. const diffTime = today.getTime() - graceDate.getTime();
  3255. const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
  3256. return String(diffDays);
  3257. }
  3258. } catch (e) {
  3259. console.error("Error calculating age of bill:", e);
  3260. return '0';
  3261. }
  3262. }
  3264. function updateAsOnDateDisplay() {
  3265. const now = new Date();
  3266. const dd = String(now.getDate()).padStart(2, '0');
  3267. const mm = String(now.getMonth() + 1).padStart(2, '0');
  3268. const yyyy = now.getFullYear();
  3269. const monthNames = ["January", "February", "March", "April", "May", "June",
  3270. "July", "August", "September", "October", "November", "December"];
  3271. const monthName = monthNames[now.getMonth()];
  3273. const formatted = `${dd}/${mm}/${yyyy} (${monthName} ${yyyy})`;
  3274. const el = document.getElementById('as-on-date-val');
  3275. if (el) el.textContent = formatted;
  3276. }
  3278. // --- NEW METRICS & INTERACTIVE CLICK FILTER LOGIC ---
  3279. function calculateSummaries() {
  3280. let rawTotal = allRecords.length;
  3282. // Dynamic Status Counts Map
  3283. const statusCounts = {};
  3284. activeStatus.forEach(s => {
  3285. statusCounts[s.id] = 0;
  3286. });
  3288. let age_1_15 = 0;
  3289. let age_16_30 = 0;
  3290. let age_31_60 = 0;
  3291. let age_61_90 = 0;
  3292. let age_91_120 = 0;
  3293. let age_over_120 = 0;
  3295. const vendorMap = {};
  3296. let allCompletedCount = 0;
  3297. let totalItCell = 0;
  3298. let totalOthers = 0;
  3300. allRecords.forEach(row => {
  3301. const statusName = String(row.resolved_status || getStatusName(row.status) || '').trim();
  3302. const statusVal = String(row.status || '').trim();
  3304. // Find matching status in activeStatus (either by ID or legacy name)
  3305. const matchedStatus = activeStatus.find(s =>
  3306. String(s.id) === statusVal ||
  3307. s.status_name.toLowerCase().trim() === statusName.toLowerCase().trim()
  3308. );
  3309. const statusId = matchedStatus ? matchedStatus.id : null;
  3310. const isCompleted = matchedStatus && getStatusKey(matchedStatus.status_name) === 'completed';
  3312. const age = parseInt(calculateAgeOfBill(row.received_date), 10);
  3313. const vendorName = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  3315. if (isCompleted) {
  3316. allCompletedCount++;
  3317. if (statusId !== null) {
  3318. statusCounts[statusId] = (statusCounts[statusId] || 0) + 1;
  3319. }
  3320. } else {
  3321. if (statusId !== null) {
  3322. statusCounts[statusId] = (statusCounts[statusId] || 0) + 1;
  3323. }
  3325. if (age >= 1 && age <= 15) age_1_15++;
  3326. else if (age >= 16 && age <= 30) age_16_30++;
  3327. else if (age >= 31 && age <= 60) age_31_60++;
  3328. else if (age >= 61 && age <= 90) age_61_90++;
  3329. else if (age >= 91 && age <= 120) age_91_120++;
  3330. else if (age > 120) age_over_120++;
  3331. }
  3333. if (!vendorMap[vendorName]) {
  3334. vendorMap[vendorName] = {
  3335. vendorName: vendorName,
  3336. total: 0,
  3337. statusCounts: {}, // Map status ID to count
  3338. itCellCount: 0,
  3339. othersCount: 0,
  3340. age_1_15: 0,
  3341. age_16_30: 0,
  3342. age_31_60: 0,
  3343. age_61_90: 0,
  3344. age_91_120: 0,
  3345. age_over_120: 0,
  3346. comp_age_1_15: 0,
  3347. comp_age_16_30: 0,
  3348. comp_age_31_60: 0,
  3349. comp_age_61_90: 0,
  3350. comp_age_91_120: 0,
  3351. comp_age_over_120: 0
  3352. };
  3353. activeStatus.forEach(s => {
  3354. vendorMap[vendorName].statusCounts[s.id] = 0;
  3355. });
  3356. }
  3358. const vData = vendorMap[vendorName];
  3359. vData.total++;
  3360. if (statusId !== null) {
  3361. vData.statusCounts[statusId] = (vData.statusCounts[statusId] || 0) + 1;
  3362. }
  3364. if (isCompleted) {
  3365. if (age >= 1 && age <= 15) vData.comp_age_1_15++;
  3366. else if (age >= 16 && age <= 30) vData.comp_age_16_30++;
  3367. else if (age >= 31 && age <= 60) vData.comp_age_31_60++;
  3368. else if (age >= 61 && age <= 90) vData.comp_age_61_90++;
  3369. else if (age >= 91 && age <= 120) vData.comp_age_91_120++;
  3370. else if (age > 120) vData.comp_age_over_120++;
  3371. } else {
  3372. const group = getStatusGroup(statusName);
  3373. if (group === 'it_cell') {
  3374. totalItCell++;
  3375. vData.itCellCount++;
  3376. } else {
  3377. totalOthers++;
  3378. vData.othersCount++;
  3379. }
  3381. if (age >= 1 && age <= 15) vData.age_1_15++;
  3382. else if (age >= 16 && age <= 30) vData.age_16_30++;
  3383. else if (age >= 31 && age <= 60) vData.age_31_60++;
  3384. else if (age >= 61 && age <= 90) vData.age_61_90++;
  3385. else if (age >= 91 && age <= 120) vData.age_91_120++;
  3386. else if (age > 120) vData.age_over_120++;
  3387. }
  3388. });
  3390. let total = rawTotal;
  3391. let completedTotal = allCompletedCount;
  3392. let pendingTotal = total - completedTotal;
  3394. // Set top dashboard cards counts dynamically
  3395. const cardTotalEl = document.getElementById('count-total');
  3396. if (cardTotalEl) cardTotalEl.textContent = total;
  3397. const cardCompletedEl = document.getElementById('count-completed');
  3398. if (cardCompletedEl) cardCompletedEl.textContent = completedTotal;
  3399. const cardPendingEl = document.getElementById('count-pending');
  3400. if (cardPendingEl) cardPendingEl.textContent = pendingTotal;
  3401. const cardPendingItCellEl = document.getElementById('count-pending-itcell');
  3402. if (cardPendingItCellEl) cardPendingItCellEl.textContent = totalItCell;
  3403. const cardPendingOthersEl = document.getElementById('count-pending-others');
  3404. if (cardPendingOthersEl) cardPendingOthersEl.textContent = totalOthers;
  3406. let summaryBodyHtml = `
  3407. <td id="summary-total" class="cursor-pointer text-primary" style="background-color: #f8fafc;" onclick="openModalForCount('total', null, 'Total No of Bills')">${total}</td>
  3408. <td id="summary-completed" class="cursor-pointer text-success-dark" onclick="openModalForCount('completed_custom', null, 'Completed Bills')">${completedTotal}</td>
  3409. <td id="summary-pending" class="cursor-pointer text-danger-dark" onclick="openModalForCount('pending_custom', null, 'Pending Bills')">${pendingTotal}</td>
  3410. `;
  3411. summaryBodyHtml += `
  3412. <td id="summary-1-15" class="cursor-pointer" onclick="openModalForCount('age', [1, 15], 'Age: 1 to 15 Days')">${age_1_15}</td>
  3413. <td id="summary-16-30" class="cursor-pointer" onclick="openModalForCount('age', [16, 30], 'Age: 16 to 30 Days')">${age_16_30}</td>
  3414. <td id="summary-31-60" class="cursor-pointer" onclick="openModalForCount('age', [31, 60], 'Age: 31 to 60 Days')">${age_31_60}</td>
  3415. <td id="summary-61-90" class="cursor-pointer" onclick="openModalForCount('age', [61, 90], 'Age: 61 to 90 Days')">${age_61_90}</td>
  3416. <td id="summary-91-120" class="cursor-pointer" onclick="openModalForCount('age', [91, 120], 'Age: 91 to 120 Days')">${age_91_120}</td>
  3417. <td id="summary-over-120" class="cursor-pointer text-danger" onclick="openModalForCount('age', [121, null], 'Age: Over 120 Days')">${age_over_120}</td>
  3418. `;
  3419. const summaryBbody = document.getElementById('summary-tbody-tr');
  3420. if (summaryBbody) {
  3421. summaryBbody.innerHTML = summaryBodyHtml;
  3422. }
  3424. // Render status pie chart dynamically
  3425. const chartLabels = activeStatus.map(s => s.status_name);
  3426. const chartData = activeStatus.map(s => statusCounts[s.id] || 0);
  3427. const chartColors = activeStatus.map(s => {
  3428. const key = getStatusKey(s.status_name);
  3429. if (key === 'completed') return '#2ecc71';
  3430. if (key === 'awaiting details') return '#f1c40f';
  3431. if (key === 'pending with dept') return '#3498db';
  3432. if (key === 'pending') return '#e74c3c';
  3433. if (key === 'no action') return '#95a5a6';
  3434. return '#7f8c8d'; // Fallback
  3435. });
  3436. renderStatusChart(chartLabels, chartData, chartColors);
  3438. vendorBreakdownData = Object.values(vendorMap).sort((a, b) => b.total - a.total);
  3439. renderVendorBreakdown();
  3440. }
  3442. function renderStatusChart(labels, data, colors) {
  3443. const ctx = document.getElementById('statusPieChart')?.getContext('2d');
  3444. if (!ctx) return;
  3446. if (statusChartInstance) {
  3447. statusChartInstance.destroy();
  3448. }
  3450. const totalSum = data.reduce((a, b) => a + b, 0);
  3452. statusChartInstance = new Chart(ctx, {
  3453. type: 'pie',
  3454. data: {
  3455. labels: labels,
  3456. datasets: [{
  3457. data: data,
  3458. backgroundColor: colors,
  3459. borderWidth: 1,
  3460. borderColor: '#ffffff'
  3461. }]
  3462. },
  3463. options: {
  3464. responsive: true,
  3465. maintainAspectRatio: false,
  3466. plugins: {
  3467. legend: {
  3468. position: 'right',
  3469. labels: {
  3470. boxWidth: 12,
  3471. font: {
  3472. size: 10,
  3473. family: 'Poppins'
  3474. },
  3475. generateLabels: function (chart) {
  3476. const data = chart.data;
  3477. if (data.labels.length && data.datasets.length) {
  3478. return data.labels.map((label, i) => {
  3479. const value = data.datasets[0].data[i];
  3480. const percentage = totalSum > 0 ? ((value / totalSum) * 100).toFixed(1) : 0;
  3481. const color = data.datasets[0].backgroundColor[i];
  3482. return {
  3483. text: `${label}: ${value} (${percentage}%)`,
  3484. fillStyle: color,
  3485. strokeStyle: color,
  3486. lineWidth: 0,
  3487. hidden: isNaN(data.datasets[0].data[i]) || chart.getDatasetMeta(0).data[i].hidden,
  3488. index: i
  3489. };
  3490. });
  3491. }
  3492. return [];
  3493. }
  3494. }
  3495. },
  3496. tooltip: {
  3497. callbacks: {
  3498. label: function (context) {
  3499. const label = context.label || '';
  3500. const value = context.raw || 0;
  3501. const percentage = totalSum > 0 ? ((value / totalSum) * 100).toFixed(1) : 0;
  3502. return ` ${label}: ${value} (${percentage}%)`;
  3503. }
  3504. }
  3505. }
  3506. },
  3507. onClick: (event, activeElements) => {
  3508. if (activeElements && activeElements.length > 0) {
  3509. const index = activeElements[0].index;
  3510. const statusName = labels[index];
  3511. const statusObj = activeStatus.find(s => s.status_name === statusName);
  3512. if (statusObj) {
  3513. openModalForCount('status', statusObj.id, 'Status: ' + statusObj.status_name);
  3514. }
  3515. }
  3516. }
  3517. }
  3518. });
  3519. }
  3521. function renderVendorBreakdown() {
  3522. const tbody = document.getElementById('vendor-breakdown-tbody');
  3523. if (!tbody) return;
  3524. tbody.innerHTML = '';
  3526. const searchVal = document.getElementById('vendor-breakdown-search')?.value || '';
  3527. const query = searchVal.toLowerCase().trim();
  3529. const filtered = vendorBreakdownData.filter(v => v.vendorName.toLowerCase().includes(query));
  3531. const completedStatuses = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed');
  3532. const nonCompletedStatuses = activeStatus.filter(s => getStatusKey(s.status_name) !== 'completed');
  3533. const subDNone = showPendingSubBreakdown ? '' : 'd-none';
  3535. if (filtered.length === 0) {
  3536. const colSpan = 2 + completedStatuses.length + 1 + (showPendingSubBreakdown ? (2 + nonCompletedStatuses.length) : 0) + 6;
  3537. tbody.innerHTML = `<tr><td colspan="${colSpan}" class="text-secondary py-3">No matching vendors found</td></tr>`;
  3538. return;
  3539. }
  3541. // Keep track of column sums
  3542. let sumTotal = 0;
  3543. const sumStatuses = {};
  3544. activeStatus.forEach(s => {
  3545. sumStatuses[s.id] = 0;
  3546. });
  3547. let sumItCell = 0;
  3548. let sumOthers = 0;
  3549. let sumAge1_15 = 0;
  3550. let sumAge16_30 = 0;
  3551. let sumAge31_60 = 0;
  3552. let sumAge61_90 = 0;
  3553. let sumAge91_120 = 0;
  3554. let sumAgeOver120 = 0;
  3556. filtered.forEach(v => {
  3557. sumTotal += v.total;
  3558. activeStatus.forEach(s => {
  3559. sumStatuses[s.id] += (v.statusCounts[s.id] || 0);
  3560. });
  3561. sumItCell += (v.itCellCount || 0);
  3562. sumOthers += (v.othersCount || 0);
  3563. sumAge1_15 += v.age_1_15;
  3564. sumAge16_30 += v.age_16_30;
  3565. sumAge31_60 += v.age_31_60;
  3566. sumAge61_90 += v.age_61_90;
  3567. sumAge91_120 += v.age_91_120;
  3568. sumAgeOver120 += v.age_over_120;
  3570. const tr = document.createElement('tr');
  3572. // Construct HTML row dynamically
  3573. let trHtml = `
  3574. <td class="fw-semibold text-start text-dark" style="max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${escapeHtml(v.vendorName)}</td>
  3575. <td class="cursor-pointer text-primary fw-bold" onclick="openModalForCount('vendor_total', null, 'Vendor: ' + this.getAttribute('data-vendor'), this.getAttribute('data-vendor'))" data-vendor="${escapeHtml(v.vendorName)}">${v.total}</td>
  3576. `;
  3578. // 1. Completed statuses
  3579. let totalCompleted = 0;
  3580. completedStatuses.forEach(s => {
  3581. const count = v.statusCounts[s.id] || 0;
  3582. totalCompleted += count;
  3583. const style = getStatusStyle(s.status_name);
  3584. trHtml += `<td class="cursor-pointer ${style.badgeClass}" onclick="openModalForCount('vendor_status', '${s.id}', 'Vendor: ' + this.getAttribute('data-vendor') + ' (${escapeHtml(s.status_name)})', this.getAttribute('data-vendor'), '${s.id}')" data-vendor="${escapeHtml(v.vendorName)}">${count}</td>`;
  3585. });
  3587. // 2. Custom "Pending" column
  3588. const pendingCount = v.total - totalCompleted;
  3589. trHtml += `<td class="cursor-pointer text-danger-dark fw-bold" onclick="openModalForCount('vendor_pending_custom', null, 'Vendor: ' + this.getAttribute('data-vendor') + ' (Pending)', this.getAttribute('data-vendor'))" data-vendor="${escapeHtml(v.vendorName)}">${pendingCount}</td>`;
  3591. // 3. Sub-breakdown: Pending with IT Cell & Pending with Others
  3592. trHtml += `
  3593. <td class="cursor-pointer pending-sub-col ${subDNone} text-primary fw-semibold" onclick="openModalForCount('vendor_it_cell', null, 'Vendor: ' + this.getAttribute('data-vendor') + ' (Pending with IT Cell)', this.getAttribute('data-vendor'))" data-vendor="${escapeHtml(v.vendorName)}">${v.itCellCount || 0}</td>
  3594. <td class="cursor-pointer pending-sub-col ${subDNone} text-warning-dark fw-semibold" onclick="openModalForCount('vendor_others', null, 'Vendor: ' + this.getAttribute('data-vendor') + ' (Pending with Others)', this.getAttribute('data-vendor'))" data-vendor="${escapeHtml(v.vendorName)}">${v.othersCount || 0}</td>
  3595. `;
  3597. // 4. Days-wise columns (ALWAYS VISIBLE)
  3598. trHtml += `
  3599. <td class="cursor-pointer age-col" onclick="openModalForCount('vendor_age', [1, 15], 'Vendor: ' + this.getAttribute('data-vendor') + ' (1-15 Days)', this.getAttribute('data-vendor'), 'age_1_15')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_1_15}</td>
  3600. <td class="cursor-pointer age-col" onclick="openModalForCount('vendor_age', [16, 30], 'Vendor: ' + this.getAttribute('data-vendor') + ' (16-30 Days)', this.getAttribute('data-vendor'), 'age_16_30')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_16_30}</td>
  3601. <td class="cursor-pointer age-col" onclick="openModalForCount('vendor_age', [31, 60], 'Vendor: ' + this.getAttribute('data-vendor') + ' (31-60 Days)', this.getAttribute('data-vendor'), 'age_31_60')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_31_60}</td>
  3602. <td class="cursor-pointer age-col" onclick="openModalForCount('vendor_age', [61, 90], 'Vendor: ' + this.getAttribute('data-vendor') + ' (61-90 Days)', this.getAttribute('data-vendor'), 'age_61_90')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_61_90}</td>
  3603. <td class="cursor-pointer age-col" onclick="openModalForCount('vendor_age', [91, 120], 'Vendor: ' + this.getAttribute('data-vendor') + ' (91-120 Days)', this.getAttribute('data-vendor'), 'age_91_120')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_91_120}</td>
  3604. <td class="cursor-pointer text-danger age-col" onclick="openModalForCount('vendor_age', [121, null], 'Vendor: ' + this.getAttribute('data-vendor') + ' (Over 120 Days)', this.getAttribute('data-vendor'), 'age_over_120')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_over_120}</td>
  3605. `;
  3607. tr.innerHTML = trHtml;
  3608. tbody.appendChild(tr);
  3609. });
  3611. // Append TOTAL row at the bottom
  3612. const totalTr = document.createElement('tr');
  3613. totalTr.className = 'table-warning fw-bold text-dark';
  3614. totalTr.style.borderTop = '2px solid #cbd5e1';
  3616. let totalTrHtml = `
  3617. <td class="text-start">TOTAL</td>
  3618. <td class="cursor-pointer text-primary fw-bold" onclick="openModalForCount('total', null, 'Total No of Bills')">${sumTotal}</td>
  3619. `;
  3621. // 1. Completed statuses
  3622. let sumCompleted = 0;
  3623. completedStatuses.forEach(s => {
  3624. const style = getStatusStyle(s.status_name);
  3625. sumCompleted += sumStatuses[s.id];
  3626. totalTrHtml += `<td class="cursor-pointer ${style.badgeClass}" onclick="openModalForCount('status', '${s.id}', 'Status: ' + this.getAttribute('data-status-name'))" data-status-name="${escapeHtml(s.status_name)}">${sumStatuses[s.id]}</td>`;
  3627. });
  3629. // 2. Custom "Pending" column
  3630. const sumPending = sumTotal - sumCompleted;
  3631. totalTrHtml += `<td class="cursor-pointer text-danger-dark fw-bold" onclick="openModalForCount('pending_custom', null, 'Pending Bills')">${sumPending}</td>`;
  3633. // 3. Sub-breakdown: Pending with IT Cell & Pending with Others
  3634. totalTrHtml += `
  3635. <td class="cursor-pointer pending-sub-col ${subDNone} text-primary fw-bold" onclick="openModalForCount('it_cell_custom', null, 'Pending with IT Cell')">${sumItCell}</td>
  3636. <td class="cursor-pointer pending-sub-col ${subDNone} text-warning-dark fw-bold" onclick="openModalForCount('others_custom', null, 'Pending with Others')">${sumOthers}</td>
  3637. `;
  3639. // 4. Days-wise columns (ALWAYS VISIBLE)
  3640. totalTrHtml += `
  3641. <td class="cursor-pointer age-col" onclick="openModalForCount('age', [1, 15], 'Age: 1-15 Days')">${sumAge1_15}</td>
  3642. <td class="cursor-pointer age-col" onclick="openModalForCount('age', [16, 30], 'Age: 16-30 Days')">${sumAge16_30}</td>
  3643. <td class="cursor-pointer age-col" onclick="openModalForCount('age', [31, 60], 'Age: 31-60 Days')">${sumAge31_60}</td>
  3644. <td class="cursor-pointer age-col" onclick="openModalForCount('age', [61, 90], 'Age: 61-90 Days')">${sumAge61_90}</td>
  3645. <td class="cursor-pointer age-col" onclick="openModalForCount('age', [91, 120], 'Age: 91-120 Days')">${sumAge91_120}</td>
  3646. <td class="cursor-pointer text-danger age-col" onclick="openModalForCount('age', [121, null], 'Age: Over 120 Days')">${sumAgeOver120}</td>
  3647. `;
  3648. totalTr.innerHTML = totalTrHtml;
  3649. tbody.appendChild(totalTr);
  3650. }
  3652. function filterVendorBreakdown(val) {
  3653. renderVendorBreakdown();
  3654. }
  3656. function setClickFilter(type, value, displayName, vendorName = null, col = null) {
  3657. activeClickFilter = { type, value, displayName, vendorName, col };
  3659. const badge = document.getElementById('click-filter-badge');
  3660. if (badge) {
  3661. badge.innerHTML = `Filter: ${displayName} <i class="fa-solid fa-circle-xmark ms-1 cursor-pointer" onclick="clearClickFilter(event)"></i>`;
  3662. badge.style.display = 'inline-block';
  3663. badge.style.cursor = 'pointer';
  3664. }
  3666. currentPage = 1;
  3667. renderTable();
  3669. // Smoothly scroll down to the table card
  3670. document.querySelector('.table-card')?.scrollIntoView({ behavior: 'smooth' });
  3671. }
  3673. function clearClickFilter(event) {
  3674. if (event) event.stopPropagation();
  3675. activeClickFilter = null;
  3676. const badge = document.getElementById('click-filter-badge');
  3677. if (badge) {
  3678. badge.style.display = 'none';
  3679. }
  3680. currentPage = 1;
  3681. renderTable();
  3682. }
  3684. // --- COUNT DETAILS MODAL LOGIC ---
  3685. let modalClickFilter = null; // Stores { clickType, clickValue, displayName, vendorName, col }
  3686. let countDetailsModalObj = null;
  3687. let activeModalQuickType = 'all';
  3688. let activeModalQuickStatus = 'all';
  3690. function openModalForCount(clickType, clickValue, displayName, vendorName = null, col = null) {
  3691. /*
  3692. // ================= OLD IN-PAGE MODAL CODE (COMMENTED OUT FOR REFERENCE) =================
  3693. modalClickFilter = { clickType, clickValue, displayName, vendorName, col };
  3695. if (clickType === 'category' && clickValue) {
  3696. activeModalQuickType = clickValue;
  3697. } else {
  3698. activeModalQuickType = 'all';
  3699. }
  3701. if (clickType === 'status' && clickValue) {
  3702. activeModalQuickStatus = String(clickValue);
  3703. } else if (clickType === 'vendor_status' && col) {
  3704. activeModalQuickStatus = String(col);
  3705. } else {
  3706. activeModalQuickStatus = 'all';
  3707. }
  3709. // Set modal title
  3710. document.getElementById('countDetailsModalLabel').innerHTML = `<i class="fa-solid fa-list-check me-2"></i>Count Details: ${escapeHtml(displayName)}`;
  3712. // Initialize modal dropdown options
  3713. populateModalDropdowns();
  3715. // Set default selected values in modal dropdowns based on click filters
  3716. const modalTypeSelect = document.getElementById('modal-filter-type');
  3717. const modalStatusSelect = document.getElementById('modal-filter-status');
  3718. const modalVendorSelect = document.getElementById('modal-filter-vendor');
  3720. // Reset to default
  3721. modalTypeSelect.value = 'all';
  3722. modalStatusSelect.value = 'all';
  3723. modalVendorSelect.value = 'all';
  3724. const modalSearchInput = document.getElementById('modal-table-search');
  3725. if (modalSearchInput) modalSearchInput.value = '';
  3727. // If click was category/type-based
  3728. if (clickType === 'category' && clickValue) {
  3729. modalTypeSelect.value = clickValue;
  3730. }
  3732. // If click was status-based
  3733. if (clickType === 'status' && clickValue) {
  3734. modalStatusSelect.value = clickValue;
  3735. } else if (clickType === 'vendor_status' && col) {
  3736. modalStatusSelect.value = col;
  3737. }
  3739. // If click was vendor-based
  3740. if (vendorName) {
  3741. for (let opt of modalVendorSelect.options) {
  3742. if (opt.textContent.trim().toLowerCase() === vendorName.trim().toLowerCase() || opt.value === vendorName) {
  3743. modalVendorSelect.value = opt.value;
  3744. break;
  3745. }
  3746. }
  3747. }
  3749. // Render the modal table
  3750. applyModalFilters();
  3752. // Show modal
  3753. if (!countDetailsModalObj) {
  3754. countDetailsModalObj = new bootstrap.Modal(document.getElementById('countDetailsModal'));
  3755. }
  3756. countDetailsModalObj.show();
  3757. // =======================================================================================
  3758. */
  3760. // NEW: Open Details View in New Browser Tab
  3761. const params = new URLSearchParams();
  3762. if (clickType) params.append('clickType', clickType);
  3763. if (clickValue) params.append('clickValue', Array.isArray(clickValue) ? clickValue.join(',') : clickValue);
  3764. if (displayName) params.append('title', displayName);
  3765. if (vendorName) params.append('vendor', vendorName);
  3766. if (col) params.append('col', col);
  3768. const cvModeSelect = document.getElementById('completed-view-mode');
  3769. if (cvModeSelect) {
  3770. params.append('completedViewMode', cvModeSelect.value);
  3771. }
  3773. window.location.href = contextPath + 'gccservicepaymenttracker/details?' + params.toString();
  3774. }
  3776. function populateModalDropdowns() {
  3777. const modalTypeSelect = document.getElementById('modal-filter-type');
  3778. const modalStatusSelect = document.getElementById('modal-filter-status');
  3779. const modalVendorSelect = document.getElementById('modal-filter-vendor');
  3781. if (modalTypeSelect) {
  3782. modalTypeSelect.innerHTML = '<option value="all">- All Types -</option>';
  3783. activeTypes.forEach(t => {
  3784. const opt = document.createElement('option');
  3785. opt.value = getCategoryCode(t.type_name);
  3786. opt.textContent = t.type_name;
  3787. modalTypeSelect.appendChild(opt);
  3788. });
  3789. }
  3791. if (modalStatusSelect) {
  3792. modalStatusSelect.innerHTML = '<option value="all">- All Statuses -</option>';
  3793. activeStatus.forEach(s => {
  3794. const opt = document.createElement('option');
  3795. opt.value = s.id;
  3796. opt.textContent = s.status_name;
  3797. modalStatusSelect.appendChild(opt);
  3798. });
  3799. }
  3801. if (modalVendorSelect) {
  3802. modalVendorSelect.innerHTML = '<option value="all">- All Vendors -</option>';
  3803. activeVendors.forEach(v => {
  3804. const opt = document.createElement('option');
  3805. opt.value = String(v.vendor_name).trim(); // Match by vendor_name text
  3806. opt.textContent = v.vendor_name;
  3807. modalVendorSelect.appendChild(opt);
  3808. });
  3809. }
  3810. }
  3812. function updateModalQuickFilters(clickFilteredRecords) {
  3813. const container = document.getElementById('modal-type-badges');
  3814. if (!container) return;
  3816. const colorMapping = {
  3817. 'all': { color: '#0f5c78', bgLight: '#f0f9ff', textLight: '#e0f2fe' },
  3818. 'tax invoice': { color: '#166534', bgLight: '#f0fdf4', textLight: '#dcfce7' },
  3819. 'sd': { color: '#1e40af', bgLight: '#eff6ff', textLight: '#dbeafe' },
  3820. 'emd': { color: '#6b21a8', bgLight: '#faf5ff', textLight: '#f3e8ff' },
  3821. 'asd': { color: '#9a3412', bgLight: '#fff7ed', textLight: '#ffedd5' },
  3822. 'agreement': { color: '#9d174d', bgLight: '#fdf2f8', textLight: '#fce7f3' },
  3823. 'bank guarantee': { color: '#0369a1', bgLight: '#f0f9ff', textLight: '#e0f2fe' },
  3824. 'delivery chellan': { color: '#4f46e5', bgLight: '#e0e7ff', textLight: '#c7d2fe' }
  3825. };
  3827. const getStylesForType = (key) => {
  3828. if (colorMapping[key]) return colorMapping[key];
  3829. let hash = 0;
  3830. for (let i = 0; i < key.length; i++) {
  3831. hash = key.charCodeAt(i) + ((hash << 5) - hash);
  3832. }
  3833. const h = Math.abs(hash) % 360;
  3834. return {
  3835. color: `hsl(${h}, 70%, 25%)`,
  3836. bgLight: `hsl(${h}, 70%, 97%)`,
  3837. textLight: `hsl(${h}, 70%, 90%)`
  3838. };
  3839. };
  3841. const quickTypes = [
  3842. { key: 'all', label: 'All Bills', color: '#0f5c78', bgLight: '#f0f9ff', textLight: '#e0f2fe' }
  3843. ];
  3845. activeTypes.forEach(t => {
  3846. const key = getCategoryCode(t.type_name);
  3847. if (!quickTypes.some(qt => qt.key === key)) {
  3848. const styles = getStylesForType(key);
  3849. quickTypes.push({
  3850. key: key,
  3851. label: t.type_name,
  3852. color: styles.color,
  3853. bgLight: styles.bgLight,
  3854. textLight: styles.textLight
  3855. });
  3856. }
  3857. });
  3859. const counts = { all: clickFilteredRecords.length };
  3860. quickTypes.forEach(t => {
  3861. if (t.key !== 'all') counts[t.key] = 0;
  3862. });
  3864. clickFilteredRecords.forEach(row => {
  3865. const cat = getCategoryCode(row.resolved_type || row.type);
  3866. if (cat in counts) {
  3867. counts[cat]++;
  3868. } else {
  3869. const matchedType = activeTypes.find(t => String(t.id) === cat);
  3870. if (matchedType) {
  3871. const resolvedCat = getCategoryCode(matchedType.type_name);
  3872. if (resolvedCat in counts) counts[resolvedCat]++;
  3873. }
  3874. }
  3875. });
  3877. let html = '';
  3878. quickTypes.forEach(t => {
  3879. const count = counts[t.key] || 0;
  3880. const isActive = activeModalQuickType === t.key;
  3882. let badgeStyle, countStyle;
  3883. if (isActive) {
  3884. badgeStyle = `background-color: ${t.color}; color: white; border-color: ${t.color}; font-weight: 600; font-size: 0.95rem; padding: 8px 18px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);`;
  3885. countStyle = `background-color: ${t.textLight}; color: ${t.color}; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`;
  3886. } else {
  3887. badgeStyle = `background-color: white; color: #334155; border-color: #cbd5e1; font-weight: 500; font-size: 0.95rem; padding: 8px 18px;`;
  3888. countStyle = `background-color: ${t.bgLight}; color: ${t.color}; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`;
  3889. }
  3891. html += `
  3892. <span class="badge cursor-pointer border rounded-pill d-inline-flex align-items-center gap-2"
  3893. style="${badgeStyle} cursor: pointer; transition: all 0.2s;"
  3894. onclick="setModalQuickType('${t.key}')">
  3895. ${escapeHtml(t.label)}
  3896. <span style="${countStyle}">${count}</span>
  3897. </span>
  3898. `;
  3899. });
  3901. container.innerHTML = html;
  3902. }
  3904. function updateModalStatusBadges(typeFiltered) {
  3905. const container = document.getElementById('modal-status-badges');
  3906. if (!container) return;
  3908. // Calculate count for each status in typeFiltered
  3909. const counts = { all: typeFiltered.length };
  3910. typeFiltered.forEach(row => {
  3911. const statusVal = String(row.status || '').trim();
  3912. const statusName = String(row.resolved_status || getStatusName(row.status) || '').trim();
  3914. const matched = activeStatus.find(s =>
  3915. String(s.id) === statusVal ||
  3916. s.status_name.toLowerCase().trim() === statusName.toLowerCase().trim()
  3917. );
  3918. if (matched) {
  3919. counts[matched.id] = (counts[matched.id] || 0) + 1;
  3920. }
  3921. });
  3923. // Render status filter badges
  3924. let html = '';
  3926. // 'All Statuses' badge
  3927. const isAllActive = activeModalQuickStatus === 'all';
  3928. const allStyle = isAllActive
  3929. ? `background-color: #0f5c78; color: white; border-color: #0f5c78; font-weight: 600; font-size: 0.95rem; padding: 8px 18px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);`
  3930. : `background-color: white; color: #334155; border-color: #cbd5e1; font-weight: 500; font-size: 0.95rem; padding: 8px 18px;`;
  3931. const allCountStyle = isAllActive
  3932. ? `background-color: #e0f2fe; color: #0f5c78; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`
  3933. : `background-color: #f0f9ff; color: #0f5c78; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`;
  3935. html += `
  3936. <span class="badge cursor-pointer border rounded-pill d-inline-flex align-items-center gap-2"
  3937. style="${allStyle} cursor: pointer; transition: all 0.2s;"
  3938. onclick="setModalQuickStatus('all')">
  3939. All Statuses
  3940. <span style="${allCountStyle}">${counts.all}</span>
  3941. </span>
  3942. `;
  3944. activeStatus.forEach(s => {
  3945. const count = counts[s.id] || 0;
  3946. const isActive = activeModalQuickStatus === String(s.id);
  3948. const colorInfo = getStatusStyle(s.status_name);
  3949. const primaryColor = colorInfo.text || '#475569';
  3950. const bgLight = colorInfo.bg || '#f1f5f9';
  3952. let badgeStyle, countStyle;
  3953. if (isActive) {
  3954. badgeStyle = `background-color: ${primaryColor}; color: white; border-color: ${primaryColor}; font-weight: 600; font-size: 0.95rem; padding: 8px 18px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);`;
  3955. countStyle = `background-color: white; color: ${primaryColor}; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`;
  3956. } else {
  3957. badgeStyle = `background-color: white; color: #334155; border-color: #cbd5e1; font-weight: 500; font-size: 0.95rem; padding: 8px 18px;`;
  3958. countStyle = `background-color: ${bgLight}; color: ${primaryColor}; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`;
  3959. }
  3961. html += `
  3962. <span class="badge cursor-pointer border rounded-pill d-inline-flex align-items-center gap-2"
  3963. style="${badgeStyle} cursor: pointer; transition: all 0.2s;"
  3964. onclick="setModalQuickStatus('${s.id}')">
  3965. ${escapeHtml(s.status_name)}
  3966. <span style="${countStyle}">${count}</span>
  3967. </span>
  3968. `;
  3969. });
  3971. container.innerHTML = html;
  3972. }
  3974. function setModalQuickStatus(statusId) {
  3975. activeModalQuickStatus = statusId;
  3976. const modalStatusSelect = document.getElementById('modal-filter-status');
  3977. if (modalStatusSelect) modalStatusSelect.value = statusId;
  3979. if (statusId !== 'all') {
  3980. activeModalQuickType = 'all';
  3981. const modalTypeSelect = document.getElementById('modal-filter-type');
  3982. if (modalTypeSelect) modalTypeSelect.value = 'all';
  3983. }
  3984. applyModalFilters();
  3985. }
  3987. function setModalQuickType(key) {
  3988. activeModalQuickType = key;
  3989. const modalTypeSelect = document.getElementById('modal-filter-type');
  3990. if (modalTypeSelect) modalTypeSelect.value = key;
  3992. if (key !== 'all') {
  3993. activeModalQuickStatus = 'all';
  3994. const modalStatusSelect = document.getElementById('modal-filter-status');
  3995. if (modalStatusSelect) modalStatusSelect.value = 'all';
  3996. }
  3997. applyModalFilters();
  3998. }
  4000. function applyModalFilters() {
  4001. if (!modalClickFilter) return;
  4003. const selectedType = document.getElementById('modal-filter-type').value;
  4004. const selectedStatus = document.getElementById('modal-filter-status').value;
  4005. const selectedVendor = document.getElementById('modal-filter-vendor').value;
  4006. const searchVal = document.getElementById('modal-table-search')?.value || '';
  4007. const query = searchVal.toLowerCase().trim();
  4009. const { clickType, clickValue, vendorName, col } = modalClickFilter;
  4011. // Step 1: Filter by click context
  4012. let clickFiltered = allRecords.filter(row => {
  4013. let age = parseInt(calculateAgeOfBill(row.received_date), 10);
  4015. if (clickType === 'category') {
  4016. if (clickValue === 'status_not_updated') {
  4017. const rowType = String(row.type || '').trim();
  4018. if (rowType !== '') return false;
  4019. } else {
  4020. const rowCategory = getCategoryCode(row.resolved_type || row.type);
  4021. if (rowCategory !== clickValue) return false;
  4022. }
  4023. }
  4025. if (clickType === 'age') {
  4026. // Exclude Completed Bills for pending age column clicks
  4027. const rowStatusStr = String(row.status || '').trim();
  4028. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  4029. rowStatusStr === String(s.id) ||
  4030. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  4031. );
  4032. if (isCompleted) return false;
  4034. const [min, max] = clickValue;
  4035. if (max !== null) {
  4036. if (age < min || age > max) return false;
  4037. } else {
  4038. if (age < min) return false;
  4039. }
  4040. }
  4042. if (clickType === 'completed_custom') {
  4043. // Filter for completed status
  4044. const rowStatusStr = String(row.status || '').trim();
  4045. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  4046. rowStatusStr === String(s.id) ||
  4047. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  4048. );
  4049. if (!isCompleted) return false;
  4050. }
  4052. if (clickType === 'completed_age') {
  4053. // Filter for completed status
  4054. const rowStatusStr = String(row.status || '').trim();
  4055. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  4056. rowStatusStr === String(s.id) ||
  4057. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  4058. );
  4059. if (!isCompleted) return false;
  4061. const [min, max] = clickValue;
  4062. if (max !== null) {
  4063. if (age < min || age > max) return false;
  4064. } else {
  4065. if (age < min) return false;
  4066. }
  4067. }
  4069. if (clickType === 'status') {
  4070. const rowStatusStr = String(row.status || '').trim();
  4071. const matched = activeStatus.find(s => String(s.id) === clickValue);
  4072. if (matched) {
  4073. const matches = rowStatusStr === String(matched.id) ||
  4074. rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
  4075. if (!matches) return false;
  4076. }
  4077. }
  4079. if (clickType === 'vendor_pending_custom') {
  4080. const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  4081. if (rowVendor !== vendorName) return false;
  4083. const rowStatusStr = String(row.status || '').trim();
  4084. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  4085. rowStatusStr === String(s.id) ||
  4086. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  4087. );
  4088. if (isCompleted) return false;
  4089. }
  4091. if (clickType === 'pending_custom') {
  4092. const rowStatusStr = String(row.status || '').trim();
  4093. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  4094. rowStatusStr === String(s.id) ||
  4095. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  4096. );
  4097. if (isCompleted) return false;
  4098. }
  4100. if (clickType === 'vendor_total') {
  4101. const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  4102. if (rowVendor !== vendorName) return false;
  4103. }
  4105. if (clickType === 'vendor_status') {
  4106. const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  4107. if (rowVendor !== vendorName) return false;
  4109. const rowStatusStr = String(row.status || '').trim();
  4110. const matched = activeStatus.find(s => String(s.id) === col);
  4111. if (matched) {
  4112. const matches = rowStatusStr === String(matched.id) ||
  4113. rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
  4114. if (!matches) return false;
  4115. }
  4116. }
  4118. if (clickType === 'vendor_age') {
  4119. const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  4120. if (rowVendor !== vendorName) return false;
  4122. // Exclude Completed Bills for pending vendor age clicks
  4123. const rowStatusStr = String(row.status || '').trim();
  4124. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  4125. rowStatusStr === String(s.id) ||
  4126. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  4127. );
  4128. if (isCompleted) return false;
  4130. const [min, max] = clickValue;
  4131. if (max !== null) {
  4132. if (age < min || age > max) return false;
  4133. } else {
  4134. if (age < min) return false;
  4135. }
  4136. }
  4138. if (clickType === 'vendor_completed_age') {
  4139. const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  4140. if (rowVendor !== vendorName) return false;
  4142. // Filter for completed status
  4143. const rowStatusStr = String(row.status || '').trim();
  4144. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  4145. rowStatusStr === String(s.id) ||
  4146. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  4147. );
  4148. if (!isCompleted) return false;
  4150. const [min, max] = clickValue;
  4151. if (max !== null) {
  4152. if (age < min || age > max) return false;
  4153. } else {
  4154. if (age < min) return false;
  4155. }
  4156. }
  4158. if (clickType === 'latest_updates') {
  4159. if (getLocalDateString(row.updated_date) !== clickValue) return false;
  4160. }
  4162. return true;
  4163. });
  4165. // Step 2: Render type quick filter badges using clickFiltered dataset
  4166. updateModalQuickFilters(clickFiltered);
  4168. // Step 3: Apply activeModalQuickType filter
  4169. let filtered = clickFiltered;
  4170. if (activeModalQuickType !== 'all') {
  4171. filtered = filtered.filter(row => {
  4172. const cat = getCategoryCode(row.resolved_type || row.type);
  4173. if (activeModalQuickType === 'status_not_updated') {
  4174. return cat === 'status_not_updated';
  4175. }
  4176. return cat === activeModalQuickType;
  4177. });
  4178. }
  4180. // Step 3.5: Dynamically calculate and update status counts and render status filter badges
  4181. updateModalStatusBadges(filtered);
  4183. // Step 3.6: Apply activeModalQuickStatus filter
  4184. if (activeModalQuickStatus !== 'all') {
  4185. filtered = filtered.filter(row => {
  4186. const statusVal = String(row.status || '').trim();
  4187. const statusName = String(row.resolved_status || getStatusName(row.status) || '').trim();
  4189. const matched = activeStatus.find(s => String(s.id) === activeModalQuickStatus);
  4190. if (matched) {
  4191. return statusVal === String(matched.id) ||
  4192. statusName.toLowerCase().trim() === matched.status_name.toLowerCase().trim();
  4193. }
  4194. return true;
  4195. });
  4196. }
  4198. // Step 4: Apply other modal dropdowns and search query
  4199. if (selectedType !== 'all') {
  4200. filtered = filtered.filter(row => {
  4201. if (selectedType === 'status_not_updated') {
  4202. const rowType = String(row.type || '').trim();
  4203. return rowType === '';
  4204. } else {
  4205. const rowCategory = getCategoryCode(row.resolved_type || row.type);
  4206. return rowCategory === selectedType;
  4207. }
  4208. });
  4209. }
  4211. if (selectedStatus !== 'all') {
  4212. filtered = filtered.filter(row => {
  4213. const rowStatusStr = String(row.status || '').trim();
  4214. const matched = activeStatus.find(s => String(s.id) === selectedStatus);
  4215. if (matched) {
  4216. return rowStatusStr === String(matched.id) ||
  4217. rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
  4218. }
  4219. return true;
  4220. });
  4221. }
  4223. if (selectedVendor !== 'all') {
  4224. filtered = filtered.filter(row => {
  4225. const rowVendor = String(row.resolved_vendor || row.vendor_name || '').trim();
  4226. return rowVendor.toLowerCase() === selectedVendor.toLowerCase();
  4227. });
  4228. }
  4230. if (query) {
  4231. filtered = filtered.filter(row => {
  4232. const vName = String(row.resolved_vendor || row.vendor_name || '').toLowerCase();
  4233. const tName = String(row.resolved_type || row.type || '').toLowerCase();
  4234. const statusName = String(row.resolved_status || getStatusName(row.status) || '').toLowerCase();
  4235. return (
  4236. vName.includes(query) ||
  4237. tName.includes(query) ||
  4238. (row.subject && String(row.subject).toLowerCase().includes(query)) ||
  4239. (row.amount && String(row.amount).toLowerCase().includes(query)) ||
  4240. (row.invoice_no && String(row.invoice_no).toLowerCase().includes(query)) ||
  4241. (row.receiptno && String(row.receiptno).toLowerCase().includes(query)) ||
  4242. (row.physical_file_no && String(row.physical_file_no).toLowerCase().includes(query)) ||
  4243. (row.remarks && String(row.remarks).toLowerCase().includes(query)) ||
  4244. (row.tat && String(row.tat).toLowerCase().includes(query)) ||
  4245. statusName.includes(query)
  4246. );
  4247. });
  4248. }
  4250. // Sort modal dataset
  4251. if (modalSortCol) {
  4252. filtered.sort((a, b) => {
  4253. let valA = a[modalSortCol] || '';
  4254. let valB = b[modalSortCol] || '';
  4256. let timeA = valA ? new Date(valA).getTime() : 0;
  4257. let timeB = valB ? new Date(valB).getTime() : 0;
  4258. if (isNaN(timeA)) timeA = 0;
  4259. if (isNaN(timeB)) timeB = 0;
  4261. if (timeA !== timeB) {
  4262. return modalSortAsc ? timeA - timeB : timeB - timeA;
  4263. }
  4264. return modalSortAsc ? String(valA).localeCompare(String(valB)) : String(valB).localeCompare(String(valA));
  4265. });
  4266. }
  4268. renderModalTable(filtered);
  4269. }
  4271. function renderModalTable(data) {
  4272. const tbody = document.getElementById('modal-tracking-tbody');
  4273. const noRecords = document.getElementById('modal-no-records-found');
  4275. tbody.innerHTML = '';
  4277. if (data.length === 0) {
  4278. noRecords.style.display = 'block';
  4279. return;
  4280. }
  4282. noRecords.style.display = 'none';
  4284. const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
  4286. const formatDate = dateStr => {
  4287. if (!dateStr) return '-';
  4288. const parts = dateStr.split('-');
  4289. if (parts.length === 3) {
  4290. return `${parts[2]}/${parts[1]}/${parts[0]}`;
  4291. }
  4292. return dateStr;
  4293. };
  4295. const formatDateTime = dateTimeStr => {
  4296. if (!dateTimeStr) return '-';
  4297. try {
  4298. const d = new Date(dateTimeStr);
  4299. if (isNaN(d.getTime())) return dateTimeStr;
  4300. const pad = n => String(n).padStart(2, '0');
  4301. return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
  4302. } catch (e) {
  4303. return dateTimeStr;
  4304. }
  4305. };
  4307. const getTypeBadge = (typeVal, filePath) => {
  4308. const cleanType = String(typeVal || '').trim().toLowerCase();
  4309. let label = cleanType;
  4310. let badgeClass = 'type-sd';
  4312. if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
  4313. label = 'ASD';
  4314. badgeClass = 'type-asd';
  4315. } else if (cleanType.includes('agreement')) {
  4316. label = 'Agreement';
  4317. badgeClass = 'type-agreement';
  4318. } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
  4319. label = 'Security Deposit';
  4320. badgeClass = 'type-sd';
  4321. } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
  4322. label = 'Tax Invoice';
  4323. badgeClass = 'type-tax-invoice';
  4324. } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
  4325. label = 'EMD';
  4326. badgeClass = 'type-emd';
  4327. } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
  4328. label = 'Bank Guarantee';
  4329. badgeClass = 'type-bank-guarantee';
  4330. } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
  4331. label = 'Delivery Chellan';
  4332. badgeClass = 'type-delivery-chellan';
  4333. } else {
  4334. const typeObj = activeTypes.find(t => String(t.id) === cleanType);
  4335. if (typeObj) {
  4336. return getTypeBadge(typeObj.type_name, filePath);
  4337. }
  4338. label = typeVal || '-';
  4339. badgeClass = 'status-default';
  4340. }
  4342. let onClickAttr = '';
  4343. if (filePath) {
  4344. let pdfUrl = filePath;
  4345. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  4346. pdfUrl = contextPath + pdfUrl.substring(1);
  4347. } else {
  4348. pdfUrl = contextPath + pdfUrl;
  4349. }
  4350. onClickAttr = `onclick="window.open('${escapeHtml(pdfUrl)}', '_blank')"`;
  4351. } else {
  4352. onClickAttr = `onclick="alert('pdf file not uploaded')"`;
  4353. }
  4355. return `<span class="type-badge ${badgeClass} cursor-pointer" ${onClickAttr} style="cursor: pointer;" title="${filePath ? 'Click to view PDF' : 'PDF not uploaded'}">${label}</span>`;
  4356. };
  4358. data.forEach((row, index) => {
  4359. const tr = document.createElement('tr');
  4361. const tdIndex = document.createElement('td');
  4362. tdIndex.className = 'text-center fw-semibold text-secondary';
  4363. tdIndex.textContent = index + 1;
  4364. tr.appendChild(tdIndex);
  4366. const dispStatus = String(row.resolved_status || getStatusName(row.status) || '').trim();
  4368. tr.innerHTML += `
  4369. <td>${formatDate(row.received_date)}</td>
  4370. <td>${formatDate(row.invoice_date)}</td>
  4371. <td>${text(row.physical_file_no)}</td>
  4372. <td>${text(row.receiptno)}</td>
  4373. <td>${text(row.subject)}</td>
  4374. <td>${getTypeBadge(row.resolved_type || row.type, row.file_path)}</td>
  4375. <td class="fw-semibold text-secondary">${text(row.resolved_vendor || row.vendor_name)}</td>
  4376. <td class="fw-semibold text-dark">&#8377; ${text(row.amount)}</td>
  4377. <td>${calculateAgeOfBill(row.received_date)}</td>
  4378. <td><span class="status-badge status-${dispStatus.toLowerCase().replace(/\s+/g, '-')}">${text(dispStatus)}</span></td>
  4379. <td><small class="text-muted">${text(row.remarks)}</small></td>
  4380. <td><small class="text-muted">${text(row.payment_review)}</small></td>
  4381. <td>${formatDateTime(row.updated_date)}</td>
  4382. <td class="fw-semibold text-secondary">${text(row.updated_by_name)}</td>
  4383. `;
  4385. // Actions cell
  4386. const tdActions = document.createElement('td');
  4387. tdActions.className = 'text-center';
  4388. tdActions.style.whiteSpace = 'nowrap'; // avoid wrapping action buttons
  4390. if (row.file_path) {
  4391. const btnViewPdf = document.createElement('button');
  4392. btnViewPdf.className = 'btn-grid-action btn-grid-pdf me-1';
  4393. btnViewPdf.innerHTML = '<i class="fa-solid fa-file-pdf"></i>';
  4394. btnViewPdf.title = 'View PDF Document';
  4395. btnViewPdf.onclick = () => {
  4396. let pdfUrl = row.file_path;
  4397. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  4398. pdfUrl = contextPath + pdfUrl.substring(1);
  4399. } else {
  4400. pdfUrl = contextPath + pdfUrl;
  4401. }
  4402. window.open(pdfUrl, '_blank');
  4403. };
  4404. tdActions.appendChild(btnViewPdf);
  4405. }
  4407. if (row.mail_screenshot_path) {
  4408. const btnViewScreenshot = document.createElement('button');
  4409. btnViewScreenshot.className = 'btn-grid-action btn-outline-info me-1';
  4410. btnViewScreenshot.style.border = '1px solid #06b6d4';
  4411. btnViewScreenshot.style.color = '#06b6d4';
  4412. btnViewScreenshot.innerHTML = '<i class="fa-solid fa-image"></i>';
  4413. btnViewScreenshot.title = 'View Screenshot';
  4414. btnViewScreenshot.onclick = () => {
  4415. let imgUrl = row.mail_screenshot_path;
  4416. if (contextPath && contextPath.endsWith('/') && imgUrl.startsWith('/')) {
  4417. imgUrl = contextPath + imgUrl.substring(1);
  4418. } else {
  4419. imgUrl = contextPath + imgUrl;
  4420. }
  4421. window.open(imgUrl, '_blank');
  4422. };
  4423. tdActions.appendChild(btnViewScreenshot);
  4424. }
  4426. // History Button
  4427. const btnHistory = document.createElement('button');
  4428. btnHistory.className = 'btn-grid-action btn-outline-secondary me-1';
  4429. btnHistory.innerHTML = '<i class="fa-solid fa-clock-rotate-left"></i>';
  4430. btnHistory.style.border = '1px solid #cbd5e1';
  4431. btnHistory.title = 'View Update History';
  4432. btnHistory.onclick = () => {
  4433. showHistoryModal(row.id);
  4434. };
  4435. tdActions.appendChild(btnHistory);
  4437. if (isAdmin) {
  4438. const btnEdit = document.createElement('button');
  4439. btnEdit.className = 'btn-grid-action btn-grid-edit me-1';
  4440. btnEdit.innerHTML = '<i class="fa-solid fa-pen-to-square"></i>';
  4441. btnEdit.title = 'Edit Record';
  4442. btnEdit.onclick = () => {
  4443. openEditModal(row);
  4444. };
  4446. const btnDelete = document.createElement('button');
  4447. btnDelete.className = 'btn-grid-action btn-grid-delete';
  4448. btnDelete.innerHTML = '<i class="fa-solid fa-trash-can"></i>';
  4449. btnDelete.title = 'Delete Record';
  4450. btnDelete.onclick = () => {
  4451. deleteRecord(row.id);
  4452. };
  4454. tdActions.appendChild(btnEdit);
  4455. tdActions.appendChild(btnDelete);
  4456. }
  4457. tr.appendChild(tdActions);
  4459. tbody.appendChild(tr);
  4460. });
  4461. }
  4463. // --- EXPORT TO EXCEL LOGIC ---
  4464. function exportTableToExcelHelper(tableId, filename) {
  4465. const originalTable = document.getElementById(tableId);
  4466. if (!originalTable) {
  4467. alert("Table element not found.");
  4468. return;
  4469. }
  4471. // Clone table to modify it and strip actions column
  4472. const clonedTable = originalTable.cloneNode(true);
  4474. // Find Actions column index
  4475. const headers = clonedTable.querySelectorAll('thead th');
  4476. let actionsColIndex = -1;
  4477. headers.forEach((th, index) => {
  4478. const text = th.textContent.trim().toLowerCase();
  4479. if (text === 'actions' || text === 'action') {
  4480. actionsColIndex = index;
  4481. th.remove();
  4482. }
  4483. });
  4485. if (actionsColIndex !== -1) {
  4486. const rows = clonedTable.querySelectorAll('tbody tr');
  4487. rows.forEach(row => {
  4488. const cells = row.querySelectorAll('td');
  4489. if (cells[actionsColIndex]) {
  4490. cells[actionsColIndex].remove();
  4491. }
  4492. });
  4493. }
  4495. // Find Type of File column index to append PDF Status
  4496. let typeColIndex = -1;
  4497. clonedTable.querySelectorAll('thead th').forEach((th, index) => {
  4498. if (th.textContent.trim().toLowerCase() === 'type of file') {
  4499. typeColIndex = index;
  4500. }
  4501. });
  4503. if (typeColIndex !== -1) {
  4504. // Insert header "PDF Status" right after "Type of File"
  4505. const th = document.createElement('th');
  4506. th.textContent = 'PDF Status';
  4507. th.style.backgroundColor = '#f0fdf4';
  4508. th.style.color = '#166534';
  4510. const theadTr = clonedTable.querySelector('thead tr');
  4511. const nextTh = theadTr.children[typeColIndex + 1];
  4512. if (nextTh) {
  4513. theadTr.insertBefore(th, nextTh);
  4514. } else {
  4515. theadTr.appendChild(th);
  4516. }
  4518. // Insert td for each row
  4519. clonedTable.querySelectorAll('tbody tr').forEach(row => {
  4520. const cells = row.querySelectorAll('td');
  4521. const typeCell = cells[typeColIndex];
  4522. let pdfStatusText = 'pdf file not uploaded';
  4523. if (typeCell) {
  4524. const span = typeCell.querySelector('span');
  4525. if (span && span.getAttribute('title') && span.getAttribute('title').toLowerCase().includes('click')) {
  4526. pdfStatusText = 'PDF Uploaded';
  4527. }
  4528. }
  4530. const td = document.createElement('td');
  4531. td.textContent = pdfStatusText;
  4533. const nextTd = row.children[typeColIndex + 1];
  4534. if (nextTd) {
  4535. row.insertBefore(td, nextTd);
  4536. } else {
  4537. row.appendChild(td);
  4538. }
  4539. });
  4540. }
  4542. // Convert to Excel workbook and download
  4543. const wb = XLSX.utils.table_to_book(clonedTable, { raw: true, sheet: "Sheet1" });
  4544. XLSX.writeFile(wb, filename);
  4545. }
  4547. function exportModalTableToExcel() {
  4548. exportTableToExcelHelper('modal-tracking-table', 'Payment_Tracking_Details_Modal_Report.xlsx');
  4549. }
  4551. function exportMainTableToExcel() {
  4552. if (!currentFilteredRecords || currentFilteredRecords.length === 0) {
  4553. alert("No records to export.");
  4554. return;
  4555. }
  4557. // Create a temporary table element in memory
  4558. const tempTable = document.createElement('table');
  4560. // 1. Create head
  4561. const thead = document.createElement('thead');
  4562. thead.innerHTML = `
  4563. <tr>
  4564. <th>Sr. No.</th>
  4565. <th>Received Date</th>
  4566. <th>Invoice Date</th>
  4567. <th>Physical File No.</th>
  4568. <th>eFile No./ Receipt No.</th>
  4569. <th>Subject</th>
  4570. <th>Type of File</th>
  4571. <th>PDF Status</th>
  4572. <th>Vendor Name</th>
  4573. <th>Amount</th>
  4574. <th>Age of Bill (Days)</th>
  4575. <th>Status</th>
  4576. <th>Remarks</th>
  4577. <th>Screenshot Status</th>
  4578. <th>Payment Review</th>
  4579. <th>Last Updated At</th>
  4580. <th>Last Updated By</th>
  4581. </tr>
  4582. `;
  4583. tempTable.appendChild(thead);
  4585. // Helpers
  4586. const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
  4588. const formatDate = dateStr => {
  4589. if (!dateStr) return '-';
  4590. const parts = dateStr.split('-');
  4591. if (parts.length === 3) {
  4592. return `${parts[2]}/${parts[1]}/${parts[0]}`;
  4593. }
  4594. return dateStr;
  4595. };
  4597. const formatDateTime = dateTimeStr => {
  4598. if (!dateTimeStr) return '-';
  4599. try {
  4600. const d = new Date(dateTimeStr);
  4601. if (!isNaN(d.getTime())) {
  4602. const dd = String(d.getDate()).padStart(2, '0');
  4603. const MM = String(d.getMonth() + 1).padStart(2, '0');
  4604. const yyyy = d.getFullYear();
  4605. const HH = String(d.getHours()).padStart(2, '0');
  4606. const mm = String(d.getMinutes()).padStart(2, '0');
  4607. const ss = String(d.getSeconds()).padStart(2, '0');
  4608. return `${dd}/${MM}/${yyyy} ${HH}:${mm}:${ss}`;
  4609. }
  4610. } catch (e) {
  4611. console.error(e);
  4612. }
  4613. return dateTimeStr;
  4614. };
  4616. const getTypeLabel = typeVal => {
  4617. const cleanType = String(typeVal || '').trim().toLowerCase();
  4618. let label = cleanType;
  4620. if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
  4621. label = 'ASD';
  4622. } else if (cleanType.includes('agreement')) {
  4623. label = 'Agreement';
  4624. } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
  4625. label = 'Security Deposit';
  4626. } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
  4627. label = 'Tax Invoice';
  4628. } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
  4629. label = 'EMD';
  4630. } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
  4631. label = 'Bank Guarantee';
  4632. } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
  4633. label = 'Delivery Chellan';
  4634. } else {
  4635. const typeObj = activeTypes.find(t => String(t.id) === cleanType);
  4636. if (typeObj) {
  4637. return typeObj.type_name;
  4638. }
  4639. label = typeVal || '-';
  4640. }
  4641. return label;
  4642. };
  4644. // 2. Create body
  4645. const tbody = document.createElement('tbody');
  4646. currentFilteredRecords.forEach((row, index) => {
  4647. const tr = document.createElement('tr');
  4648. const dispStatus = String(row.resolved_status || getStatusName(row.status) || '').trim();
  4650. tr.innerHTML = `
  4651. <td>${index + 1}</td>
  4652. <td>${formatDate(row.received_date)}</td>
  4653. <td>${formatDate(row.invoice_date)}</td>
  4654. <td>${text(row.physical_file_no)}</td>
  4655. <td>${text(row.receiptno)}</td>
  4656. <td>${text(row.subject)}</td>
  4657. <td>${getTypeLabel(row.resolved_type || row.type)}</td>
  4658. <td>${row.file_path ? 'PDF Uploaded' : 'pdf file not uploaded'}</td>
  4659. <td>${text(row.resolved_vendor || row.vendor_name)}</td>
  4660. <td>${text(row.amount)}</td>
  4661. <td>${calculateAgeOfBill(row.received_date)}</td>
  4662. <td>${text(dispStatus)}</td>
  4663. <td>${text(row.remarks)}</td>
  4664. <td>${row.mail_screenshot_path ? 'Screenshot Uploaded' : 'Screenshot not uploaded'}</td>
  4665. <td>${text(row.payment_review)}</td>
  4666. <td>${formatDateTime(row.updated_date)}</td>
  4667. <td>${text(row.updated_by_name || '-')}</td>
  4668. `;
  4669. tbody.appendChild(tr);
  4670. });
  4671. tempTable.appendChild(tbody);
  4673. // Convert to Excel workbook and download
  4674. const wb = XLSX.utils.table_to_book(tempTable, { raw: true, sheet: "Sheet1" });
  4675. XLSX.writeFile(wb, 'Payment_Tracking_Details_Main_Report.xlsx');
  4676. }
  4678. // --- LATEST UPDATES CORNER BADGE LOGIC ---
  4679. function updateLatestUpdateBadge() {
  4680. const badge = document.getElementById('latest-update-badge');
  4681. if (!badge) return;
  4683. if (!allRecords || allRecords.length === 0) {
  4684. badge.style.setProperty('display', 'none', 'important');
  4685. return;
  4686. }
  4688. // Find the maximum updated_date
  4689. let maxTime = 0;
  4690. let maxDateStr = null;
  4692. allRecords.forEach(r => {
  4693. if (r.updated_date) {
  4694. const time = new Date(r.updated_date).getTime();
  4695. if (!isNaN(time) && time > maxTime) {
  4696. maxTime = time;
  4697. maxDateStr = r.updated_date;
  4698. }
  4699. }
  4700. });
  4702. if (maxTime === 0 || !maxDateStr) {
  4703. badge.style.setProperty('display', 'none', 'important');
  4704. return;
  4705. }
  4707. const latestDateOnly = getLocalDateString(maxDateStr);
  4709. // Count how many files share this exact latest update date stamp
  4710. let count = 0;
  4711. allRecords.forEach(r => {
  4712. if (r.updated_date && getLocalDateString(r.updated_date) === latestDateOnly) {
  4713. count++;
  4714. }
  4715. });
  4717. // Formatted date string helper
  4718. const formatDateTimeHelper = dateTimeStr => {
  4719. if (!dateTimeStr) return '-';
  4720. try {
  4721. const d = new Date(dateTimeStr);
  4722. if (isNaN(d.getTime())) return dateTimeStr;
  4723. const pad = n => String(n).padStart(2, '0');
  4724. return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
  4725. } catch (e) {
  4726. return dateTimeStr;
  4727. }
  4728. };
  4730. const countEl = document.getElementById('latest-update-count');
  4731. const timeEl = document.getElementById('latest-update-time');
  4732. if (countEl) countEl.textContent = count;
  4733. if (timeEl) timeEl.textContent = formatDateTimeHelper(maxDateStr);
  4735. badge.style.setProperty('display', 'flex', 'important');
  4736. badge.setAttribute('data-latest-date', latestDateOnly);
  4737. }
  4739. function openLatestUpdatesModal() {
  4740. const badge = document.getElementById('latest-update-badge');
  4741. if (!badge) return;
  4742. const latestDate = badge.getAttribute('data-latest-date');
  4743. if (!latestDate) return;
  4745. let dateDisplay = '-';
  4746. try {
  4747. const d = new Date(latestDate);
  4748. if (!isNaN(d.getTime())) {
  4749. const pad = n => String(n).padStart(2, '0');
  4750. dateDisplay = `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()}`;
  4751. }
  4752. } catch (e) { }
  4754. openModalForCount('latest_updates', latestDate, `Latest Updates (${dateDisplay})`);
  4755. }
  4757. function escapeHtml(str) {
  4758. if (!str) return '';
  4759. return String(str)
  4760. .replace(/&/g, "&amp;")
  4761. .replace(/</g, "&lt;")
  4762. .replace(/>/g, "&gt;")
  4763. .replace(/"/g, "&quot;")
  4764. .replace(/'/g, "&#039;");
  4765. }
  4766. // --- END OF NEW METRICS & INTERACTIVE CLICK FILTER LOGIC ---
  4768. // Delete record API call with remarks confirmation modal
  4769. let recordIdToDelete = null;
  4770. let deleteConfirmModalObj = null;
  4772. function deleteRecord(id) {
  4773. recordIdToDelete = id;
  4774. document.getElementById('delete-remarks').value = '';
  4776. if (!deleteConfirmModalObj) {
  4777. deleteConfirmModalObj = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
  4778. }
  4779. deleteConfirmModalObj.show();
  4780. }
  4782. function submitDeleteRecord() {
  4783. if (!recordIdToDelete) return;
  4785. const remarks = document.getElementById('delete-remarks').value.trim();
  4786. if (!remarks) {
  4787. alert('Please enter remarks/reason for deletion.');
  4788. return;
  4789. }
  4791. if (deleteConfirmModalObj) {
  4792. deleteConfirmModalObj.hide();
  4793. }
  4795. showLoader(true, 'Deleting record...');
  4797. const csrfHeaders = getCsrfHeaders();
  4798. const headers = {
  4799. 'Content-Type': 'application/x-www-form-urlencoded',
  4800. ...csrfHeaders
  4801. };
  4803. const body = new URLSearchParams();
  4804. body.append('id', recordIdToDelete);
  4805. body.append('remarks', remarks);
  4807. fetch(contextPath + 'gccservicepaymenttracker/api/delete', {
  4808. method: 'POST',
  4809. headers: headers,
  4810. body: body
  4811. })
  4812. .then(response => response.json())
  4813. .then(data => {
  4814. if (data.success) {
  4815. recordIdToDelete = null;
  4816. loadCounts();
  4817. loadList();
  4818. } else {
  4819. alert(data.error || 'Failed to delete record.');
  4820. showLoader(false);
  4821. }
  4822. })
  4823. .catch(err => {
  4824. console.error("Delete Error:", err);
  4825. alert("Failed to delete record due to connection error.");
  4826. showLoader(false);
  4827. });
  4828. }
  4830. // Show update history for a payment tracking record
  4831. function showHistoryModal(id) {
  4832. const tbody = document.getElementById('history-tbody');
  4833. const noHistoryFound = document.getElementById('no-history-found');
  4835. tbody.innerHTML = '';
  4836. noHistoryFound.style.display = 'none';
  4838. historyModalObj.show();
  4840. // Local formatting helpers for history records
  4841. const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
  4842. const formatDate = dateStr => {
  4843. if (!dateStr) return '-';
  4844. const parts = dateStr.split('-');
  4845. if (parts.length === 3) {
  4846. return `${parts[2]}/${parts[1]}/${parts[0]}`;
  4847. }
  4848. return dateStr;
  4849. };
  4850. const formatDateTime = dateTimeStr => {
  4851. if (!dateTimeStr) return '-';
  4852. try {
  4853. const d = new Date(dateTimeStr);
  4854. if (!isNaN(d.getTime())) {
  4855. const dd = String(d.getDate()).padStart(2, '0');
  4856. const MM = String(d.getMonth() + 1).padStart(2, '0');
  4857. const yyyy = d.getFullYear();
  4858. const HH = String(d.getHours()).padStart(2, '0');
  4859. const mm = String(d.getMinutes()).padStart(2, '0');
  4860. const ss = String(d.getSeconds()).padStart(2, '0');
  4861. return `${dd}/${MM}/${yyyy} ${HH}:${mm}:${ss}`;
  4862. }
  4863. } catch (e) {
  4864. console.error(e);
  4865. }
  4866. return dateTimeStr;
  4867. };
  4869. fetch(contextPath + 'gccservicepaymenttracker/api/history?id=' + id)
  4870. .then(response => response.json())
  4871. .then(historyList => {
  4872. if (!historyList || historyList.length === 0) {
  4873. noHistoryFound.style.display = 'block';
  4874. return;
  4875. }
  4877. historyList.forEach((item, index) => {
  4878. const tr = document.createElement('tr');
  4880. const dispStatus = String(item.resolved_status || getStatusName(item.status) || '').trim();
  4882. let docBtnHtml = '';
  4883. if (item.file_path) {
  4884. let pdfUrl = item.file_path;
  4885. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  4886. pdfUrl = contextPath + pdfUrl.substring(1);
  4887. } else {
  4888. pdfUrl = contextPath + pdfUrl;
  4889. }
  4890. docBtnHtml += `<a href="${pdfUrl}" target="_blank" class="btn-grid-action btn-grid-pdf me-1" title="View PDF"><i class="fa-solid fa-file-pdf"></i></a>`;
  4891. }
  4892. if (item.mail_screenshot_path) {
  4893. let imgUrl = item.mail_screenshot_path;
  4894. if (contextPath && contextPath.endsWith('/') && imgUrl.startsWith('/')) {
  4895. imgUrl = contextPath + imgUrl.substring(1);
  4896. } else {
  4897. imgUrl = contextPath + imgUrl;
  4898. }
  4899. docBtnHtml += `<a href="${imgUrl}" target="_blank" class="btn-grid-action btn-outline-info" style="border: 1px solid #06b6d4; color: #06b6d4;" title="View Screenshot"><i class="fa-solid fa-image"></i></a>`;
  4900. }
  4901. if (!docBtnHtml) {
  4902. docBtnHtml = '-';
  4903. }
  4905. // Resolve type badge
  4906. let typeHtml = '';
  4907. if (item.type) {
  4908. const cleanType = String(item.type).toLowerCase().trim();
  4909. let label = cleanType;
  4910. let badgeClass = 'type-sd';
  4912. if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
  4913. label = 'ASD';
  4914. badgeClass = 'type-asd';
  4915. } else if (cleanType.includes('agreement')) {
  4916. label = 'Agreement';
  4917. badgeClass = 'type-agreement';
  4918. } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
  4919. label = 'Security Deposit';
  4920. badgeClass = 'type-sd';
  4921. } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
  4922. label = 'Tax Invoice';
  4923. badgeClass = 'type-tax-invoice';
  4924. } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
  4925. label = 'EMD';
  4926. badgeClass = 'type-emd';
  4927. } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
  4928. label = 'Bank Guarantee';
  4929. badgeClass = 'type-bank-guarantee';
  4930. } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
  4931. label = 'Delivery Chellan';
  4932. badgeClass = 'type-delivery-chellan';
  4933. } else {
  4934. const typeObj = activeTypes.find(t => String(t.id) === cleanType);
  4935. if (typeObj) {
  4936. label = typeObj.type_name;
  4937. }
  4938. badgeClass = 'status-default';
  4939. }
  4940. typeHtml = `<span class="type-badge ${badgeClass}">${label}</span>`;
  4941. } else {
  4942. typeHtml = '-';
  4943. }
  4945. // Resolve vendor name
  4946. let resolvedVendor = item.resolved_vendor || item.vendor_name || '-';
  4948. tr.innerHTML = `
  4949. <td class="text-center fw-semibold text-secondary">${index + 1}</td>
  4950. <td>${formatDate(item.received_date)}</td>
  4951. <td>${formatDate(item.invoice_date)}</td>
  4952. <td>${text(item.subject)}</td>
  4953. <td>${typeHtml}</td>
  4954. <td class="fw-semibold text-secondary">${text(resolvedVendor)}</td>
  4955. <td class="fw-semibold text-dark">&#8377; ${text(item.amount)}</td>
  4956. <td><span class="status-badge status-${dispStatus.toLowerCase().replace(/\s+/g, '-')}">${text(dispStatus)}</span></td>
  4957. <td><small class="text-muted">${text(item.remarks)}</small></td>
  4958. <td><small class="text-muted">${text(item.payment_review)}</small></td>
  4959. <td>${formatDateTime(item.updated_at)}</td>
  4960. <td class="fw-semibold text-secondary">${text(item.updated_by_name || '-')}</td>
  4961. <td class="text-center">${docBtnHtml}</td>
  4962. `;
  4963. tbody.appendChild(tr);
  4964. });
  4965. })
  4966. .catch(err => {
  4967. console.error("Fetch History Error:", err);
  4968. tbody.innerHTML = '<tr><td colspan="12" class="text-center text-danger py-3"><i class="fa-solid fa-triangle-exclamation"></i> Failed to load history records.</td></tr>';
  4969. });
  4970. }
  4972. // --- DELETED RECORDS MODAL & RESTORE LOGIC ---
  4973. function openDeletedRecordsModal() {
  4974. if (!deletedRecordsModalObj) {
  4975. deletedRecordsModalObj = new bootstrap.Modal(document.getElementById('deletedRecordsModal'));
  4976. }
  4977. deletedRecordsModalObj.show();
  4978. showLoader(true, 'Fetching deleted records...');
  4980. fetch(contextPath + 'gccservicepaymenttracker/api/deleted-list?_=' + new Date().getTime())
  4981. .then(response => response.json())
  4982. .then(data => {
  4983. renderDeletedRecordsTable(data);
  4984. showLoader(false);
  4985. })
  4986. .catch(err => {
  4987. console.error("Fetch Deleted Records Error:", err);
  4988. alert("Failed to load deleted records.");
  4989. showLoader(false);
  4990. });
  4991. }
  4993. function renderDeletedRecordsTable(data) {
  4994. const tbody = document.getElementById('deleted-tracking-tbody');
  4995. const noRecords = document.getElementById('deleted-no-records-found');
  4997. tbody.innerHTML = '';
  4999. if (!data || data.length === 0) {
  5000. noRecords.style.display = 'block';
  5001. return;
  5002. }
  5004. noRecords.style.display = 'none';
  5006. const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
  5008. const formatDate = dateStr => {
  5009. if (!dateStr) return '-';
  5010. const parts = dateStr.split('-');
  5011. if (parts.length === 3) {
  5012. return `${parts[2]}/${parts[1]}/${parts[0]}`;
  5013. }
  5014. return dateStr;
  5015. };
  5017. const formatDateTime = dateTimeStr => {
  5018. if (!dateTimeStr) return '-';
  5019. try {
  5020. const d = new Date(dateTimeStr);
  5021. if (isNaN(d.getTime())) return dateTimeStr;
  5022. const pad = n => String(n).padStart(2, '0');
  5023. return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
  5024. } catch (e) {
  5025. return dateTimeStr;
  5026. }
  5027. };
  5029. const getTypeBadge = (typeVal, filePath) => {
  5030. const cleanType = String(typeVal || '').trim().toLowerCase();
  5031. let label = cleanType;
  5032. let badgeClass = 'type-sd';
  5034. if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
  5035. label = 'ASD';
  5036. badgeClass = 'type-asd';
  5037. } else if (cleanType.includes('agreement')) {
  5038. label = 'Agreement';
  5039. badgeClass = 'type-agreement';
  5040. } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
  5041. label = 'Security Deposit';
  5042. badgeClass = 'type-sd';
  5043. } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
  5044. label = 'Tax Invoice';
  5045. badgeClass = 'type-tax-invoice';
  5046. } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
  5047. label = 'EMD';
  5048. badgeClass = 'type-emd';
  5049. } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
  5050. label = 'Bank Guarantee';
  5051. badgeClass = 'type-bank-guarantee';
  5052. } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
  5053. label = 'Delivery Chellan';
  5054. badgeClass = 'type-delivery-chellan';
  5055. } else {
  5056. const typeObj = activeTypes.find(t => String(t.id) === cleanType);
  5057. if (typeObj) {
  5058. return getTypeBadge(typeObj.type_name, filePath);
  5059. }
  5060. label = typeVal || '-';
  5061. badgeClass = 'status-default';
  5062. }
  5064. let onClickAttr = '';
  5065. if (filePath) {
  5066. let pdfUrl = filePath;
  5067. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  5068. pdfUrl = contextPath + pdfUrl.substring(1);
  5069. } else {
  5070. pdfUrl = contextPath + pdfUrl;
  5071. }
  5072. onClickAttr = `onclick="window.open('${escapeHtml(pdfUrl)}', '_blank')"`;
  5073. } else {
  5074. onClickAttr = `onclick="alert('pdf file not uploaded')"`;
  5075. }
  5077. return `<span class="type-badge ${badgeClass} cursor-pointer" ${onClickAttr} style="cursor: pointer;" title="${filePath ? 'Click to view PDF' : 'PDF not uploaded'}">${label}</span>`;
  5078. };
  5080. data.forEach((row, index) => {
  5081. const tr = document.createElement('tr');
  5083. const tdIndex = document.createElement('td');
  5084. tdIndex.className = 'text-center fw-semibold text-secondary';
  5085. tdIndex.textContent = index + 1;
  5086. tr.appendChild(tdIndex);
  5088. const dispStatus = String(row.resolved_status || getStatusName(row.status) || '').trim();
  5090. tr.innerHTML += `
  5091. <td>${formatDate(row.received_date)}</td>
  5092. <td>${formatDate(row.invoice_date)}</td>
  5093. <td>${text(row.physical_file_no)}</td>
  5094. <td>${text(row.receiptno)}</td>
  5095. <td>${text(row.subject)}</td>
  5096. <td>${getTypeBadge(row.resolved_type || row.type, row.file_path)}</td>
  5097. <td class="fw-semibold text-secondary">${text(row.resolved_vendor || row.vendor_name)}</td>
  5098. <td class="fw-semibold text-dark">&#8377; ${text(row.amount)}</td>
  5099. <td>${calculateAgeOfBill(row.received_date)}</td>
  5100. <td><span class="status-badge status-${dispStatus.toLowerCase().replace(/\s+/g, '-')}">${text(dispStatus)}</span></td>
  5101. <td><small class="text-danger fw-semibold">${text(row.remarks)}</small></td>
  5102. <td><small class="text-muted">${text(row.payment_review)}</small></td>
  5103. <td>${formatDateTime(row.updated_date)}</td>
  5104. <td class="fw-semibold text-secondary">${text(row.updated_by_name)}</td>
  5105. `;
  5107. // Actions cell
  5108. const tdActions = document.createElement('td');
  5109. tdActions.className = 'text-center';
  5110. tdActions.style.whiteSpace = 'nowrap';
  5112. // Restore Button
  5113. const btnRestore = document.createElement('button');
  5114. btnRestore.className = 'btn btn-sm btn-outline-warning d-inline-flex align-items-center gap-1';
  5115. btnRestore.innerHTML = '<i class="fa-solid fa-trash-arrow-up"></i> Restore';
  5116. btnRestore.style.fontSize = '0.72rem';
  5117. btnRestore.style.fontWeight = '600';
  5118. btnRestore.title = 'Restore Payment Record';
  5119. btnRestore.onclick = () => {
  5120. restoreDeletedRecord(row.id);
  5121. };
  5122. tdActions.appendChild(btnRestore);
  5124. tr.appendChild(tdActions);
  5125. tbody.appendChild(tr);
  5126. });
  5127. }
  5129. function restoreDeletedRecord(id) {
  5130. if (!confirm("Are you sure you want to restore this payment record?")) {
  5131. return;
  5132. }
  5134. if (deletedRecordsModalObj) {
  5135. deletedRecordsModalObj.hide();
  5136. }
  5138. showLoader(true, 'Restoring record...');
  5140. const csrfHeaders = getCsrfHeaders();
  5141. const headers = {
  5142. 'Content-Type': 'application/x-www-form-urlencoded',
  5143. ...csrfHeaders
  5144. };
  5146. const body = new URLSearchParams();
  5147. body.append('id', id);
  5149. fetch(contextPath + 'gccservicepaymenttracker/api/restore', {
  5150. method: 'POST',
  5151. headers: headers,
  5152. body: body
  5153. })
  5154. .then(response => response.json())
  5155. .then(data => {
  5156. if (data.success) {
  5157. alert('Record successfully restored!');
  5158. loadCounts();
  5159. loadList();
  5160. } else {
  5161. alert(data.error || 'Failed to restore record.');
  5162. showLoader(false);
  5163. }
  5164. })
  5165. .catch(err => {
  5166. console.error("Restore Error:", err);
  5167. alert("Failed to restore record due to connection error.");
  5168. showLoader(false);
  5169. });
  5170. }
  5172. // Dynamic stacked modals manager to handle overlays and backdrops dynamically
  5173. document.addEventListener('show.bs.modal', function (event) {
  5174. // Find currently shown modals
  5175. const openModals = document.querySelectorAll('.modal.show');
  5176. const count = openModals.length + 1;
  5177. const zIndex = 1050 + (10 * count);
  5178. event.target.style.setProperty('z-index', zIndex, 'important');
  5180. // Adjust the backdrop z-index on next tick
  5181. setTimeout(() => {
  5182. const backdrops = document.querySelectorAll('.modal-backdrop');
  5183. if (backdrops.length > 0) {
  5184. backdrops[backdrops.length - 1].style.setProperty('z-index', zIndex - 5, 'important');
  5185. }
  5186. }, 0);
  5187. });
  5189. document.addEventListener('hidden.bs.modal', function (event) {
  5190. event.target.style.removeProperty('z-index');
  5191. // If there are still open modals, make sure the body still has the modal-open class
  5192. const openModals = document.querySelectorAll('.modal.show');
  5193. if (openModals.length > 0) {
  5194. document.body.classList.add('modal-open');
  5195. }
  5196. });
  5197. </script>
  5198. </body>
  5200. </html>