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.
14 Commits
1 Branch
0 Tags
17 MiB
Tree: fe2aee5f4c
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'fe2aee5f4c'
${ noResults }
gccmanpower/src/main/resources/templates/gccservicepaymenttracker/dashboard.html

4486 lines
198 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
​
​
​
​
​
​
​
​
​
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 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
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
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 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 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
​
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
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
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added payment processing tracker
4 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
​
​
​
​
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
​
​
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
​
​
​
​
​
​
​
​
changes in payment dashboard page and service
3 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 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 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
​
​
​
​
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
​
changes in manpower and payment tracker project ui and query changes
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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 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 manpower and payment tracker project ui and query changes
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 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
​
​
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
​
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
​
added updated by in all view options and added history
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
changes in dashboard page dynamically load status
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 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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
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
​
​
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
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
​
​
​
​
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
​
​
​
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
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
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
​
​
​
​
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
​
​
​
​
​
​
​
​
​
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 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
changes in payment dashboard page and service
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
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
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 manpower and payment tracker project ui and query changes
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 manpower and payment tracker project ui and query changes
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
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
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 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 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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
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. body {
  51. background-color: #f4f7f6;
  52. font-family: 'Poppins', sans-serif;
  53. color: #333;
  54. }
  56. .header {
  57. background: linear-gradient(135deg, #09303d, #0f5c78);
  58. color: #fff;
  59. padding: 15px 30px;
  60. display: flex;
  61. justify-content: space-between;
  62. align-items: center;
  63. box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  64. }
  66. .logo-left {
  67. display: flex;
  68. align-items: center;
  69. gap: 15px;
  70. }
  72. .logo-left img {
  73. width: 60px;
  74. height: 60px;
  75. }
  77. .logo-text h2 {
  78. font-family: 'Outfit', sans-serif;
  79. font-size: 1.1rem;
  80. font-weight: 700;
  81. margin: 0;
  82. line-height: 1.2;
  83. letter-spacing: 0.5px;
  84. }
  86. .logo-text p {
  87. font-size: 0.7rem;
  88. margin: 0;
  89. color: #aed6f1;
  90. }
  92. .header-title h2 {
  93. font-family: 'Outfit', sans-serif;
  94. font-size: 1.5rem;
  95. font-weight: 700;
  96. margin: 0;
  97. }
  99. .user-menu {
  100. display: flex;
  101. align-items: center;
  102. gap: 15px;
  103. }
  105. .user-badge {
  106. background: rgba(255, 255, 255, 0.15);
  107. padding: 8px 16px;
  108. border-radius: 20px;
  109. font-size: 0.85rem;
  110. font-weight: 600;
  111. display: flex;
  112. align-items: center;
  113. gap: 8px;
  114. }
  116. .btn-logout {
  117. background: #e74c3c;
  118. color: #fff;
  119. border: none;
  120. padding: 8px 16px;
  121. border-radius: 20px;
  122. font-size: 0.85rem;
  123. font-weight: 600;
  124. cursor: pointer;
  125. transition: all 0.3s;
  126. text-decoration: none;
  127. display: inline-flex;
  128. align-items: center;
  129. gap: 6px;
  130. }
  132. .btn-logout:hover {
  133. background: #c0392b;
  134. color: #fff;
  135. transform: translateY(-1.5px);
  136. }
  138. .main-container {
  139. max-width: 95%;
  140. margin: 35px auto;
  141. padding: 0 15px;
  142. }
  144. /* 4 Category Cards Dashboard */
  145. .category-grid {
  146. display: grid;
  147. grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  148. gap: 20px;
  149. margin-bottom: 35px;
  150. }
  152. .category-card {
  153. background: #ffffff;
  154. border: 1px solid #eef2f6;
  155. border-radius: 16px;
  156. padding: 24px;
  157. box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
  158. transition: all 0.3s ease;
  159. position: relative;
  160. overflow: hidden;
  161. cursor: pointer;
  162. display: flex;
  163. align-items: center;
  164. justify-content: space-between;
  165. }
  167. .category-card::before {
  168. content: '';
  169. position: absolute;
  170. top: 0;
  171. left: 0;
  172. width: 5px;
  173. height: 100%;
  174. }
  176. /* SD Card Accent */
  177. .category-card.card-sd::before {
  178. background-color: #0f5c78;
  179. }
  181. .category-card.card-sd.active {
  182. border-color: #0f5c78;
  183. box-shadow: 0 10px 25px rgba(15, 92, 120, 0.15);
  184. background-color: #f0f7f9;
  185. }
  187. /* Invoice Card Accent */
  188. .category-card.card-invoice::before {
  189. background-color: #27ae60;
  190. }
  192. .category-card.card-invoice.active {
  193. border-color: #27ae60;
  194. box-shadow: 0 10px 25px rgba(39, 174, 96, 0.15);
  195. background-color: #f1fbf4;
  196. }
  198. /* EMD Card Accent */
  199. .category-card.card-emd::before {
  200. background-color: #8e44ad;
  201. }
  203. .category-card.card-emd.active {
  204. border-color: #8e44ad;
  205. box-shadow: 0 10px 25px rgba(142, 68, 173, 0.15);
  206. background-color: #f9f2fc;
  207. }
  209. /* BG Card Accent */
  210. .category-card.card-bg::before {
  211. background-color: #1e40af;
  212. }
  214. .category-card.card-bg.active {
  215. border-color: #1e40af;
  216. box-shadow: 0 10px 25px rgba(30, 64, 175, 0.15);
  217. background-color: #eff6ff;
  218. }
  220. /* DC Card Accent */
  221. .category-card.card-dc::before {
  222. background-color: #b91c1c;
  223. }
  225. .category-card.card-dc.active {
  226. border-color: #b91c1c;
  227. box-shadow: 0 10px 25px rgba(185, 28, 28, 0.15);
  228. background-color: #fef2f2;
  229. }
  231. /* ASD Card Accent */
  232. .category-card.card-asd::before {
  233. background-color: #d35400;
  234. }
  236. .category-card.card-asd.active {
  237. border-color: #d35400;
  238. box-shadow: 0 10px 25px rgba(211, 84, 0, 0.15);
  239. background-color: #fdf5e6;
  240. }
  242. /* Agreement Card Accent */
  243. .category-card.card-agreement::before {
  244. background-color: #db2777;
  245. }
  247. .category-card.card-agreement.active {
  248. border-color: #db2777;
  249. box-shadow: 0 10px 25px rgba(219, 39, 119, 0.15);
  250. background-color: #fdf2f8;
  251. }
  253. /* Total No of Files Card Accent */
  254. .category-card.card-total::before {
  255. background-color: #2563eb;
  256. }
  258. .category-card.card-total.active {
  259. border-color: #2563eb;
  260. box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
  261. background-color: #eff6ff;
  262. }
  264. .card-total .card-icon {
  265. color: #2563eb;
  266. }
  268. /* Type Not Updated Files Card Accent */
  269. .category-card.card-status-not-updated::before {
  270. background-color: #475569;
  271. }
  273. .category-card.card-status-not-updated.active {
  274. border-color: #475569;
  275. box-shadow: 0 10px 25px rgba(71, 85, 105, 0.15);
  276. background-color: #f8fafc;
  277. }
  279. .card-status-not-updated .card-icon {
  280. color: #475569;
  281. }
  283. .category-card:hover {
  284. transform: translateY(-4px);
  285. box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  286. }
  288. .card-left {
  289. display: flex;
  290. flex-direction: column;
  291. gap: 5px;
  292. }
  294. .card-icon {
  295. font-size: 2.2rem;
  296. opacity: 0.85;
  297. transition: all 0.3s;
  298. }
  300. .card-sd .card-icon {
  301. color: #0f5c78;
  302. }
  304. .card-invoice .card-icon {
  305. color: #27ae60;
  306. }
  308. .card-emd .card-icon {
  309. color: #8e44ad;
  310. }
  312. .card-bg .card-icon {
  313. color: #1e40af;
  314. }
  316. .card-dc .card-icon {
  317. color: #b91c1c;
  318. }
  320. .card-asd .card-icon {
  321. color: #d35400;
  322. }
  324. .card-agreement .card-icon {
  325. color: #db2777;
  326. }
  328. .category-card:hover .card-icon {
  329. transform: scale(1.1);
  330. }
  332. .card-title {
  333. font-family: 'Outfit', sans-serif;
  334. font-size: 0.95rem;
  335. font-weight: 700;
  336. color: #64748b;
  337. text-transform: uppercase;
  338. letter-spacing: 0.5px;
  339. margin: 0;
  340. }
  342. .card-value {
  343. font-family: 'Outfit', sans-serif;
  344. font-size: 1.85rem;
  345. font-weight: 800;
  346. color: #1e293b;
  347. margin: 0;
  348. }
  350. /* Filter Section */
  351. .filter-card {
  352. background: #ffffff;
  353. border-radius: 16px;
  354. border: 1px solid #eef2f6;
  355. box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
  356. padding: 24px;
  357. margin-bottom: 30px;
  358. }
  360. .filter-grid {
  361. display: grid;
  362. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  363. gap: 20px;
  364. align-items: end;
  365. }
  367. .filter-group {
  368. display: flex;
  369. flex-direction: column;
  370. gap: 8px;
  371. }
  373. .filter-label {
  374. font-size: 0.8rem;
  375. font-weight: 700;
  376. color: #64748b;
  377. text-transform: uppercase;
  378. letter-spacing: 0.5px;
  379. }
  381. .filter-input {
  382. height: 44px;
  383. border-radius: 10px;
  384. border: 1.5px solid #cbd5e1;
  385. padding: 10px 16px;
  386. font-size: 0.9rem;
  387. font-weight: 500;
  388. color: #334155;
  389. background-color: #f8fafc;
  390. transition: all 0.3s ease;
  391. }
  393. .filter-input:focus {
  394. outline: none;
  395. border-color: #0f5c78;
  396. background-color: #ffffff;
  397. box-shadow: 0 0 0 3px rgba(15, 92, 120, 0.15);
  398. }
  400. .btn-filter-search {
  401. height: 44px;
  402. border-radius: 10px;
  403. border: none;
  404. background: linear-gradient(135deg, #0f5c78, #1781a6);
  405. color: #ffffff;
  406. font-weight: 600;
  407. font-size: 0.9rem;
  408. transition: all 0.3s;
  409. display: flex;
  410. align-items: center;
  411. justify-content: center;
  412. gap: 8px;
  413. cursor: pointer;
  414. box-shadow: 0 4px 10px rgba(15, 92, 120, 0.25);
  415. }
  417. .btn-filter-search:hover {
  418. background: linear-gradient(135deg, #1781a6, #0f5c78);
  419. transform: translateY(-1.5px);
  420. }
  422. .btn-filter-reset {
  423. height: 44px;
  424. border-radius: 10px;
  425. border: 1.5px solid #cbd5e1;
  426. background-color: #ffffff;
  427. color: #475569;
  428. font-weight: 600;
  429. font-size: 0.9rem;
  430. transition: all 0.3s;
  431. display: flex;
  432. align-items: center;
  433. justify-content: center;
  434. gap: 8px;
  435. cursor: pointer;
  436. }
  438. .btn-filter-reset:hover {
  439. background-color: #f1f5f9;
  440. color: #0f5c78;
  441. border-color: #0f5c78;
  442. }
  444. /* Table Card Section */
  445. .table-card {
  446. background: #ffffff;
  447. border-radius: 16px;
  448. border: 1px solid #eef2f6;
  449. box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
  450. padding: 24px;
  451. }
  453. .table-card-header {
  454. display: flex;
  455. justify-content: space-between;
  456. align-items: center;
  457. margin-bottom: 20px;
  458. flex-wrap: wrap;
  459. gap: 15px;
  460. }
  462. .table-card-title {
  463. font-family: 'Outfit', sans-serif;
  464. font-size: 1.25rem;
  465. font-weight: 700;
  466. color: #1e293b;
  467. margin: 0;
  468. display: flex;
  469. align-items: center;
  470. gap: 10px;
  471. }
  473. .active-filter-badge {
  474. background-color: #e2e8f0;
  475. color: #475569;
  476. font-size: 0.78rem;
  477. font-weight: 700;
  478. padding: 5px 12px;
  479. border-radius: 20px;
  480. text-transform: uppercase;
  481. }
  483. .btn-add-record {
  484. background: linear-gradient(135deg, #0f5c78, #1781a6);
  485. color: #ffffff;
  486. border: none;
  487. padding: 10px 20px;
  488. border-radius: 10px;
  489. font-size: 0.9rem;
  490. font-weight: 600;
  491. cursor: pointer;
  492. transition: all 0.3s;
  493. display: inline-flex;
  494. align-items: center;
  495. gap: 8px;
  496. box-shadow: 0 4px 10px rgba(15, 92, 120, 0.2);
  497. text-decoration: none;
  498. }
  500. .btn-add-record:hover {
  501. background: linear-gradient(135deg, #1781a6, #0f5c78);
  502. transform: translateY(-2px);
  503. color: #ffffff;
  504. }
  506. /* Custom Data Grid Table */
  507. .grid-table {
  508. font-size: 0.85rem;
  509. }
  511. .grid-table th {
  512. background-color: #f1f5f9 !important;
  513. color: #475569 !important;
  514. font-weight: 700;
  515. text-transform: uppercase;
  516. font-size: 0.75rem;
  517. letter-spacing: 0.5px;
  518. padding: 14px 10px;
  519. border-bottom: 2px solid #cbd5e1 !important;
  520. vertical-align: middle;
  521. }
  523. .grid-table td {
  524. padding: 12px 10px;
  525. vertical-align: middle;
  526. border-bottom: 1px solid #e2e8f0;
  527. }
  529. .grid-table tbody tr:hover {
  530. background-color: #f8fafc;
  531. }
  533. /* Badges for status */
  534. .status-badge {
  535. font-size: 0.72rem;
  536. font-weight: 700;
  537. padding: 4px 10px;
  538. border-radius: 12px;
  539. text-transform: uppercase;
  540. display: inline-block;
  541. }
  543. .status-pending {
  544. background-color: #fef9c3;
  545. color: #854d0e;
  546. }
  548. .status-awaiting-details {
  549. background-color: #ffedd5;
  550. color: #c2410c;
  551. }
  553. .status-pending-with-dept {
  554. background-color: #e0f2fe;
  555. color: #0369a1;
  556. }
  558. .status-completed {
  559. background-color: #d1fae5;
  560. color: #065f46;
  561. }
  563. .status-no-action {
  564. background-color: #f1f5f9;
  565. color: #475569;
  566. }
  568. .status-processed {
  569. background-color: #dbeafe;
  570. color: #1e40af;
  571. }
  573. .status-approved {
  574. background-color: #d1fae5;
  575. color: #065f46;
  576. }
  578. .status-paid {
  579. background-color: #dcfce7;
  580. color: #166534;
  581. }
  583. .status-rejected {
  584. background-color: #fee2e2;
  585. color: #991b1b;
  586. }
  588. .status-default {
  589. background-color: #f1f5f9;
  590. color: #475569;
  591. }
  593. /* Type Badges */
  594. .type-badge {
  595. font-size: 0.72rem;
  596. font-weight: 700;
  597. padding: 4px 10px;
  598. border-radius: 12px;
  599. text-transform: uppercase;
  600. display: inline-block;
  601. }
  603. .type-sd {
  604. background-color: #f0f7f9;
  605. color: #0f5c78;
  606. border: 1px solid rgba(15, 92, 120, 0.25);
  607. }
  609. .type-tax-invoice {
  610. background-color: #f1fbf4;
  611. color: #27ae60;
  612. border: 1px solid rgba(39, 174, 96, 0.25);
  613. }
  615. .type-emd {
  616. background-color: #f9f2fc;
  617. color: #8e44ad;
  618. border: 1px solid rgba(142, 68, 173, 0.25);
  619. }
  621. .type-bank-guarantee {
  622. background-color: #eff6ff;
  623. color: #1e40af;
  624. border: 1px solid rgba(30, 64, 175, 0.25);
  625. }
  627. .type-delivery-chellan {
  628. background-color: #fef2f2;
  629. color: #b91c1c;
  630. border: 1px solid rgba(185, 28, 28, 0.25);
  631. }
  633. .type-asd {
  634. background-color: #fdf5e6;
  635. color: #d35400;
  636. border: 1px solid rgba(211, 84, 0, 0.25);
  637. }
  639. .type-agreement {
  640. background-color: #fdf2f8;
  641. color: #db2777;
  642. border: 1px solid rgba(219, 39, 119, 0.25);
  643. }
  645. .btn-grid-action {
  646. width: 32px;
  647. height: 32px;
  648. border-radius: 8px;
  649. border: none;
  650. display: inline-flex;
  651. align-items: center;
  652. justify-content: center;
  653. font-size: 0.85rem;
  654. cursor: pointer;
  655. transition: all 0.2s;
  656. }
  658. .btn-grid-edit {
  659. background-color: #e0f2fe;
  660. color: #0369a1;
  661. }
  663. .btn-grid-edit:hover {
  664. background-color: #0369a1;
  665. color: #ffffff;
  666. transform: scale(1.08);
  667. }
  669. .btn-grid-delete {
  670. background-color: #fee2e2;
  671. color: #b91c1c;
  672. }
  674. .btn-grid-delete:hover {
  675. background-color: #b91c1c;
  676. color: #ffffff;
  677. transform: scale(1.08);
  678. }
  680. .btn-grid-pdf {
  681. background-color: #fef2f2;
  682. color: #b91c1c;
  683. border: 1px solid rgba(185, 28, 28, 0.15) !important;
  684. }
  686. .btn-grid-pdf:hover {
  687. background-color: #b91c1c;
  688. color: #ffffff;
  689. transform: scale(1.08);
  690. }
  692. /* Loading Overlay styling */
  693. #loading-overlay {
  694. position: fixed;
  695. top: 0;
  696. left: 0;
  697. width: 100vw;
  698. height: 100vh;
  699. background: rgba(255, 255, 255, 0.75);
  700. backdrop-filter: blur(8px);
  701. -webkit-backdrop-filter: blur(8px);
  702. z-index: 99999;
  703. display: none;
  704. flex-direction: column;
  705. align-items: center;
  706. justify-content: center;
  707. opacity: 0;
  708. pointer-events: none;
  709. transition: opacity 0.3s ease;
  710. }
  712. #loading-overlay.active {
  713. opacity: 1;
  714. pointer-events: all;
  715. display: flex;
  716. }
  718. .loader-spinner-container {
  719. background: white;
  720. padding: 2.5rem 3.5rem;
  721. border-radius: 16px;
  722. box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  723. border: 1px solid rgba(15, 92, 120, 0.1);
  724. display: flex;
  725. flex-direction: column;
  726. align-items: center;
  727. gap: 1.25rem;
  728. }
  730. .loader-spinner {
  731. font-size: 3rem;
  732. color: #0f5c78;
  733. }
  735. .loader-text {
  736. font-family: 'Outfit', 'Inter', sans-serif;
  737. font-size: 1.1rem;
  738. font-weight: 600;
  739. color: #0f5c78;
  740. letter-spacing: 0.5px;
  741. }
  743. .empty-state {
  744. text-align: center;
  745. padding: 60px 20px;
  746. color: #64748b;
  747. }
  749. .empty-icon {
  750. font-size: 3.5rem;
  751. color: #cbd5e1;
  752. margin-bottom: 15px;
  753. }
  755. /* Custom Modal Header Styling */
  756. .modal-custom-header {
  757. background-color: #0f5c78;
  758. color: white;
  759. border-top-left-radius: 14px;
  760. border-top-right-radius: 14px;
  761. padding: 18px 24px;
  762. display: flex;
  763. justify-content: space-between;
  764. align-items: center;
  765. }
  767. .modal-custom-title {
  768. font-weight: 700;
  769. font-size: 1.25rem;
  770. display: flex;
  771. align-items: center;
  772. gap: 10px;
  773. margin: 0;
  774. font-family: 'Outfit', sans-serif;
  775. }
  777. .modal-content {
  778. border-radius: 14px;
  779. border: none;
  780. box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
  781. }
  783. /* Pagination and Table Controls Styling */
  784. .pagination .page-item .page-link {
  785. color: #0f5c78;
  786. border-color: #cbd5e1;
  787. font-weight: 500;
  788. padding: 6px 12px;
  789. transition: all 0.2s;
  790. }
  792. .pagination .page-item.active .page-link {
  793. background-color: #0f5c78;
  794. border-color: #0f5c78;
  795. color: #ffffff;
  796. }
  798. .pagination .page-item .page-link:hover {
  799. background-color: #e2e8f0;
  800. border-color: #0f5c78;
  801. color: #0f5c78;
  802. }
  804. .pagination .page-item.disabled .page-link {
  805. color: #94a3b8;
  806. border-color: #cbd5e1;
  807. background-color: #f1f5f9;
  808. }
  810. .table-controls-row {
  811. display: flex;
  812. justify-content: space-between;
  813. align-items: center;
  814. margin-bottom: 20px;
  815. flex-wrap: wrap;
  816. gap: 15px;
  817. }
  819. .table-controls-left,
  820. .table-controls-right {
  821. display: flex;
  822. align-items: center;
  823. gap: 8px;
  824. }
  826. /* Interactive Summary Cell Styles */
  827. .cursor-pointer {
  828. cursor: pointer;
  829. transition: all 0.2s ease;
  830. }
  832. .cursor-pointer:hover {
  833. background-color: #cbd5e1 !important;
  834. transform: scale(1.08);
  835. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  836. z-index: 5;
  837. position: relative;
  838. }
  840. /* Customized premium scrollbar for responsive tables */
  841. .table-responsive::-webkit-scrollbar {
  842. height: 6px;
  843. width: 6px;
  844. }
  846. .table-responsive::-webkit-scrollbar-thumb {
  847. background: #cbd5e1;
  848. border-radius: 4px;
  849. }
  851. .table-responsive::-webkit-scrollbar-track {
  852. background: #f8fafc;
  853. }
  855. /* Force table cells to wrap cleanly and prevent word clipping */
  856. .grid-table th,
  857. .grid-table td {
  858. white-space: normal;
  859. }
  861. /* Keep straight horizontal scrolling layout only on mobile phone viewports */
  862. @media (max-width: 767.98px) {
  864. .grid-table th,
  865. .grid-table td {
  866. white-space: nowrap;
  867. }
  868. }
  870. /* Media Queries for all devices */
  871. @media (max-width: 991.98px) {
  872. .header {
  873. flex-direction: column;
  874. gap: 15px;
  875. text-align: center;
  876. padding: 20px;
  877. }
  879. .header-title h2 {
  880. font-size: 1.35rem;
  881. }
  883. .user-menu {
  884. width: 100%;
  885. justify-content: center;
  886. }
  888. .main-container {
  889. max-width: 100%;
  890. margin: 15px auto;
  891. }
  893. .category-grid {
  894. grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  895. gap: 15px;
  896. margin-bottom: 25px;
  897. }
  899. .card-value {
  900. font-size: 1.5rem;
  901. }
  903. .card-icon {
  904. font-size: 1.85rem;
  905. }
  906. }
  908. @media (max-width: 575.98px) {
  909. .header-title h2 {
  910. font-size: 1.15rem;
  911. }
  913. .category-grid {
  914. grid-template-columns: repeat(2, 1fr);
  915. gap: 10px;
  916. }
  918. .category-card {
  919. padding: 16px;
  920. border-radius: 12px;
  921. }
  923. .card-value {
  924. font-size: 1.25rem;
  925. }
  927. .card-icon {
  928. font-size: 1.5rem;
  929. }
  931. .filter-card,
  932. .table-card {
  933. padding: 16px;
  934. border-radius: 12px;
  935. }
  937. .table-controls-row {
  938. flex-direction: column;
  939. align-items: stretch;
  940. gap: 10px;
  941. }
  943. .table-controls-right input {
  944. width: 100% !important;
  945. }
  947. .btn-add-record {
  948. width: 100%;
  949. justify-content: center;
  950. }
  951. }
  953. /* Make modal-xl wider to fit multi-column data tables comfortably without squishing text */
  954. @media (min-width: 1200px) {
  955. .modal-xl {
  956. max-width: 94% !important;
  957. }
  958. }
  960. @media (min-width: 1600px) {
  961. .modal-xl {
  962. max-width: 1550px !important;
  963. }
  964. }
  965. </style>
  966. </head>
  968. <body>
  970. <!-- Fullscreen Loading Overlay -->
  971. <div id="loading-overlay">
  972. <div class="loader-spinner-container">
  973. <i class="fa-solid fa-spinner fa-spin loader-spinner"></i>
  974. <span class="loader-text" id="loader-overlay-text">Processing...</span>
  975. </div>
  976. </div>
  978. <!-- Header Bar -->
  979. <div class="header">
  980. <div class="logo-left">
  981. <img th:src="@{/assets/header-images/gcc1.png}" alt="Greater Chennai Corporation Logo">
  982. <div class="logo-text">
  983. <h2>GREATER CHENNAI CORPORATION</h2>
  984. <p>பெருநகர சென்னை மாநகராட்சி</p>
  985. </div>
  986. </div>
  987. <div class="header-title">
  988. <h2>Payment Processing Tracker</h2>
  989. </div>
  990. <div class="user-menu" style="display: flex; align-items: center; gap: 15px;">
  991. <!-- Latest Update Badge -->
  992. <div id="latest-update-badge" class="d-flex align-items-center gap-2 p-2 px-3 rounded text-white"
  993. 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;"
  994. onclick="openLatestUpdatesModal()">
  995. <i class="fa-solid fa-bell text-warning animate-bounce"></i>
  996. <div>
  997. Latest Update: <span class="fw-bold text-warning" id="latest-update-count">0</span> File(s) on
  998. <span class="fw-semibold" id="latest-update-time">-</span>
  999. </div>
  1000. </div>
  1002. <span class="user-badge">
  1003. <i class="fa-solid fa-user-shield"></i>
  1004. <span th:text="${usrName}">Guest</span>
  1005. </span>
  1006. <a th:href="@{/gccservicepaymenttracker/logout}" class="btn-logout">
  1007. <i class="fa-solid fa-right-from-bracket"></i> Logout
  1008. </a>
  1009. </div>
  1010. </div>
  1012. <div class="main-container">
  1014. <!-- Category Grid (7 Cards) -->
  1015. <div class="category-grid">
  1017. <!-- Total No of Files -->
  1018. <div class="category-card card-total" onclick="openModalForCount('total', null, 'Total No of Files')">
  1019. <div class="card-left">
  1020. <h3 class="card-title">Total No of Files</h3>
  1021. <p class="card-value" id="count-total">0</p>
  1022. </div>
  1023. <i class="fa-solid fa-folder-open card-icon"></i>
  1024. </div>
  1026. <!-- Type Not Updated Files Files -->
  1027. <div class="category-card card-status-not-updated"
  1028. onclick="openModalForCount('category', 'status_not_updated', 'Type Not Updated Files Files')">
  1029. <div class="card-left">
  1030. <h3 class="card-title">Type Not Updated Files</h3>
  1031. <p class="card-value" id="count-status-not-updated">0</p>
  1032. </div>
  1033. <i class="fa-solid fa-circle-question card-icon"></i>
  1034. </div>
  1036. <!-- Security Deposit -->
  1037. <div class="category-card card-sd" onclick="openModalForCount('category', 'sd', 'Security Deposit')">
  1038. <div class="card-left">
  1039. <h3 class="card-title">Security Deposit</h3>
  1040. <p class="card-value" id="count-sd">0</p>
  1041. </div>
  1042. <i class="fa-solid fa-wallet card-icon"></i>
  1043. </div>
  1045. <!-- Tax Invoice -->
  1046. <div class="category-card card-invoice"
  1047. onclick="openModalForCount('category', 'tax invoice', 'Tax Invoice')">
  1048. <div class="card-left">
  1049. <h3 class="card-title">Tax Invoice</h3>
  1050. <p class="card-value" id="count-invoice">0</p>
  1051. </div>
  1052. <i class="fa-solid fa-file-invoice-dollar card-icon"></i>
  1053. </div>
  1055. <!-- EMD -->
  1056. <div class="category-card card-emd" onclick="openModalForCount('category', 'emd', 'EMD')">
  1057. <div class="card-left">
  1058. <h3 class="card-title">EMD</h3>
  1059. <p class="card-value" id="count-emd">0</p>
  1060. </div>
  1061. <i class="fa-solid fa-file-signature card-icon"></i>
  1062. </div>
  1064. <!-- Bank Guarantee commented out
  1065. <div class="category-card card-bg" onclick="openModalForCount('category', 'bank guarantee', 'Bank Guarantee')">
  1066. <div class="card-left">
  1067. <h3 class="card-title">Bank Guarantee</h3>
  1068. <p class="card-value" id="count-bg">0</p>
  1069. </div>
  1070. <i class="fa-solid fa-shield-halved card-icon"></i>
  1071. </div>
  1072. -->
  1074. <!-- Delivery Chellan commented out
  1075. <div class="category-card card-dc" onclick="openModalForCount('category', 'delivery chellan', 'Delivery Chellan')">
  1076. <div class="card-left">
  1077. <h3 class="card-title">Delivery Chellan</h3>
  1078. <p class="card-value" id="count-dc">0</p>
  1079. </div>
  1080. <i class="fa-solid fa-truck-ramp-box card-icon"></i>
  1081. </div>
  1082. -->
  1084. <!-- ASD -->
  1085. <div class="category-card card-asd" onclick="openModalForCount('category', 'asd', 'ASD')">
  1086. <div class="card-left">
  1087. <h3 class="card-title">ASD</h3>
  1088. <p class="card-value" id="count-asd">0</p>
  1089. </div>
  1090. <i class="fa-solid fa-vault card-icon"></i>
  1091. </div>
  1093. <!-- Agreement -->
  1094. <div class="category-card card-agreement" onclick="openModalForCount('category', 'agreement', 'Agreement')">
  1095. <div class="card-left">
  1096. <h3 class="card-title">Agreement</h3>
  1097. <p class="card-value" id="count-agreement">0</p>
  1098. </div>
  1099. <i class="fa-solid fa-file-contract card-icon"></i>
  1100. </div>
  1102. </div>
  1104. <!-- Executive Summary & Charts Section -->
  1105. <div class="row g-4 mb-4">
  1106. <!-- Executive Summary Table Card -->
  1107. <div class="col-lg-8">
  1108. <div class="card h-100 border-0 shadow-sm" style="border-radius: 16px; overflow: hidden;">
  1109. <div class="card-header bg-white py-3 border-0">
  1110. <h4 class="card-title mb-0 fw-bold"
  1111. style="font-family: 'Outfit', sans-serif; color: #09303d; font-size: 1.15rem;">
  1112. <i class="fa-solid fa-chart-line me-2 text-primary"></i>Total Files in No of days wise count
  1113. </h4>
  1114. </div>
  1115. <div class="card-body p-3">
  1116. <div class="table-responsive">
  1117. <table class="table table-bordered text-center align-middle mb-0"
  1118. style="font-size: 0.82rem; border-color: #e2e8f0;">
  1119. <thead class="table-light text-secondary fw-bold" style="font-size: 0.75rem;">
  1120. <tr id="summary-thead-tr">
  1121. <th style="background-color: #f8fafc; color: #475569;">Total No of files</th>
  1122. <th style="background-color: #f0fdf4; color: #166534;">Completed Files</th>
  1123. <th style="background-color: #fef2f2; color: #991b1b;">Pending Files</th>
  1124. <th style="background-color: #fafaf9; color: #44403c;">1 to 15 Days</th>
  1125. <th style="background-color: #fafaf9; color: #44403c;">16 to 30 Days</th>
  1126. <th style="background-color: #fafaf9; color: #44403c;">31 to 60 Days</th>
  1127. <th style="background-color: #fafaf9; color: #44403c;">61 to 90 Days</th>
  1128. <th style="background-color: #fafaf9; color: #44403c;">91 to 120 Days</th>
  1129. <th style="background-color: #fafaf9; color: #44403c;">Over 120 Days</th>
  1130. </tr>
  1131. </thead>
  1132. <tbody>
  1133. <tr class="fw-bold" style="font-size: 1rem; color: #1e293b;" id="summary-tbody-tr">
  1134. <td id="summary-total" class="cursor-pointer text-primary"
  1135. style="background-color: #f8fafc;"
  1136. onclick="openModalForCount('total', null, 'Total No of files')">0</td>
  1137. <td id="summary-completed" class="cursor-pointer text-success"
  1138. onclick="openModalForCount('completed_custom', null, 'Completed Files')">0
  1139. </td>
  1140. <td id="summary-pending" class="cursor-pointer text-danger"
  1141. style="color: #991b1b; font-weight: bold;"
  1142. onclick="openModalForCount('pending_custom', null, 'Pending Files')">0</td>
  1143. <td id="summary-1-15" class="cursor-pointer"
  1144. onclick="openModalForCount('age', [1, 15], 'Age: 1 to 15 Days')">0</td>
  1145. <td id="summary-16-30" class="cursor-pointer"
  1146. onclick="openModalForCount('age', [16, 30], 'Age: 16 to 30 Days')">0</td>
  1147. <td id="summary-31-60" class="cursor-pointer"
  1148. onclick="openModalForCount('age', [31, 60], 'Age: 31 to 60 Days')">0</td>
  1149. <td id="summary-61-90" class="cursor-pointer"
  1150. onclick="openModalForCount('age', [61, 90], 'Age: 61 to 90 Days')">0</td>
  1151. <td id="summary-91-120" class="cursor-pointer"
  1152. onclick="openModalForCount('age', [91, 120], 'Age: 91 to 120 Days')">0</td>
  1153. <td id="summary-over-120" class="cursor-pointer text-danger"
  1154. onclick="openModalForCount('age', [121, null], 'Age: Over 120 Days')">0</td>
  1155. </tr>
  1156. </tbody>
  1157. </table>
  1158. </div>
  1159. <p class="text-muted mt-2 mb-0" style="font-size: 0.72rem; font-style: italic;">
  1160. <i class="fa-solid fa-circle-info me-1"></i>Tip: Click on any count cell to filter the
  1161. detailed payment tracker list below.
  1162. </p>
  1163. </div>
  1164. </div>
  1165. </div>
  1167. <!-- Pie Chart Card -->
  1168. <div class="col-lg-4">
  1169. <div class="card h-100 border-0 shadow-sm" style="border-radius: 16px;">
  1170. <div class="card-header bg-white py-3 border-0">
  1171. <h4 class="card-title mb-0 fw-bold"
  1172. style="font-family: 'Outfit', sans-serif; color: #09303d; font-size: 1.15rem;">
  1173. <i class="fa-solid fa-chart-pie me-2 text-primary"></i>Invoices Status Distribution
  1174. </h4>
  1175. </div>
  1176. <div class="card-body d-flex align-items-center justify-content-center p-2"
  1177. style="position: relative; height: 180px;">
  1178. <canvas id="statusPieChart" style="max-height: 100%; max-width: 100%;"></canvas>
  1179. </div>
  1180. </div>
  1181. </div>
  1182. </div>
  1184. <!-- Vendor Breakdown Details Card -->
  1185. <div class="card border-0 shadow-sm mb-4" style="border-radius: 16px; overflow: hidden;">
  1186. <div
  1187. class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center flex-wrap gap-2">
  1188. <h4 class="card-title mb-0 fw-bold"
  1189. style="font-family: 'Outfit', sans-serif; color: #09303d; font-size: 1.15rem;">
  1190. <i class="fa-solid fa-users-viewfinder me-2 text-primary"></i>Vendor Breakdown Details (Invoices)
  1191. </h4>
  1192. <div style="font-size: 0.8rem; color: #64748b;">
  1193. <input type="text" id="vendor-breakdown-search" class="form-control form-control-sm"
  1194. style="width: 200px; border-radius: 8px;" placeholder="Search vendor breakdown..."
  1195. oninput="filterVendorBreakdown(this.value)">
  1196. </div>
  1197. </div>
  1198. <div class="card-body p-3">
  1199. <div class="table-responsive" style="max-height: 280px; overflow-y: auto;">
  1200. <table class="table table-striped table-bordered text-center align-middle mb-0"
  1201. style="font-size: 0.8rem; border-color: #e2e8f0;">
  1202. <thead class="table-light sticky-top text-secondary fw-bold"
  1203. style="font-size: 0.72rem; z-index: 10;">
  1204. <tr id="vendor-breakdown-thead-tr">
  1205. <th style="text-align: left; background-color: #f8fafc;">Vendor Name</th>
  1206. <th style="background-color: #f8fafc;">Total No of files</th>
  1207. <th style="background-color: #f0fdf4;">Completed Files</th>
  1208. <th style="background-color: #fffbeb;">Awaiting Details</th>
  1209. <th style="background-color: #f0f9ff;">Pending with Dept</th>
  1210. <th style="background-color: #fef2f2;">Pending</th>
  1211. <th style="background-color: #fafaf9;">1 to 15 Days</th>
  1212. <th style="background-color: #fafaf9;">16 to 30 Days</th>
  1213. <th style="background-color: #fafaf9;">31 to 60 Days</th>
  1214. <th style="background-color: #fafaf9;">61 to 90 Days</th>
  1215. <th style="background-color: #fafaf9;">91 to 120 Days</th>
  1216. <th style="background-color: #fafaf9;">Over 120 Days</th>
  1217. </tr>
  1218. </thead>
  1219. <tbody id="vendor-breakdown-tbody">
  1220. <!-- Populated dynamically via JS -->
  1221. </tbody>
  1222. </table>
  1223. </div>
  1224. </div>
  1225. </div>
  1227. <!-- Filter Card -->
  1228. <div class="filter-card">
  1229. <div class="filter-grid">
  1231. <!-- Date range picker
  1232. <div class="filter-group">
  1233. <label class="filter-label" for="filter-from-date">From Date</label>
  1234. <input type="text" id="filter-from-date" class="filter-input" placeholder="dd/mm/yyyy" readonly>
  1235. </div>
  1237. <div class="filter-group">
  1238. <label class="filter-label" for="filter-to-date">To Date</label>
  1239. <input type="text" id="filter-to-date" class="filter-input" placeholder="dd/mm/yyyy" readonly>
  1240. </div>
  1241. -->
  1243. <!-- Type Filter -->
  1244. <div class="filter-group">
  1245. <label class="filter-label" for="filter-type">Type</label>
  1246. <select id="filter-type" class="filter-input" onchange="handleTypeFilterChange(this.value)">
  1247. <option value="all">- All Types -</option>
  1248. <!-- Commented out static options to load from database
  1249. <option value="sd">Security Deposit</option>
  1250. <option value="tax invoice">Tax Invoice</option>
  1251. <option value="emd">EMD</option>
  1252. <option value="asd">ASD</option>
  1253. <option value="agreement">Agreement</option>
  1254. -->
  1255. </select>
  1256. </div>
  1258. <!-- Status Filter -->
  1259. <div class="filter-group">
  1260. <label class="filter-label" for="filter-status">Status</label>
  1261. <select id="filter-status" class="filter-input" onchange="loadList()">
  1262. <option value="">- All Statuses -</option>
  1263. </select>
  1264. </div>
  1266. <!-- Text Search -->
  1267. <div class="filter-group">
  1268. <label class="filter-label" for="search-text">Search Keyword</label>
  1269. <input type="text" id="search-text" class="filter-input" placeholder="Vendor, subject, invoice #..."
  1270. oninput="handleSearchInput(this.value)">
  1271. </div>
  1273. <!-- Action buttons -->
  1274. <button class="btn-filter-search" onclick="loadList()">
  1275. <i class="fa-solid fa-magnifying-glass"></i> Filter
  1276. </button>
  1278. <button class="btn-filter-reset" onclick="resetFilters()">
  1279. <i class="fa-solid fa-rotate-right"></i> Reset
  1280. </button>
  1282. </div>
  1283. </div>
  1285. <!-- Table Card Section -->
  1286. <div class="table-card">
  1288. <div class="table-card-header">
  1289. <h3 class="table-card-title">
  1290. <i class="fa-solid fa-table-list text-primary"></i>
  1291. <span>Payment Tracking Details</span>
  1292. <span class="active-filter-badge" id="active-category-badge">Type: All Types</span>
  1293. <span class="active-filter-badge ms-2" id="click-filter-badge"
  1294. style="display: none; background-color: #fee2e2; color: #b91c1c;"></span>
  1295. </h3>
  1296. <div class="d-flex align-items-center gap-2">
  1297. <button class="btn btn-sm btn-success fw-bold px-3 d-flex align-items-center gap-2"
  1298. style="border-radius: 8px; height: 36px; font-size: 0.85rem;"
  1299. onclick="exportMainTableToExcel()">
  1300. <i class="fa-solid fa-file-excel"></i> Export to Excel
  1301. </button>
  1302. <button th:if="${isAdmin}"
  1303. class="btn btn-sm btn-danger fw-bold px-3 d-flex align-items-center gap-2"
  1304. style="border-radius: 8px; height: 36px; font-size: 0.85rem; margin: 0;"
  1305. onclick="openDeletedRecordsModal()">
  1306. <i class="fa-solid fa-trash-can"></i> Deleted Records
  1307. </button>
  1308. <button th:if="${isAdmin}" class="btn-add-record" onclick="openAddModal()"
  1309. style="margin: 0; height: 36px;">
  1310. <i class="fa-solid fa-circle-plus"></i> Add Payment Tracking Record
  1311. </button>
  1312. </div>
  1313. </div>
  1315. <!-- Table Controls: Page size & Real-time Search -->
  1316. <div class="table-controls-row">
  1317. <div class="table-controls-left">
  1318. <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">Show</span>
  1319. <select id="table-page-size" class="form-select form-select-sm" style="width: 80px;"
  1320. onchange="changePageSize(this.value)">
  1321. <option value="10">10</option>
  1322. <option value="20" selected>20</option>
  1323. <option value="30">30</option>
  1324. <option value="40">40</option>
  1325. <option value="50">50</option>
  1326. </select>
  1327. <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">entries</span>
  1328. </div>
  1329. <div class="table-controls-right">
  1330. <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">Search:</span>
  1331. <input type="text" id="table-search" class="form-control form-control-sm" style="width: 250px;"
  1332. placeholder="Search in this table..." oninput="handleTableSearch(this.value)">
  1333. </div>
  1334. </div>
  1336. <!-- Responsive Table Grid -->
  1337. <div class="table-responsive">
  1338. <table class="table grid-table table-striped table-hover align-middle" id="tracking-table">
  1339. <!-- Commented out old thead code
  1340. <thead>
  1341. <tr>
  1342. <th class="text-center" style="width: 50px;">S.No</th>
  1343. <th>Received Date</th>
  1344. <th>Type</th>
  1345. <th>Vendor Name</th>
  1346. <th>Subject</th>
  1347. <th>Amount</th>
  1348. <th>Invoice No</th>
  1349. <th>Receipt No</th>
  1350. <th>Invoice Date</th>
  1351. <th>Physical File No</th>
  1352. <th>Remarks</th>
  1353. <th>TAT</th>
  1354. <th>Status</th>
  1355. <th>Followup</th>
  1356. <th>My Followup</th>
  1357. <th class="text-center" style="width: 100px;">Actions</th>
  1358. </tr>
  1359. </thead>
  1360. -->
  1361. <thead>
  1362. <tr>
  1363. <th class="text-center" style="width: 50px;">Sr. No.</th>
  1364. <th>Received Date</th>
  1365. <th>Invoice Date</th>
  1366. <th>Physical File No.</th>
  1367. <th>eFile No./ Receipt No.</th>
  1368. <th>Subject</th>
  1369. <th>Type of File</th>
  1370. <th>Vendor Name</th>
  1371. <th>Amount</th>
  1372. <th>Age of Bill (Days)</th>
  1373. <th>Status (Pending / Completed)</th>
  1374. <th>Remarks</th>
  1375. <th>Last Updated At</th>
  1376. <th>Last Updated By</th>
  1377. <th class="text-center" style="width: 120px;">Actions</th>
  1378. </tr>
  1379. </thead>
  1380. <tbody id="tracking-tbody">
  1381. <!-- Populated dynamically via JS -->
  1382. </tbody>
  1383. </table>
  1384. <div id="no-records-found" class="empty-state" style="display: none;">
  1385. <i class="fa-solid fa-folder-open empty-icon"></i>
  1386. <h4>No Records Found</h4>
  1387. <p>No payment tracking records match the active criteria.</p>
  1388. </div>
  1389. </div>
  1391. <!-- Pagination Controls -->
  1392. <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap gap-2">
  1393. <div class="text-secondary fw-semibold" style="font-size: 0.85rem;" id="pagination-info">
  1394. Showing 0 to 0 of 0 entries
  1395. </div>
  1396. <nav aria-label="Table navigation">
  1397. <ul class="pagination pagination-sm mb-0" id="pagination-controls">
  1398. <!-- Populated dynamically via JS -->
  1399. </ul>
  1400. </nav>
  1401. </div>
  1403. </div>
  1405. </div>
  1407. <!-- Add/Edit Modal Form -->
  1408. <div class="modal fade" id="recordModal" tabindex="-1" aria-labelledby="recordModalLabel" aria-hidden="true">
  1409. <div class="modal-dialog modal-lg modal-dialog-centered">
  1410. <div class="modal-content">
  1411. <div class="modal-custom-header">
  1412. <h5 class="modal-custom-title" id="recordModalLabel">
  1413. <i class="fa-solid fa-file-invoice-dollar"></i> Add/Edit Record
  1414. </h5>
  1415. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  1416. aria-label="Close"></button>
  1417. </div>
  1418. <div class="modal-body">
  1419. <form id="recordForm" onsubmit="saveRecord(event)">
  1420. <input type="hidden" id="form-id" name="id">
  1422. <div class="row g-3">
  1424. <!-- Received Date -->
  1425. <div class="col-md-6">
  1426. <label for="form-received-date" class="form-label fw-semibold text-secondary">Received
  1427. Date <span class="text-danger">*</span></label>
  1428. <input type="date" class="form-control" id="form-received-date" required
  1429. onclick="this.showPicker()">
  1430. </div>
  1432. <!-- Type -->
  1433. <div class="col-md-6">
  1434. <label for="form-type" class="form-label fw-semibold text-secondary">Type <span
  1435. class="text-danger">*</span></label>
  1436. <select class="form-select" id="form-type" required>
  1437. <!-- Commented out static options to load from database
  1438. <option value="sd">Security Deposit</option>
  1439. <option value="tax invoice">Tax Invoice</option>
  1440. <option value="emd">EMD</option>
  1441. <option value="asd">ASD</option>
  1442. <option value="agreement">Agreement</option>
  1443. -->
  1444. </select>
  1445. </div>
  1447. <!-- Vendor Name (Dynamic dropdown + Write-in) -->
  1448. <div class="col-md-6">
  1449. <label for="form-vendor-select" class="form-label fw-semibold text-secondary">Vendor
  1450. Name <span class="text-danger">*</span></label>
  1451. <select class="form-select mb-2" id="form-vendor-select"
  1452. onchange="toggleCustomVendor()">
  1453. <option value="">-- Select Vendor --</option>
  1454. <!-- Commented out model-populated options
  1455. <option th:each="vendor : ${vendorDetails}" th:value="${vendor.vendor_name}"
  1456. th:text="${vendor.vendor_name}"></option>
  1457. -->
  1458. <option value="__custom__">-- Write-in custom vendor --</option>
  1459. </select>
  1460. <input type="text" class="form-control" id="form-vendor-custom"
  1461. placeholder="Enter Custom Vendor Name" style="display: none;">
  1462. </div>
  1464. <!-- Subject -->
  1465. <div class="col-md-6">
  1466. <label for="form-subject" class="form-label fw-semibold text-secondary">Subject <span
  1467. class="text-danger">*</span></label>
  1468. <input type="text" class="form-control" id="form-subject"
  1469. placeholder="Enter subject/matter" required>
  1470. </div>
  1472. <!-- Amount -->
  1473. <div class="col-md-6">
  1474. <label for="form-amount" class="form-label fw-semibold text-secondary">Amount <span
  1475. class="text-danger">*</span></label>
  1476. <input type="text" class="form-control" id="form-amount"
  1477. placeholder="Enter amount (e.g. 50,000)" required>
  1478. </div>
  1480. <!-- Invoice No -->
  1481. <div class="col-md-6">
  1482. <label for="form-invoice-no" class="form-label fw-semibold text-secondary">Invoice
  1483. No</label>
  1484. <input type="text" class="form-control" id="form-invoice-no"
  1485. placeholder="Enter invoice number">
  1486. </div>
  1488. <!-- Receipt No -->
  1489. <div class="col-md-6">
  1490. <label for="form-receiptno" class="form-label fw-semibold text-secondary">Receipt
  1491. No</label>
  1492. <input type="text" class="form-control" id="form-receiptno"
  1493. placeholder="Enter Receipt No">
  1494. </div>
  1496. <!-- Invoice Date -->
  1497. <div class="col-md-6">
  1498. <label for="form-invoice-date" class="form-label fw-semibold text-secondary">Invoice
  1499. Date</label>
  1500. <input type="date" class="form-control" id="form-invoice-date"
  1501. onclick="this.showPicker()">
  1502. </div>
  1504. <!-- Physical File No -->
  1505. <div class="col-md-6">
  1506. <label for="form-physical-file-no"
  1507. class="form-label fw-semibold text-secondary">Physical File No</label>
  1508. <input type="text" class="form-control" id="form-physical-file-no"
  1509. placeholder="Enter physical file reference number">
  1510. </div>
  1512. <!-- TAT -->
  1513. <!-- <div class="col-md-6">
  1514. <label for="form-tat" class="form-label fw-semibold text-secondary">Turnaround Time
  1515. (TAT)</label>
  1516. <input type="text" class="form-control" id="form-tat" placeholder="e.g. 5 days">
  1517. </div> -->
  1519. <!-- Status -->
  1520. <div class="col-md-6">
  1521. <label for="form-status" class="form-label fw-semibold text-secondary">Status <span
  1522. class="text-danger">*</span></label>
  1523. <select class="form-select" id="form-status" required>
  1524. </select>
  1525. </div>
  1527. <!-- Followup commented out
  1528. <div class="col-md-6">
  1529. <label for="form-followup"
  1530. class="form-label fw-semibold text-secondary">Follow-up</label>
  1531. <input type="text" class="form-control" id="form-followup" placeholder="Follow-up note">
  1532. </div>
  1533. -->
  1535. <!-- My Followup commented out
  1536. <div class="col-md-6">
  1537. <label for="form-myfollowup" class="form-label fw-semibold text-secondary">My
  1538. Follow-up</label>
  1539. <input type="text" class="form-control" id="form-myfollowup"
  1540. placeholder="Internal follow-up note">
  1541. </div>
  1542. -->
  1544. <!-- Order By commented out
  1545. <div class="col-md-6">
  1546. <label for="form-orderby" class="form-label fw-semibold text-secondary">Order By</label>
  1547. <input type="text" class="form-control" id="form-orderby"
  1548. placeholder="Reference order description">
  1549. </div>
  1550. -->
  1552. <!-- PDF Attachment -->
  1553. <div class="col-md-12">
  1554. <label for="form-pdf" class="form-label fw-semibold text-secondary">PDF Attachment
  1555. (Optional)</label>
  1556. <input type="file" class="form-control" id="form-pdf" accept="application/pdf">
  1557. <div id="form-existing-pdf-container" class="mt-2" style="display: none;">
  1558. <span class="text-secondary fw-semibold">Current Document:</span>
  1559. <a id="form-existing-pdf-link" href="#" target="_blank"
  1560. class="ms-1 text-primary fw-bold text-decoration-none">
  1561. <i class="fa-solid fa-file-pdf"></i> View PDF
  1562. </a>
  1563. </div>
  1564. </div>
  1566. <!-- Remarks -->
  1567. <div class="col-12">
  1568. <label for="form-remarks" class="form-label fw-semibold text-secondary">Remarks</label>
  1569. <textarea class="form-control" id="form-remarks" rows="2"
  1570. placeholder="Additional remarks..."></textarea>
  1571. </div>
  1573. </div>
  1575. <div class="d-flex justify-content-end gap-2 mt-4">
  1576. <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
  1577. <button type="submit" class="btn btn-primary px-4"
  1578. style="background-color: #0f5c78; border-color: #0f5c78;">
  1579. <i class="fa-solid fa-save"></i> Save Record
  1580. </button>
  1581. </div>
  1582. </form>
  1583. </div>
  1584. </div>
  1585. </div>
  1586. </div>
  1588. <!-- History Modal -->
  1589. <div class="modal fade" id="historyModal" tabindex="-1" aria-labelledby="historyModalLabel" aria-hidden="true">
  1590. <div class="modal-dialog modal-xl modal-dialog-centered">
  1591. <div class="modal-content">
  1592. <div class="modal-custom-header" style="background-color: #2c3e50;">
  1593. <h5 class="modal-custom-title" id="historyModalLabel">
  1594. <i class="fa-solid fa-clock-rotate-left"></i> Payment Record Update History
  1595. </h5>
  1596. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  1597. aria-label="Close"></button>
  1598. </div>
  1599. <div class="modal-body">
  1600. <div class="table-responsive" style="max-height: 400px; border: 1px solid #eef2f6;">
  1601. <table class="table table-hover modal-table grid-table" id="history-table">
  1602. <thead>
  1603. <tr>
  1604. <th style="width: 50px;" class="text-center">S.No</th>
  1605. <th>Received Date</th>
  1606. <th>Invoice Date</th>
  1607. <th>Subject</th>
  1608. <th>Type</th>
  1609. <th>Vendor Name</th>
  1610. <th>Amount</th>
  1611. <th>Status</th>
  1612. <th>Remarks</th>
  1613. <th>Last Updated At</th>
  1614. <th>Last Updated By</th>
  1615. <th class="text-center" style="width: 80px;">Document</th>
  1616. </tr>
  1617. </thead>
  1618. <tbody id="history-tbody">
  1619. <!-- Populated dynamically -->
  1620. </tbody>
  1621. </table>
  1622. <div id="no-history-found" class="text-center text-muted py-5" style="display: none;">
  1623. <i class="fa-solid fa-history fs-1 mb-3 text-secondary" style="opacity: 0.5;"></i>
  1624. <p class="fw-bold mb-0">No update history found for this record.</p>
  1625. </div>
  1626. </div>
  1627. </div>
  1628. </div>
  1629. </div>
  1630. </div>
  1632. <!-- Delete Confirmation Modal with Remarks -->
  1633. <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
  1634. aria-hidden="true" style="z-index: 1070;">
  1635. <div class="modal-dialog modal-dialog-centered">
  1636. <div class="modal-content">
  1637. <div class="modal-custom-header" style="background-color: #dc3545; color: white;">
  1638. <h5 class="modal-custom-title" id="deleteConfirmModalLabel">
  1639. <i class="fa-solid fa-triangle-exclamation"></i> Confirm Delete
  1640. </h5>
  1641. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  1642. aria-label="Close"></button>
  1643. </div>
  1644. <div class="modal-body">
  1645. <p class="text-dark fw-semibold">Are you sure you want to delete this payment tracking record?</p>
  1646. <div class="mb-3">
  1647. <label for="delete-remarks" class="form-label fw-bold text-secondary text-uppercase"
  1648. style="font-size: 0.75rem;">Remarks / Reason for Deletion <span
  1649. class="text-danger">*</span></label>
  1650. <textarea id="delete-remarks" class="form-control" rows="3"
  1651. placeholder="Enter remarks for deleting this record..." required></textarea>
  1652. </div>
  1653. </div>
  1654. <div class="modal-footer bg-light p-2">
  1655. <button type="button" class="btn btn-sm btn-secondary px-3" data-bs-dismiss="modal">Cancel</button>
  1656. <button type="button" class="btn btn-sm btn-danger px-3" onclick="submitDeleteRecord()">Delete
  1657. Record</button>
  1658. </div>
  1659. </div>
  1660. </div>
  1661. </div>
  1663. <!-- Count Details Modal -->
  1664. <div class="modal fade" id="countDetailsModal" tabindex="-1" aria-labelledby="countDetailsModalLabel"
  1665. aria-hidden="true">
  1666. <div class="modal-dialog modal-xl modal-dialog-centered">
  1667. <div class="modal-content">
  1668. <div class="modal-custom-header" style="background-color: #0f5c78;">
  1669. <h5 class="modal-custom-title" id="countDetailsModalLabel">
  1670. <i class="fa-solid fa-list-check"></i> Count Details
  1671. </h5>
  1672. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  1673. aria-label="Close"></button>
  1674. </div>
  1675. <div class="modal-body" style="padding: 1.5rem;">
  1676. <!-- Filters Row Inside Modal -->
  1677. <div class="row g-3 mb-4 p-3 bg-light rounded border align-items-end">
  1678. <div class="col-md-3">
  1679. <label for="modal-filter-type" class="form-label fw-bold text-secondary text-uppercase"
  1680. style="font-size: 0.75rem; letter-spacing: 0.5px;">Type Filter</label>
  1681. <select id="modal-filter-type" class="form-select form-select-sm"
  1682. onchange="applyModalFilters()">
  1683. <option value="all">- All Types -</option>
  1684. </select>
  1685. </div>
  1686. <div class="col-md-3">
  1687. <label for="modal-filter-status" class="form-label fw-bold text-secondary text-uppercase"
  1688. style="font-size: 0.75rem; letter-spacing: 0.5px;">Status Filter</label>
  1689. <select id="modal-filter-status" class="form-select form-select-sm"
  1690. onchange="applyModalFilters()">
  1691. <option value="all">- All Statuses -</option>
  1692. </select>
  1693. </div>
  1694. <div class="col-md-3">
  1695. <label for="modal-filter-vendor" class="form-label fw-bold text-secondary text-uppercase"
  1696. style="font-size: 0.75rem; letter-spacing: 0.5px;">Vendor Filter</label>
  1697. <select id="modal-filter-vendor" class="form-select form-select-sm"
  1698. onchange="applyModalFilters()">
  1699. <option value="all">- All Vendors -</option>
  1700. </select>
  1701. </div>
  1703. <div class="col-md-3">
  1704. <label class="form-label fw-bold text-secondary text-uppercase"
  1705. style="font-size: 0.75rem; letter-spacing: 0.5px;">Search:</label>
  1706. <input type="text" id="modal-table-search" class="form-control form-control-sm"
  1707. placeholder="Search in this table..." oninput="applyModalFilters()">
  1708. </div>
  1710. <div class="col-md-3">
  1711. <button
  1712. class="btn btn-sm btn-success fw-bold px-3 d-inline-flex align-items-center gap-2 w-100 justify-content-center"
  1713. style="border-radius: 8px; height: 31px;" onclick="exportModalTableToExcel()">
  1714. <i class="fa-solid fa-file-excel"></i> Export to Excel
  1715. </button>
  1716. </div>
  1717. </div>
  1719. <!-- Responsive Table Inside Modal -->
  1720. <div class="table-responsive"
  1721. style="max-height: 400px; overflow-y: auto; border: 1px solid #eef2f6;">
  1722. <table class="table grid-table table-striped table-hover align-middle mb-0"
  1723. id="modal-tracking-table">
  1724. <thead class="table-light">
  1725. <tr>
  1726. <th class="text-center" style="width: 50px;">Sr. No.</th>
  1727. <th>Received Date</th>
  1728. <th>Invoice Date</th>
  1729. <th>Physical File No.</th>
  1730. <th>eFile No./ Receipt No.</th>
  1731. <th>Subject</th>
  1732. <th>Type of File</th>
  1733. <th>Vendor Name</th>
  1734. <th>Amount</th>
  1735. <th>Age of Bill (Days)</th>
  1736. <th>Status (Pending / Completed)</th>
  1737. <th>Remarks</th>
  1738. <th>Last Updated Date</th>
  1739. <th>Last Updated By</th>
  1740. <th class="text-center" style="width: 120px;">Actions</th>
  1741. </tr>
  1742. </thead>
  1743. <tbody id="modal-tracking-tbody">
  1744. <!-- Populated dynamically via JS -->
  1745. </tbody>
  1746. </table>
  1747. <div id="modal-no-records-found" class="empty-state text-center py-5" style="display: none;">
  1748. <i class="fa-solid fa-folder-open empty-icon"
  1749. style="font-size: 2.5rem; color: #cbd5e1; margin-bottom: 10px;"></i>
  1750. <h5>No Records Found</h5>
  1751. <p>No payment tracking records match the active criteria.</p>
  1752. </div>
  1753. </div>
  1754. </div>
  1755. </div>
  1756. </div>
  1757. </div>
  1759. <!-- Deleted Records Modal -->
  1760. <div class="modal fade" id="deletedRecordsModal" tabindex="-1" aria-labelledby="deletedRecordsModalLabel"
  1761. aria-hidden="true">
  1762. <div class="modal-dialog modal-xl modal-dialog-centered">
  1763. <div class="modal-content">
  1764. <div class="modal-custom-header" style="background-color: #dc3545;">
  1765. <h5 class="modal-custom-title" id="deletedRecordsModalLabel">
  1766. <i class="fa-solid fa-trash-can"></i> Deleted Payment Records
  1767. </h5>
  1768. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  1769. aria-label="Close"></button>
  1770. </div>
  1771. <div class="modal-body" style="padding: 1.5rem;">
  1772. <!-- Responsive Table Inside Modal -->
  1773. <div class="table-responsive"
  1774. style="max-height: 450px; overflow-y: auto; border: 1px solid #eef2f6;">
  1775. <table class="table grid-table table-striped table-hover align-middle mb-0"
  1776. id="deleted-tracking-table">
  1777. <thead class="table-light">
  1778. <tr>
  1779. <th class="text-center" style="width: 50px;">Sr. No.</th>
  1780. <th>Received Date</th>
  1781. <th>Invoice Date</th>
  1782. <th>Physical File No.</th>
  1783. <th>eFile No./ Receipt No.</th>
  1784. <th>Subject</th>
  1785. <th>Type of File</th>
  1786. <th>Vendor Name</th>
  1787. <th>Amount</th>
  1788. <th>Age of Bill (Days)</th>
  1789. <th>Status</th>
  1790. <th>Deletion Remarks</th>
  1791. <th>Deleted Date</th>
  1792. <th>Deleted By</th>
  1793. <th class="text-center" style="width: 100px;">Actions</th>
  1794. </tr>
  1795. </thead>
  1796. <tbody id="deleted-tracking-tbody">
  1797. <!-- Populated dynamically via JS -->
  1798. </tbody>
  1799. </table>
  1800. <div id="deleted-no-records-found" class="empty-state text-center py-5" style="display: none;">
  1801. <i class="fa-solid fa-trash-arrow-up empty-icon"
  1802. style="font-size: 2.5rem; color: #cbd5e1; margin-bottom: 10px;"></i>
  1803. <h5>No Deleted Records</h5>
  1804. <p>No deleted payment tracking records found in the database.</p>
  1805. </div>
  1806. </div>
  1807. </div>
  1808. </div>
  1809. </div>
  1810. </div>
  1811. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  1813. <!-- Custom Page Scripting -->
  1814. <script th:inline="javascript">
  1815. const contextPath = /*[[@{/}]]*/ '';
  1816. const isAdmin = /*[[${isAdmin}]]*/ false;
  1818. let activeCategory = 'all';
  1819. let allRecords = [];
  1820. let currentFilteredRecords = [];
  1821. let recordModalObj = null;
  1822. let historyModalObj = null;
  1823. let deletedRecordsModalObj = null;
  1824. let currentPage = 1;
  1825. let pageSize = 20;
  1827. // Custom dashboard filter & chart instances
  1828. let activeClickFilter = null;
  1829. let statusChartInstance = null;
  1830. let vendorBreakdownData = [];
  1832. // Dynamic lists for types, vendors, and statuses
  1833. let activeTypes = [];
  1834. let activeVendors = [];
  1835. let activeStatus = [];
  1837. // Date Pickers
  1838. // let fromDatePicker, toDatePicker;
  1840. document.addEventListener('DOMContentLoaded', async () => {
  1841. recordModalObj = new bootstrap.Modal(document.getElementById('recordModal'));
  1842. historyModalObj = new bootstrap.Modal(document.getElementById('historyModal'));
  1843. deletedRecordsModalObj = new bootstrap.Modal(document.getElementById('deletedRecordsModal'));
  1844. // initDatePickers();
  1845. await loadTypesAndVendors();
  1846. loadCounts();
  1847. loadList();
  1848. });
  1850. // Helper to map type_name to a category code
  1851. function getCategoryCode(typeName) {
  1852. const type = String(typeName).toLowerCase().trim();
  1853. if (type === 'asd' || type.includes('asd') || type.includes('additional security')) {
  1854. return 'asd';
  1855. } else if (type.includes('agreement')) {
  1856. return 'agreement';
  1857. } else if (type === 'sd' || (type.includes('security') && !type.includes('additional') && !type.includes('asd'))) {
  1858. return 'sd';
  1859. } else if (type.includes('invoice') || type.includes('bill')) {
  1860. return 'tax invoice';
  1861. } else if (type === 'emd' || type.includes('earnest')) {
  1862. return 'emd';
  1863. } else if (type.includes('guarantee') || type === 'bg') {
  1864. return 'bank guarantee';
  1865. } else if (type.includes('chellan') || type.includes('challan') || type === 'dc') {
  1866. return 'delivery chellan';
  1867. }
  1868. return type;
  1869. }
  1871. // Fetch types, vendors, and statuses from DB endpoints
  1872. async function loadTypesAndVendors() {
  1873. try {
  1874. const [typesRes, vendorsRes, statusRes] = await Promise.all([
  1875. fetch(contextPath + 'gccservicepaymenttracker/api/types?_=' + new Date().getTime()),
  1876. fetch(contextPath + 'gccservicepaymenttracker/api/vendors?_=' + new Date().getTime()),
  1877. fetch(contextPath + 'gccservicepaymenttracker/api/statuslist?_=' + new Date().getTime())
  1878. ]);
  1879. activeTypes = await typesRes.json();
  1880. activeVendors = await vendorsRes.json();
  1881. const fetchedStatus = await statusRes.json();
  1883. // Sort activeStatus to have completed first, then pending, then others
  1884. const completedStatuses = fetchedStatus.filter(s => getStatusKey(s.status_name) === 'completed');
  1885. const pendingStatuses = fetchedStatus.filter(s => getStatusKey(s.status_name) === 'pending');
  1886. const otherStatuses = fetchedStatus.filter(s =>
  1887. getStatusKey(s.status_name) !== 'completed' &&
  1888. getStatusKey(s.status_name) !== 'pending'
  1889. );
  1890. activeStatus = [...completedStatuses, ...pendingStatuses, ...otherStatuses];
  1892. populateDropdowns();
  1893. } catch (err) {
  1894. console.error("Error loading types, vendors or statuses:", err);
  1895. }
  1896. }
  1898. function getStatusKey(statusName) {
  1899. if (!statusName) return 'default';
  1900. const name = String(statusName).toLowerCase().trim();
  1901. if (name.includes('completed') || name.includes('approved') || name.includes('paid')) {
  1902. return 'completed';
  1903. }
  1904. if (name.includes('awaiting') || name.includes('details')) {
  1905. return 'awaiting details';
  1906. }
  1907. if (name.includes('dept') || name.includes('uac') || name.includes('office') || name.includes('fm unit')) {
  1908. return 'pending with dept';
  1909. }
  1910. if (name.includes('pending') || name.includes('initiated')) {
  1911. return 'pending';
  1912. }
  1913. if (name.includes('no action') || name.includes('action required') || name.includes('duplicate')) {
  1914. return 'no action';
  1915. }
  1916. return 'default';
  1917. }
  1919. const statusColors = {
  1920. 'completed': { bg: '#f0fdf4', text: '#166534', badgeClass: 'text-success' },
  1921. 'awaiting details': { bg: '#fffbeb', text: '#92400e', badgeClass: 'text-warning-dark' },
  1922. 'pending with dept': { bg: '#f0f9ff', text: '#075985', badgeClass: 'text-info-dark' },
  1923. 'pending': { bg: '#fef2f2', text: '#991b1b', badgeClass: 'text-danger' },
  1924. 'no action': { bg: '#fafaf9', text: '#44403c', badgeClass: 'text-secondary' },
  1925. 'processed': { bg: '#dbeafe', text: '#1e40af', badgeClass: 'text-primary' },
  1926. 'approved': { bg: '#d1fae5', text: '#065f46', badgeClass: 'text-success' },
  1927. 'paid': { bg: '#dcfce7', text: '#166534', badgeClass: 'text-success' },
  1928. 'rejected': { bg: '#fee2e2', text: '#991b1b', badgeClass: 'text-danger' }
  1929. };
  1931. function getStatusStyle(statusName) {
  1932. const key = getStatusKey(statusName);
  1933. return statusColors[key] || { bg: '#f1f5f9', text: '#475569', badgeClass: 'text-secondary' };
  1934. }
  1936. // Populate selects with dynamic options
  1937. function populateDropdowns() {
  1938. // Populate filter-type
  1939. const filterTypeSelect = document.getElementById('filter-type');
  1940. if (filterTypeSelect) {
  1941. filterTypeSelect.innerHTML = '<option value="all">- All Types -</option>';
  1942. const optNotUpdated = document.createElement('option');
  1943. optNotUpdated.value = 'status_not_updated';
  1944. optNotUpdated.textContent = 'Status Not Updated';
  1945. filterTypeSelect.appendChild(optNotUpdated);
  1947. activeTypes.forEach(t => {
  1948. const categoryCode = getCategoryCode(t.type_name);
  1949. const opt = document.createElement('option');
  1950. opt.value = categoryCode;
  1951. opt.textContent = t.type_name;
  1952. filterTypeSelect.appendChild(opt);
  1953. });
  1954. }
  1956. // Populate form-type
  1957. const formTypeSelect = document.getElementById('form-type');
  1958. if (formTypeSelect) {
  1959. formTypeSelect.innerHTML = '<option value="">-- Select Type --</option>';
  1960. activeTypes.forEach(t => {
  1961. const opt = document.createElement('option');
  1962. opt.value = t.id;
  1963. opt.textContent = t.type_name;
  1964. formTypeSelect.appendChild(opt);
  1965. });
  1966. }
  1968. // Populate filter-status
  1969. const filterStatusSelect = document.getElementById('filter-status');
  1970. if (filterStatusSelect) {
  1971. filterStatusSelect.innerHTML = '<option value="">- All Statuses -</option>';
  1972. activeStatus.forEach(s => {
  1973. const opt = document.createElement('option');
  1974. opt.value = s.id;
  1975. opt.textContent = s.status_name;
  1976. filterStatusSelect.appendChild(opt);
  1977. });
  1978. }
  1980. // Populate form-status
  1981. const formStatusSelect = document.getElementById('form-status');
  1982. if (formStatusSelect) {
  1983. formStatusSelect.innerHTML = '<option value="">-- Select Status --</option>';
  1984. activeStatus.forEach(s => {
  1985. const opt = document.createElement('option');
  1986. opt.value = s.id;
  1987. opt.textContent = s.status_name;
  1988. formStatusSelect.appendChild(opt);
  1989. });
  1990. }
  1992. // Populate form-vendor-select
  1993. const formVendorSelect = document.getElementById('form-vendor-select');
  1994. if (formVendorSelect) {
  1995. formVendorSelect.innerHTML = '<option value="">-- Select Vendor --</option>';
  1996. activeVendors.forEach(v => {
  1997. const opt = document.createElement('option');
  1998. opt.value = v.id;
  1999. opt.textContent = v.vendor_name;
  2000. formVendorSelect.appendChild(opt);
  2001. });
  2002. const customOpt = document.createElement('option');
  2003. customOpt.value = '__custom__';
  2004. customOpt.textContent = '-- Write-in custom vendor --';
  2005. formVendorSelect.appendChild(customOpt);
  2006. }
  2008. // Dynamically populate summary table headers
  2009. const summaryTheadTr = document.getElementById('summary-thead-tr');
  2010. if (summaryTheadTr) {
  2011. let summaryHeadHtml = `
  2012. <th style="background-color: #f8fafc; color: #475569;">Total No of files</th>
  2013. <th style="background-color: #f0fdf4; color: #166534;">Completed Files</th>
  2014. <th style="background-color: #fef2f2; color: #991b1b;">Pending Files</th>
  2015. `;
  2016. summaryHeadHtml += `
  2017. <th style="background-color: #fafaf9; color: #44403c;">1 to 15 Days</th>
  2018. <th style="background-color: #fafaf9; color: #44403c;">16 to 30 Days</th>
  2019. <th style="background-color: #fafaf9; color: #44403c;">31 to 60 Days</th>
  2020. <th style="background-color: #fafaf9; color: #44403c;">61 to 90 Days</th>
  2021. <th style="background-color: #fafaf9; color: #44403c;">91 to 120 Days</th>
  2022. <th style="background-color: #fafaf9; color: #44403c;">Over 120 Days</th>
  2023. `;
  2024. summaryTheadTr.innerHTML = summaryHeadHtml;
  2025. }
  2027. // Dynamically populate vendor breakdown table headers
  2028. const vendorBreakdownTheadTr = document.getElementById('vendor-breakdown-thead-tr');
  2029. if (vendorBreakdownTheadTr) {
  2030. const completedStatuses = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed');
  2031. const nonCompletedStatuses = activeStatus.filter(s => getStatusKey(s.status_name) !== 'completed');
  2033. let vendorHeadHtml = `
  2034. <th style="text-align: left; background-color: #f8fafc;">Vendor Name</th>
  2035. <th style="background-color: #f8fafc;">Total No of files</th>
  2036. `;
  2037. completedStatuses.forEach(s => {
  2038. const style = getStatusStyle(s.status_name);
  2039. vendorHeadHtml += `<th style="background-color: ${style.bg}; color: ${style.text};">${escapeHtml(s.status_name)}</th>`;
  2040. });
  2042. // Custom Pending column header
  2043. vendorHeadHtml += `<th style="background-color: #fef2f2; color: #991b1b;">Pending files</th>`;
  2045. nonCompletedStatuses.forEach(s => {
  2046. const style = getStatusStyle(s.status_name);
  2047. vendorHeadHtml += `<th style="background-color: ${style.bg}; color: ${style.text};">${escapeHtml(s.status_name)}</th>`;
  2048. });
  2049. vendorHeadHtml += `
  2050. <th style="background-color: #fafaf9;">1 to 15 Days</th>
  2051. <th style="background-color: #fafaf9;">16 to 30 Days</th>
  2052. <th style="background-color: #fafaf9;">31 to 60 Days</th>
  2053. <th style="background-color: #fafaf9;">61 to 90 Days</th>
  2054. <th style="background-color: #fafaf9;">91 to 120 Days</th>
  2055. <th style="background-color: #fafaf9;">Over 120 Days</th>
  2056. `;
  2057. vendorBreakdownTheadTr.innerHTML = vendorHeadHtml;
  2058. }
  2059. }
  2061. // Helper to get status name by ID or fallback to status value
  2062. function getStatusName(statusVal) {
  2063. if (statusVal === null || statusVal === undefined || String(statusVal).trim() === '') {
  2064. return '-';
  2065. }
  2066. const cleanVal = String(statusVal).trim();
  2067. const statusObj = activeStatus.find(s => String(s.id) === cleanVal);
  2068. if (statusObj) {
  2069. return statusObj.status_name;
  2070. }
  2071. return statusVal;
  2072. }
  2074. // Show/hide loader overlay
  2075. function showLoader(show, text = 'Processing...') {
  2076. const overlay = document.getElementById('loading-overlay');
  2077. const overlayText = document.getElementById('loader-overlay-text');
  2078. overlayText.textContent = text;
  2079. if (show) {
  2080. overlay.classList.add('active');
  2081. } else {
  2082. overlay.classList.remove('active');
  2083. }
  2084. }
  2086. // Get CSRF details
  2087. function getCsrfHeaders() {
  2088. const csrfToken = document.querySelector("meta[name='_csrf']")?.getAttribute("content");
  2089. const csrfHeader = document.querySelector("meta[name='_csrf_header']")?.getAttribute("content");
  2090. const headers = {};
  2091. if (csrfToken && csrfHeader) {
  2092. headers[csrfHeader] = csrfToken;
  2093. }
  2094. return headers;
  2095. }
  2097. // Category count loaders
  2098. function loadCounts() {
  2099. fetch(contextPath + 'gccservicepaymenttracker/api/counts?_=' + new Date().getTime())
  2100. .then(response => response.json())
  2101. .then(data => {
  2102. document.getElementById('count-sd').textContent = data.sd || 0;
  2103. document.getElementById('count-invoice').textContent = data['tax invoice'] || 0;
  2104. document.getElementById('count-emd').textContent = data.emd || 0;
  2105. const bgEl = document.getElementById('count-bg');
  2106. if (bgEl) bgEl.textContent = data['bank guarantee'] || 0;
  2107. const dcEl = document.getElementById('count-dc');
  2108. if (dcEl) dcEl.textContent = data['delivery chellan'] || 0;
  2109. document.getElementById('count-asd').textContent = data.asd || 0;
  2110. document.getElementById('count-agreement').textContent = data.agreement || 0;
  2112. // Set total and Type Not Updated Files counts
  2113. const totalEl = document.getElementById('count-total');
  2114. if (totalEl) totalEl.textContent = data.total || 0;
  2115. const missingTypeEl = document.getElementById('count-status-not-updated');
  2116. if (missingTypeEl) missingTypeEl.textContent = data.status_not_updated || 0;
  2117. })
  2118. .catch(err => console.error("Error loading category counts:", err));
  2119. }
  2121. // Handles select change of card
  2122. function selectCategory(category, cardElement) {
  2123. const isActive = cardElement.classList.contains('active');
  2125. // Remove active class from all
  2126. document.querySelectorAll('.category-card').forEach(el => el.classList.remove('active'));
  2128. const filterTypeSelect = document.getElementById('filter-type');
  2130. if (isActive) {
  2131. activeCategory = 'all';
  2132. document.getElementById('active-category-badge').textContent = 'Type: All Types';
  2133. if (filterTypeSelect) {
  2134. filterTypeSelect.value = 'all';
  2135. }
  2136. } else {
  2137. cardElement.classList.add('active');
  2138. activeCategory = category;
  2140. if (filterTypeSelect) {
  2141. filterTypeSelect.value = category;
  2142. }
  2144. // Update badge text
  2145. const labels = {
  2146. 'sd': 'Security Deposit',
  2147. 'tax invoice': 'Tax Invoice',
  2148. 'emd': 'EMD',
  2149. 'asd': 'ASD',
  2150. 'agreement': 'Agreement'
  2151. };
  2152. document.getElementById('active-category-badge').textContent = 'Type: ' + (labels[category] || category);
  2153. }
  2155. // Refresh list
  2156. loadList();
  2158. // Smoothly scroll down to the table card
  2159. document.querySelector('.table-card')?.scrollIntoView({ behavior: 'smooth' });
  2160. }
  2162. // Loading and Rendering list data
  2163. function loadList() {
  2164. showLoader(true, 'Loading payment tracking details...');
  2166. const statusVal = document.getElementById('filter-status').value;
  2167. const searchVal = document.getElementById('search-text').value;
  2169. // Sync search-text to table-search when hitting main filter search
  2170. const tblSearch = document.getElementById('table-search');
  2171. if (tblSearch) {
  2172. tblSearch.value = searchVal;
  2173. }
  2175. // Build query params
  2176. const params = new URLSearchParams();
  2177. if (activeCategory && activeCategory !== 'all') {
  2178. params.append('category', activeCategory);
  2179. }
  2181. if (statusVal) params.append('status', statusVal);
  2183. // Add cache buster
  2184. params.append('_', new Date().getTime());
  2186. fetch(contextPath + 'gccservicepaymenttracker/api/list?' + params.toString())
  2187. .then(response => response.json())
  2188. .then(data => {
  2189. allRecords = data;
  2190. currentPage = 1;
  2191. clearClickFilter(null);
  2192. calculateSummaries();
  2193. renderTable();
  2194. updateLatestUpdateBadge();
  2195. if (document.getElementById('countDetailsModal')?.classList.contains('show')) {
  2196. applyModalFilters();
  2197. }
  2198. })
  2199. .catch(err => {
  2200. console.error("Error loading details:", err);
  2201. showLoader(false);
  2202. });
  2203. }
  2205. function renderTable() {
  2206. const tbody = document.getElementById('tracking-tbody');
  2207. const noRecords = document.getElementById('no-records-found');
  2208. tbody.innerHTML = '';
  2210. const searchVal = document.getElementById('table-search')?.value || '';
  2211. let query = searchVal.toLowerCase().trim();
  2213. let filtered = allRecords.filter(row => {
  2214. // Apply activeClickFilter if set
  2215. if (activeClickFilter) {
  2216. const age = parseInt(calculateAgeOfBill(row.received_date), 10);
  2217. const status = String(row.resolved_status || getStatusName(row.status) || '').trim();
  2218. const vendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  2220. if (activeClickFilter.type === 'status') {
  2221. const filterVal = String(activeClickFilter.value);
  2222. const matched = activeStatus.find(s => String(s.id) === filterVal);
  2223. if (matched) {
  2224. const rowStatusStr = String(row.status || '').trim();
  2225. const matches = rowStatusStr === String(matched.id) ||
  2226. rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
  2227. if (!matches) return false;
  2228. } else {
  2229. if (status.toLowerCase() !== filterVal.toLowerCase()) return false;
  2230. }
  2231. } else if (activeClickFilter.type === 'age') {
  2232. const [min, max] = activeClickFilter.value;
  2233. if (max !== null) {
  2234. if (age < min || age > max) return false;
  2235. } else {
  2236. if (age < min) return false;
  2237. }
  2238. } else if (activeClickFilter.type === 'vendor') {
  2239. if (vendor !== activeClickFilter.vendorName) return false;
  2241. if (activeClickFilter.col) {
  2242. if (activeClickFilter.col.match(/^[0-9]+$/)) {
  2243. const matched = activeStatus.find(s => String(s.id) === activeClickFilter.col);
  2244. if (matched) {
  2245. const rowStatusStr = String(row.status || '').trim();
  2246. const rowMatches = rowStatusStr === String(matched.id) ||
  2247. rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
  2248. if (!rowMatches) return false;
  2249. }
  2250. } else {
  2251. if (activeClickFilter.col === 'completed' && status.toLowerCase() !== 'completed') return false;
  2252. if (activeClickFilter.col === 'awaiting' && status.toLowerCase() !== 'awaiting details') return false;
  2253. if (activeClickFilter.col === 'pending_dept' && status.toLowerCase() !== 'pending with dept') return false;
  2255. if (activeClickFilter.col === 'age_1_15' && (age < 1 || age > 15)) return false;
  2256. if (activeClickFilter.col === 'age_16_30' && (age < 16 || age > 30)) return false;
  2257. if (activeClickFilter.col === 'age_31_60' && (age < 31 || age > 60)) return false;
  2258. if (activeClickFilter.col === 'age_61_90' && (age < 61 || age > 90)) return false;
  2259. if (activeClickFilter.col === 'age_91_120' && (age < 91 || age > 120)) return false;
  2260. if (activeClickFilter.col === 'age_over_120' && age <= 120) return false;
  2261. }
  2262. }
  2263. }
  2264. }
  2266. if (!query) return true;
  2267. const vName = String(row.resolved_vendor || row.vendor_name || '').toLowerCase();
  2268. const tName = String(row.resolved_type || row.type || '').toLowerCase();
  2269. const statusName = String(row.resolved_status || getStatusName(row.status) || '').toLowerCase();
  2270. return (
  2271. vName.includes(query) ||
  2272. tName.includes(query) ||
  2273. (row.subject && String(row.subject).toLowerCase().includes(query)) ||
  2274. (row.amount && String(row.amount).toLowerCase().includes(query)) ||
  2275. (row.invoice_no && String(row.invoice_no).toLowerCase().includes(query)) ||
  2276. (row.receiptno && String(row.receiptno).toLowerCase().includes(query)) ||
  2277. (row.physical_file_no && String(row.physical_file_no).toLowerCase().includes(query)) ||
  2278. (row.remarks && String(row.remarks).toLowerCase().includes(query)) ||
  2279. (row.tat && String(row.tat).toLowerCase().includes(query)) ||
  2280. statusName.includes(query)
  2281. );
  2282. });
  2284. currentFilteredRecords = filtered;
  2286. showLoader(false);
  2288. const totalRecords = filtered.length;
  2289. if (totalRecords === 0) {
  2290. noRecords.style.display = 'block';
  2291. document.getElementById('pagination-info').textContent = 'Showing 0 to 0 of 0 entries';
  2292. document.getElementById('pagination-controls').innerHTML = '';
  2293. return;
  2294. }
  2296. noRecords.style.display = 'none';
  2298. // Paginate
  2299. const totalPages = Math.ceil(totalRecords / pageSize);
  2300. if (currentPage > totalPages) {
  2301. currentPage = totalPages;
  2302. }
  2303. if (currentPage < 1) {
  2304. currentPage = 1;
  2305. }
  2307. const startIndex = (currentPage - 1) * pageSize;
  2308. const endIndex = Math.min(startIndex + pageSize, totalRecords);
  2309. const paginatedData = filtered.slice(startIndex, endIndex);
  2311. // Update Pagination Info
  2312. document.getElementById('pagination-info').textContent =
  2313. `Showing ${startIndex + 1} to ${endIndex} of ${totalRecords} entries`;
  2315. paginatedData.forEach((row, pageIndex) => {
  2316. const globalIndex = startIndex + pageIndex;
  2317. const tr = document.createElement('tr');
  2319. // S.No
  2320. const tdIndex = document.createElement('td');
  2321. tdIndex.className = 'text-center fw-semibold text-secondary';
  2322. tdIndex.textContent = globalIndex + 1;
  2323. tr.appendChild(tdIndex);
  2325. // Helper for blank values
  2326. const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
  2328. // Format Dates (yyyy-MM-dd to dd/MM/yyyy)
  2329. const formatDate = dateStr => {
  2330. if (!dateStr) return '-';
  2331. const parts = dateStr.split('-');
  2332. if (parts.length === 3) {
  2333. return `${parts[2]}/${parts[1]}/${parts[0]}`;
  2334. }
  2335. return dateStr;
  2336. };
  2338. // Format Date-Times (yyyy-MM-ddTHH:mm:ss... to dd/MM/yyyy HH:mm:ss)
  2339. const formatDateTime = dateTimeStr => {
  2340. if (!dateTimeStr) return '-';
  2341. try {
  2342. const d = new Date(dateTimeStr);
  2343. if (!isNaN(d.getTime())) {
  2344. const dd = String(d.getDate()).padStart(2, '0');
  2345. const MM = String(d.getMonth() + 1).padStart(2, '0');
  2346. const yyyy = d.getFullYear();
  2347. const HH = String(d.getHours()).padStart(2, '0');
  2348. const mm = String(d.getMinutes()).padStart(2, '0');
  2349. const ss = String(d.getSeconds()).padStart(2, '0');
  2350. return `${dd}/${MM}/${yyyy} ${HH}:${mm}:${ss}`;
  2351. }
  2352. } catch (e) {
  2353. console.error(e);
  2354. }
  2355. return dateTimeStr;
  2356. };
  2360. const getTypeBadge = (typeVal, filePath) => {
  2361. const cleanType = String(typeVal || '').trim().toLowerCase();
  2362. let label = cleanType;
  2363. let badgeClass = 'type-sd';
  2365. if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
  2366. label = 'ASD';
  2367. badgeClass = 'type-asd';
  2368. } else if (cleanType.includes('agreement')) {
  2369. label = 'Agreement';
  2370. badgeClass = 'type-agreement';
  2371. } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
  2372. label = 'Security Deposit';
  2373. badgeClass = 'type-sd';
  2374. } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
  2375. label = 'Tax Invoice';
  2376. badgeClass = 'type-tax-invoice';
  2377. } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
  2378. label = 'EMD';
  2379. badgeClass = 'type-emd';
  2380. } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
  2381. label = 'Bank Guarantee';
  2382. badgeClass = 'type-bank-guarantee';
  2383. } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
  2384. label = 'Delivery Chellan';
  2385. badgeClass = 'type-delivery-chellan';
  2386. } else {
  2387. // Fallback: check if cleanType is a numeric ID from activeTypes
  2388. const typeObj = activeTypes.find(t => String(t.id) === cleanType);
  2389. if (typeObj) {
  2390. return getTypeBadge(typeObj.type_name, filePath);
  2391. }
  2392. label = typeVal || '-';
  2393. badgeClass = 'status-default';
  2394. }
  2396. let onClickAttr = '';
  2397. if (filePath) {
  2398. let pdfUrl = filePath;
  2399. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  2400. pdfUrl = contextPath + pdfUrl.substring(1);
  2401. } else {
  2402. pdfUrl = contextPath + pdfUrl;
  2403. }
  2404. onClickAttr = `onclick="window.open('${escapeHtml(pdfUrl)}', '_blank')"`;
  2405. } else {
  2406. onClickAttr = `onclick="alert('pdf file not uploaded')"`;
  2407. }
  2409. return `<span class="type-badge ${badgeClass} cursor-pointer" ${onClickAttr} style="cursor: pointer;" title="${filePath ? 'Click to view PDF' : 'PDF not uploaded'}">${label}</span>`;
  2410. };
  2412. const dispStatus = String(row.resolved_status || getStatusName(row.status) || '').trim();
  2414. tr.innerHTML += `
  2415. <td>${formatDate(row.received_date)}</td>
  2416. <td>${formatDate(row.invoice_date)}</td>
  2417. <td>${text(row.physical_file_no)}</td>
  2418. <td>${text(row.receiptno)}</td>
  2419. <td>${text(row.subject)}</td>
  2420. <td>${getTypeBadge(row.resolved_type || row.type, row.file_path)}</td>
  2421. <td class="fw-semibold text-secondary">${text(row.resolved_vendor || row.vendor_name)}</td>
  2422. <td class="fw-semibold text-dark">&#8377; ${text(row.amount)}</td>
  2423. <td>${calculateAgeOfBill(row.received_date)}</td>
  2424. <td><span class="status-badge status-${dispStatus.toLowerCase().replace(/\s+/g, '-')}">${text(dispStatus)}</span></td>
  2425. <td><small class="text-muted">${text(row.remarks)}</small></td>
  2426. <td>${formatDateTime(row.updated_date)}</td>
  2427. <td class="fw-semibold text-secondary">${text(row.updated_by_name || '-')}</td>
  2428. `;
  2430. // Actions cell
  2431. const tdActions = document.createElement('td');
  2432. tdActions.className = 'text-center';
  2434. if (row.file_path) {
  2435. const btnViewPdf = document.createElement('button');
  2436. btnViewPdf.className = 'btn-grid-action btn-grid-pdf me-1';
  2437. btnViewPdf.innerHTML = '<i class="fa-solid fa-file-pdf"></i>';
  2438. btnViewPdf.title = 'View PDF Document';
  2439. btnViewPdf.onclick = () => {
  2440. let pdfUrl = row.file_path;
  2441. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  2442. pdfUrl = contextPath + pdfUrl.substring(1);
  2443. } else {
  2444. pdfUrl = contextPath + pdfUrl;
  2445. }
  2446. window.open(pdfUrl, '_blank');
  2447. };
  2448. tdActions.appendChild(btnViewPdf);
  2449. }
  2451. // History Button (Available to all logged in users)
  2452. const btnHistory = document.createElement('button');
  2453. btnHistory.className = 'btn-grid-action btn-outline-secondary me-1';
  2454. btnHistory.innerHTML = '<i class="fa-solid fa-clock-rotate-left"></i>';
  2455. btnHistory.style.border = '1px solid #cbd5e1';
  2456. btnHistory.title = 'View Update History';
  2457. btnHistory.onclick = () => showHistoryModal(row.id);
  2458. tdActions.appendChild(btnHistory);
  2460. if (isAdmin) {
  2461. const btnEdit = document.createElement('button');
  2462. btnEdit.className = 'btn-grid-action btn-grid-edit me-1';
  2463. btnEdit.innerHTML = '<i class="fa-solid fa-pen-to-square"></i>';
  2464. btnEdit.title = 'Edit Record';
  2465. btnEdit.onclick = () => openEditModal(row);
  2467. const btnDelete = document.createElement('button');
  2468. btnDelete.className = 'btn-grid-action btn-grid-delete';
  2469. btnDelete.innerHTML = '<i class="fa-solid fa-trash-can"></i>';
  2470. btnDelete.title = 'Delete Record';
  2471. btnDelete.onclick = () => deleteRecord(row.id);
  2473. tdActions.appendChild(btnEdit);
  2474. tdActions.appendChild(btnDelete);
  2475. }
  2476. tr.appendChild(tdActions);
  2478. tbody.appendChild(tr);
  2479. });
  2481. // Rebuild Pagination Controls
  2482. buildPaginationControls(totalPages);
  2483. }
  2485. function buildPaginationControls(totalPages) {
  2486. const container = document.getElementById('pagination-controls');
  2487. container.innerHTML = '';
  2489. if (totalPages <= 1) {
  2490. return;
  2491. }
  2493. // Previous Button
  2494. const prevLi = document.createElement('li');
  2495. prevLi.className = 'page-item' + (currentPage === 1 ? ' disabled' : '');
  2496. prevLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${currentPage - 1})">Previous</a>`;
  2497. container.appendChild(prevLi);
  2499. // Page numbers
  2500. const maxVisible = 5;
  2501. let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
  2502. let endPage = Math.min(totalPages, startPage + maxVisible - 1);
  2504. if (endPage - startPage + 1 < maxVisible) {
  2505. startPage = Math.max(1, endPage - maxVisible + 1);
  2506. }
  2508. if (startPage > 1) {
  2509. const firstLi = document.createElement('li');
  2510. firstLi.className = 'page-item';
  2511. firstLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(1)">1</a>`;
  2512. container.appendChild(firstLi);
  2514. if (startPage > 2) {
  2515. const dotsLi = document.createElement('li');
  2516. dotsLi.className = 'page-item disabled';
  2517. dotsLi.innerHTML = `<span class="page-link">...</span>`;
  2518. container.appendChild(dotsLi);
  2519. }
  2520. }
  2522. for (let i = startPage; i <= endPage; i++) {
  2523. const pageLi = document.createElement('li');
  2524. pageLi.className = 'page-item' + (i === currentPage ? ' active' : '');
  2525. pageLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${i})">${i}</a>`;
  2526. container.appendChild(pageLi);
  2527. }
  2529. if (endPage < totalPages) {
  2530. if (endPage < totalPages - 1) {
  2531. const dotsLi = document.createElement('li');
  2532. dotsLi.className = 'page-item disabled';
  2533. dotsLi.innerHTML = `<span class="page-link">...</span>`;
  2534. container.appendChild(dotsLi);
  2535. }
  2537. const lastLi = document.createElement('li');
  2538. lastLi.className = 'page-item';
  2539. lastLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${totalPages})">${totalPages}</a>`;
  2540. container.appendChild(lastLi);
  2541. }
  2543. // Next Button
  2544. const nextLi = document.createElement('li');
  2545. nextLi.className = 'page-item' + (currentPage === totalPages ? ' disabled' : '');
  2546. nextLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${currentPage + 1})">Next</a>`;
  2547. container.appendChild(nextLi);
  2548. }
  2550. function goToPage(page) {
  2551. currentPage = page;
  2552. renderTable();
  2553. }
  2555. function changePageSize(size) {
  2556. pageSize = parseInt(size, 10);
  2557. currentPage = 1;
  2558. renderTable();
  2559. }
  2561. // Handles search in local table search input
  2562. function handleTableSearch(keyword) {
  2563. const filterSearch = document.getElementById('search-text');
  2564. if (filterSearch) {
  2565. filterSearch.value = keyword;
  2566. }
  2567. currentPage = 1;
  2568. renderTable();
  2569. }
  2571. function handleSearchInput(keyword) {
  2572. const tblSearch = document.getElementById('table-search');
  2573. if (tblSearch) {
  2574. tblSearch.value = keyword;
  2575. }
  2576. currentPage = 1;
  2577. renderTable();
  2578. }
  2580. function handleTypeFilterChange(category) {
  2581. activeCategory = category;
  2583. // Remove active class from all top cards
  2584. document.querySelectorAll('.category-card').forEach(el => el.classList.remove('active'));
  2586. if (category !== 'all') {
  2587. const classMap = {
  2588. 'sd': 'card-sd',
  2589. 'tax invoice': 'card-invoice',
  2590. 'emd': 'card-emd',
  2591. 'asd': 'card-asd',
  2592. 'agreement': 'card-agreement'
  2593. };
  2594. const cardClass = classMap[category];
  2595. if (cardClass) {
  2596. const cardElement = document.querySelector('.' + cardClass);
  2597. if (cardElement) {
  2598. cardElement.classList.add('active');
  2599. }
  2600. }
  2602. const labels = {
  2603. 'sd': 'Security Deposit',
  2604. 'tax invoice': 'Tax Invoice',
  2605. 'emd': 'EMD',
  2606. 'asd': 'ASD',
  2607. 'agreement': 'Agreement'
  2608. };
  2609. document.getElementById('active-category-badge').textContent = 'Type: ' + (labels[category] || category);
  2610. } else {
  2611. document.getElementById('active-category-badge').textContent = 'Type: All Types';
  2612. }
  2614. loadList();
  2615. }
  2617. function resetFilters() {
  2618. document.getElementById('filter-status').value = '';
  2619. document.getElementById('search-text').value = '';
  2621. const filterType = document.getElementById('filter-type');
  2622. if (filterType) {
  2623. filterType.value = 'all';
  2624. }
  2626. activeCategory = 'all';
  2627. document.querySelectorAll('.category-card').forEach(el => el.classList.remove('active'));
  2628. document.getElementById('active-category-badge').textContent = 'Type: All Types';
  2630. const tblSearch = document.getElementById('table-search');
  2631. if (tblSearch) {
  2632. tblSearch.value = '';
  2633. }
  2634. currentPage = 1;
  2635. loadList();
  2636. }
  2638. // Toggle text field for dynamic vendor select dropdown
  2639. function toggleCustomVendor() {
  2640. const select = document.getElementById('form-vendor-select');
  2641. const customInput = document.getElementById('form-vendor-custom');
  2642. if (select.value === '__custom__') {
  2643. customInput.style.display = 'block';
  2644. customInput.required = true;
  2645. } else {
  2646. customInput.style.display = 'none';
  2647. customInput.required = false;
  2648. customInput.value = '';
  2649. }
  2650. }
  2652. // Edit/Add Modals
  2653. function openAddModal() {
  2654. document.getElementById('recordModalLabel').innerHTML = '<i class="fa-solid fa-circle-plus"></i> Add Payment Tracking Record';
  2655. document.getElementById('recordForm').reset();
  2656. document.getElementById('form-id').value = '';
  2658. // Set type to active category by default
  2659. const formTypeSelect = document.getElementById('form-type');
  2660. formTypeSelect.value = '';
  2661. if (activeCategory && activeCategory !== 'all') {
  2662. for (let option of formTypeSelect.options) {
  2663. if (option.value) {
  2664. const typeObj = activeTypes.find(t => String(t.id) === String(option.value));
  2665. if (typeObj && getCategoryCode(typeObj.type_name) === activeCategory) {
  2666. formTypeSelect.value = option.value;
  2667. break;
  2668. }
  2669. }
  2670. }
  2671. }
  2672. const pendingObj = activeStatus.find(s => s.status_name.toLowerCase().trim() === 'pending');
  2673. document.getElementById('form-status').value = pendingObj ? String(pendingObj.id) : '';
  2675. document.getElementById('form-vendor-custom').style.display = 'none';
  2676. document.getElementById('form-vendor-custom').required = false;
  2678. // Reset PDF upload elements
  2679. document.getElementById('form-pdf').value = '';
  2680. document.getElementById('form-existing-pdf-container').style.display = 'none';
  2682. recordModalObj.show();
  2683. }
  2685. function openEditModal(row) {
  2686. document.getElementById('recordModalLabel').innerHTML = '<i class="fa-solid fa-file-signature"></i> Edit Payment Tracking Record';
  2687. document.getElementById('recordForm').reset();
  2689. document.getElementById('form-id').value = row.id;
  2690. document.getElementById('form-received-date').value = row.received_date || '';
  2692. // Set type select
  2693. const typeSelect = document.getElementById('form-type');
  2694. const rowType = String(row.type || '').trim().toLowerCase();
  2695. typeSelect.value = '';
  2697. let found = false;
  2698. for (let option of typeSelect.options) {
  2699. if (option.value && String(option.value) === String(row.type)) {
  2700. typeSelect.value = option.value;
  2701. found = true;
  2702. break;
  2703. }
  2704. }
  2706. if (!found && rowType) {
  2707. const legacyCategory = getCategoryCode(rowType);
  2708. for (let option of typeSelect.options) {
  2709. if (option.value) {
  2710. const typeObj = activeTypes.find(t => String(t.id) === String(option.value));
  2711. if (typeObj) {
  2712. const optCategory = getCategoryCode(typeObj.type_name);
  2713. if (optCategory === legacyCategory) {
  2714. typeSelect.value = option.value;
  2715. found = true;
  2716. break;
  2717. }
  2718. }
  2719. }
  2720. }
  2721. }
  2723. document.getElementById('form-subject').value = row.subject || '';
  2724. document.getElementById('form-amount').value = row.amount || '';
  2725. document.getElementById('form-invoice-no').value = row.invoice_no || '';
  2727. document.getElementById('form-receiptno').value = row.receiptno || '';
  2729. document.getElementById('form-invoice-date').value = row.invoice_date || '';
  2730. document.getElementById('form-physical-file-no').value = row.physical_file_no || '';
  2731. const tatEl = document.getElementById('form-tat');
  2732. if (tatEl) tatEl.value = row.tat || '';
  2734. const statusSelect = document.getElementById('form-status');
  2735. const rowStatus = String(row.status || '').trim();
  2736. statusSelect.value = '';
  2738. let statusFound = false;
  2739. // 1. Try matching by option value (which can be ID or exact string match)
  2740. for (let option of statusSelect.options) {
  2741. if (option.value && String(option.value).toLowerCase() === rowStatus.toLowerCase()) {
  2742. statusSelect.value = option.value;
  2743. statusFound = true;
  2744. break;
  2745. }
  2746. }
  2748. // 2. Try matching by option text content (which is the status name)
  2749. if (!statusFound && rowStatus) {
  2750. for (let option of statusSelect.options) {
  2751. if (option.text && option.text.toLowerCase().trim() === rowStatus.toLowerCase().trim()) {
  2752. statusSelect.value = option.value;
  2753. statusFound = true;
  2754. break;
  2755. }
  2756. }
  2757. }
  2759. // Fallback default
  2760. if (!statusFound) {
  2761. const pendingObj = activeStatus.find(s => s.status_name.toLowerCase().trim() === 'pending');
  2762. statusSelect.value = pendingObj ? String(pendingObj.id) : '';
  2763. }
  2764. const followupEl = document.getElementById('form-followup');
  2765. if (followupEl) followupEl.value = row.followup || '';
  2766. const myfollowupEl = document.getElementById('form-myfollowup');
  2767. if (myfollowupEl) myfollowupEl.value = row.myfollowup || '';
  2768. const orderbyEl = document.getElementById('form-orderby');
  2769. if (orderbyEl) orderbyEl.value = row.order_by || '';
  2770. document.getElementById('form-remarks').value = row.remarks || '';
  2772. // Set vendor select (using ID or legacy fallback/custom)
  2773. const select = document.getElementById('form-vendor-select');
  2774. const vendorVal = String(row.vendor_name || '').trim();
  2775. select.value = '';
  2776. document.getElementById('form-vendor-custom').style.display = 'none';
  2777. document.getElementById('form-vendor-custom').required = false;
  2778. document.getElementById('form-vendor-custom').value = '';
  2780. if (vendorVal) {
  2781. let optionFound = false;
  2782. for (let option of select.options) {
  2783. if (option.value && option.value !== '__custom__' && String(option.value) === vendorVal) {
  2784. select.value = option.value;
  2785. optionFound = true;
  2786. break;
  2787. }
  2788. }
  2790. if (!optionFound) {
  2791. const matchedVendor = activeVendors.find(v => String(v.vendor_name).toLowerCase().trim() === vendorVal.toLowerCase());
  2792. if (matchedVendor) {
  2793. select.value = String(matchedVendor.id);
  2794. optionFound = true;
  2795. }
  2796. }
  2798. if (!optionFound) {
  2799. select.value = '__custom__';
  2800. const customInput = document.getElementById('form-vendor-custom');
  2801. customInput.style.display = 'block';
  2802. customInput.required = true;
  2803. customInput.value = row.vendor_name;
  2804. }
  2805. }
  2807. // Populate/Reset PDF elements
  2808. document.getElementById('form-pdf').value = '';
  2809. const existingPdfContainer = document.getElementById('form-existing-pdf-container');
  2810. const existingPdfLink = document.getElementById('form-existing-pdf-link');
  2811. if (row.file_path) {
  2812. existingPdfContainer.style.display = 'block';
  2813. let pdfUrl = row.file_path;
  2814. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  2815. pdfUrl = contextPath + pdfUrl.substring(1);
  2816. } else {
  2817. pdfUrl = contextPath + pdfUrl;
  2818. }
  2819. existingPdfLink.href = pdfUrl;
  2820. } else {
  2821. existingPdfContainer.style.display = 'none';
  2822. }
  2824. recordModalObj.show();
  2825. }
  2827. // SAVE Record API call
  2828. async function saveRecord(event) {
  2829. event.preventDefault();
  2830. showLoader(true, 'Saving record details...');
  2832. const id = document.getElementById('form-id').value;
  2833. const received_date = document.getElementById('form-received-date').value;
  2834. const type = document.getElementById('form-type').value;
  2835. const subject = document.getElementById('form-subject').value;
  2836. const amount = document.getElementById('form-amount').value;
  2837. const invoice_no = document.getElementById('form-invoice-no').value;
  2838. const receiptno = document.getElementById('form-receiptno').value;
  2839. const invoice_date = document.getElementById('form-invoice-date').value;
  2840. const physical_file_no = document.getElementById('form-physical-file-no').value;
  2841. const tatEl = document.getElementById('form-tat');
  2842. const tat = tatEl ? tatEl.value : '';
  2843. const status = document.getElementById('form-status').value;
  2844. // Preserve original values if they were loaded in edit mode
  2845. let originalRecord = null;
  2846. if (id) {
  2847. originalRecord = allRecords.find(r => String(r.id) === String(id));
  2848. }
  2849. const followupEl = document.getElementById('form-followup');
  2850. const followup = followupEl ? followupEl.value : (originalRecord ? originalRecord.followup : '');
  2851. const myfollowupEl = document.getElementById('form-myfollowup');
  2852. const myfollowup = myfollowupEl ? myfollowupEl.value : (originalRecord ? originalRecord.myfollowup : '');
  2853. const orderbyEl = document.getElementById('form-orderby');
  2854. const order_by = orderbyEl ? orderbyEl.value : (originalRecord ? originalRecord.order_by : '');
  2855. const remarks = document.getElementById('form-remarks').value;
  2857. // Resolve vendor
  2858. const vendorSelect = document.getElementById('form-vendor-select').value;
  2859. const vendorName = vendorSelect === '__custom__' ? document.getElementById('form-vendor-custom').value : vendorSelect;
  2861. if (!vendorName) {
  2862. alert('Please select or specify a vendor.');
  2863. showLoader(false);
  2864. return;
  2865. }
  2867. // Upload PDF if selected
  2868. let filePath = originalRecord ? originalRecord.file_path : null;
  2869. const pdfInput = document.getElementById('form-pdf');
  2870. if (pdfInput && pdfInput.files && pdfInput.files.length > 0) {
  2871. showLoader(true, 'Uploading PDF document...');
  2872. const formData = new FormData();
  2873. formData.append('file', pdfInput.files[0]);
  2875. const csrfHeaders = getCsrfHeaders();
  2876. try {
  2877. const uploadResponse = await fetch(contextPath + 'gccservicepaymenttracker/api/upload-pdf', {
  2878. method: 'POST',
  2879. headers: {
  2880. ...csrfHeaders
  2881. },
  2882. body: formData
  2883. });
  2884. const uploadResult = await uploadResponse.json();
  2885. if (uploadResult.success) {
  2886. filePath = uploadResult.filePath;
  2887. } else {
  2888. alert(uploadResult.error || 'Failed to upload PDF file.');
  2889. showLoader(false);
  2890. return;
  2891. }
  2892. } catch (err) {
  2893. console.error("Upload error:", err);
  2894. alert("Failed to upload PDF due to connection error.");
  2895. showLoader(false);
  2896. return;
  2897. }
  2898. }
  2900. const payload = {
  2901. id, received_date, type, vendor_name: vendorName, subject, amount, invoice_no,
  2902. receiptno, invoice_date, physical_file_no, tat, status, followup,
  2903. myfollowup, order_by, remarks, file_path: filePath
  2904. };
  2906. const csrfHeaders = getCsrfHeaders();
  2907. const headers = {
  2908. 'Content-Type': 'application/json',
  2909. ...csrfHeaders
  2910. };
  2912. try {
  2913. showLoader(true, 'Saving record details...');
  2914. const response = await fetch(contextPath + 'gccservicepaymenttracker/api/save', {
  2915. method: 'POST',
  2916. headers: headers,
  2917. body: JSON.stringify(payload)
  2918. });
  2919. const data = await response.json();
  2920. if (data.success) {
  2921. recordModalObj.hide();
  2922. loadCounts();
  2923. loadList();
  2924. } else {
  2925. alert(data.error || 'Failed to save record.');
  2926. showLoader(false);
  2927. }
  2928. } catch (err) {
  2929. console.error("Save Error:", err);
  2930. alert("Failed to save record due to connection error.");
  2931. showLoader(false);
  2932. }
  2933. }
  2935. // Calculate age of bill (days) dynamically from received date
  2936. function calculateAgeOfBill(receivedDateStr) {
  2937. if (!receivedDateStr) return '0';
  2938. try {
  2939. const recDate = new Date(receivedDateStr);
  2940. if (isNaN(recDate.getTime())) return '0';
  2941. recDate.setHours(0, 0, 0, 0);
  2943. const today = new Date();
  2944. today.setHours(0, 0, 0, 0);
  2946. const graceDate = new Date(recDate);
  2947. graceDate.setDate(graceDate.getDate());
  2949. if (today <= graceDate) {
  2950. return '0';
  2951. } else {
  2952. const diffTime = today.getTime() - graceDate.getTime();
  2953. const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
  2954. return String(diffDays);
  2955. }
  2956. } catch (e) {
  2957. console.error("Error calculating age of bill:", e);
  2958. return '0';
  2959. }
  2960. }
  2962. // --- NEW METRICS & INTERACTIVE CLICK FILTER LOGIC ---
  2963. function calculateSummaries() {
  2964. let total = allRecords.length;
  2966. // Dynamic Status Counts Map
  2967. const statusCounts = {};
  2968. activeStatus.forEach(s => {
  2969. statusCounts[s.id] = 0;
  2970. });
  2972. let age_1_15 = 0;
  2973. let age_16_30 = 0;
  2974. let age_31_60 = 0;
  2975. let age_61_90 = 0;
  2976. let age_91_120 = 0;
  2977. let age_over_120 = 0;
  2979. const vendorMap = {};
  2981. allRecords.forEach(row => {
  2982. const statusName = String(row.resolved_status || getStatusName(row.status) || '').trim();
  2983. const statusVal = String(row.status || '').trim();
  2985. // Find matching status in activeStatus (either by ID or legacy name)
  2986. const matchedStatus = activeStatus.find(s =>
  2987. String(s.id) === statusVal ||
  2988. s.status_name.toLowerCase().trim() === statusName.toLowerCase().trim()
  2989. );
  2990. const statusId = matchedStatus ? matchedStatus.id : null;
  2991. const isCompleted = matchedStatus && getStatusKey(matchedStatus.status_name) === 'completed';
  2993. const age = parseInt(calculateAgeOfBill(row.received_date), 10);
  2994. const vendorName = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  2996. if (statusId !== null) {
  2997. statusCounts[statusId] = (statusCounts[statusId] || 0) + 1;
  2998. }
  3000. if (!isCompleted) {
  3001. if (age >= 1 && age <= 15) age_1_15++;
  3002. else if (age >= 16 && age <= 30) age_16_30++;
  3003. else if (age >= 31 && age <= 60) age_31_60++;
  3004. else if (age >= 61 && age <= 90) age_61_90++;
  3005. else if (age >= 91 && age <= 120) age_91_120++;
  3006. else if (age > 120) age_over_120++;
  3007. }
  3009. if (!vendorMap[vendorName]) {
  3010. vendorMap[vendorName] = {
  3011. vendorName: vendorName,
  3012. total: 0,
  3013. statusCounts: {}, // Map status ID to count
  3014. age_1_15: 0,
  3015. age_16_30: 0,
  3016. age_31_60: 0,
  3017. age_61_90: 0,
  3018. age_91_120: 0,
  3019. age_over_120: 0,
  3020. comp_age_1_15: 0,
  3021. comp_age_16_30: 0,
  3022. comp_age_31_60: 0,
  3023. comp_age_61_90: 0,
  3024. comp_age_91_120: 0,
  3025. comp_age_over_120: 0
  3026. };
  3027. activeStatus.forEach(s => {
  3028. vendorMap[vendorName].statusCounts[s.id] = 0;
  3029. });
  3030. }
  3032. const vData = vendorMap[vendorName];
  3033. vData.total++;
  3034. if (statusId !== null) {
  3035. vData.statusCounts[statusId] = (vData.statusCounts[statusId] || 0) + 1;
  3036. }
  3038. if (isCompleted) {
  3039. if (age >= 1 && age <= 15) vData.comp_age_1_15++;
  3040. else if (age >= 16 && age <= 30) vData.comp_age_16_30++;
  3041. else if (age >= 31 && age <= 60) vData.comp_age_31_60++;
  3042. else if (age >= 61 && age <= 90) vData.comp_age_61_90++;
  3043. else if (age >= 91 && age <= 120) vData.comp_age_91_120++;
  3044. else if (age > 120) vData.comp_age_over_120++;
  3045. } else {
  3046. if (age >= 1 && age <= 15) vData.age_1_15++;
  3047. else if (age >= 16 && age <= 30) vData.age_16_30++;
  3048. else if (age >= 31 && age <= 60) vData.age_31_60++;
  3049. else if (age >= 61 && age <= 90) vData.age_61_90++;
  3050. else if (age >= 91 && age <= 120) vData.age_91_120++;
  3051. else if (age > 120) vData.age_over_120++;
  3052. }
  3053. });
  3054. let completedTotal = 0;
  3055. const completedStatuses = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed');
  3056. completedStatuses.forEach(s => {
  3057. completedTotal += (statusCounts[s.id] || 0);
  3058. });
  3060. const pendingTotal = total - completedTotal;
  3062. let summaryBodyHtml = `
  3063. <td id="summary-total" class="cursor-pointer text-primary" style="background-color: #f8fafc;" onclick="openModalForCount('total', null, 'Total No of files')">${total}</td>
  3064. <td id="summary-completed" class="cursor-pointer text-success" onclick="openModalForCount('completed_custom', null, 'Completed Files')">${completedTotal}</td>
  3065. <td id="summary-pending" class="cursor-pointer text-danger" style="color: #991b1b; font-weight: bold;" onclick="openModalForCount('pending_custom', null, 'Pending Files')">${pendingTotal}</td>
  3066. `;
  3067. summaryBodyHtml += `
  3068. <td id="summary-1-15" class="cursor-pointer" onclick="openModalForCount('age', [1, 15], 'Age: 1 to 15 Days')">${age_1_15}</td>
  3069. <td id="summary-16-30" class="cursor-pointer" onclick="openModalForCount('age', [16, 30], 'Age: 16 to 30 Days')">${age_16_30}</td>
  3070. <td id="summary-31-60" class="cursor-pointer" onclick="openModalForCount('age', [31, 60], 'Age: 31 to 60 Days')">${age_31_60}</td>
  3071. <td id="summary-61-90" class="cursor-pointer" onclick="openModalForCount('age', [61, 90], 'Age: 61 to 90 Days')">${age_61_90}</td>
  3072. <td id="summary-91-120" class="cursor-pointer" onclick="openModalForCount('age', [91, 120], 'Age: 91 to 120 Days')">${age_91_120}</td>
  3073. <td id="summary-over-120" class="cursor-pointer text-danger" onclick="openModalForCount('age', [121, null], 'Age: Over 120 Days')">${age_over_120}</td>
  3074. `;
  3075. const summaryBbody = document.getElementById('summary-tbody-tr');
  3076. if (summaryBbody) {
  3077. summaryBbody.innerHTML = summaryBodyHtml;
  3078. }
  3080. // Render status pie chart dynamically
  3081. const chartLabels = activeStatus.map(s => s.status_name);
  3082. const chartData = activeStatus.map(s => statusCounts[s.id] || 0);
  3083. const chartColors = activeStatus.map(s => {
  3084. const key = getStatusKey(s.status_name);
  3085. if (key === 'completed') return '#2ecc71';
  3086. if (key === 'awaiting details') return '#f1c40f';
  3087. if (key === 'pending with dept') return '#3498db';
  3088. if (key === 'pending') return '#e74c3c';
  3089. if (key === 'no action') return '#95a5a6';
  3090. return '#7f8c8d'; // Fallback
  3091. });
  3092. renderStatusChart(chartLabels, chartData, chartColors);
  3094. vendorBreakdownData = Object.values(vendorMap).sort((a, b) => b.total - a.total);
  3095. renderVendorBreakdown();
  3096. }
  3098. function renderStatusChart(labels, data, colors) {
  3099. const ctx = document.getElementById('statusPieChart')?.getContext('2d');
  3100. if (!ctx) return;
  3102. if (statusChartInstance) {
  3103. statusChartInstance.destroy();
  3104. }
  3106. statusChartInstance = new Chart(ctx, {
  3107. type: 'pie',
  3108. data: {
  3109. labels: labels,
  3110. datasets: [{
  3111. data: data,
  3112. backgroundColor: colors,
  3113. borderWidth: 1,
  3114. borderColor: '#ffffff'
  3115. }]
  3116. },
  3117. options: {
  3118. responsive: true,
  3119. maintainAspectRatio: false,
  3120. plugins: {
  3121. legend: {
  3122. position: 'right',
  3123. labels: {
  3124. boxWidth: 12,
  3125. font: {
  3126. size: 10,
  3127. family: 'Poppins'
  3128. }
  3129. }
  3130. }
  3131. }
  3132. }
  3133. });
  3134. }
  3136. function renderVendorBreakdown() {
  3137. const tbody = document.getElementById('vendor-breakdown-tbody');
  3138. if (!tbody) return;
  3139. tbody.innerHTML = '';
  3141. const searchVal = document.getElementById('vendor-breakdown-search')?.value || '';
  3142. const query = searchVal.toLowerCase().trim();
  3144. const filtered = vendorBreakdownData.filter(v => v.vendorName.toLowerCase().includes(query));
  3146. const completedStatuses = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed');
  3147. const nonCompletedStatuses = activeStatus.filter(s => getStatusKey(s.status_name) !== 'completed');
  3149. if (filtered.length === 0) {
  3150. const colSpan = 2 + activeStatus.length + 1 + 6;
  3151. tbody.innerHTML = `<tr><td colspan="${colSpan}" class="text-secondary py-3">No matching vendors found</td></tr>`;
  3152. return;
  3153. }
  3155. // Keep track of column sums
  3156. let sumTotal = 0;
  3157. const sumStatuses = {};
  3158. activeStatus.forEach(s => {
  3159. sumStatuses[s.id] = 0;
  3160. });
  3161. let sumAge1_15 = 0;
  3162. let sumAge16_30 = 0;
  3163. let sumAge31_60 = 0;
  3164. let sumAge61_90 = 0;
  3165. let sumAge91_120 = 0;
  3166. let sumAgeOver120 = 0;
  3168. filtered.forEach(v => {
  3169. sumTotal += v.total;
  3170. activeStatus.forEach(s => {
  3171. sumStatuses[s.id] += (v.statusCounts[s.id] || 0);
  3172. });
  3173. sumAge1_15 += v.age_1_15;
  3174. sumAge16_30 += v.age_16_30;
  3175. sumAge31_60 += v.age_31_60;
  3176. sumAge61_90 += v.age_61_90;
  3177. sumAge91_120 += v.age_91_120;
  3178. sumAgeOver120 += v.age_over_120;
  3180. const tr = document.createElement('tr');
  3182. // Construct HTML row dynamically
  3183. let trHtml = `
  3184. <td class="fw-semibold text-start text-dark" style="max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${escapeHtml(v.vendorName)}</td>
  3185. <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>
  3186. `;
  3188. // 1. Completed statuses
  3189. let totalCompleted = 0;
  3190. completedStatuses.forEach(s => {
  3191. const count = v.statusCounts[s.id] || 0;
  3192. totalCompleted += count;
  3193. const style = getStatusStyle(s.status_name);
  3194. 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>`;
  3195. });
  3197. // 2. Custom "Pending" column
  3198. const pendingCount = v.total - totalCompleted;
  3199. trHtml += `<td class="cursor-pointer text-danger 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>`;
  3201. // 3. Non-completed statuses
  3202. nonCompletedStatuses.forEach(s => {
  3203. const count = v.statusCounts[s.id] || 0;
  3204. const style = getStatusStyle(s.status_name);
  3205. 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>`;
  3206. });
  3208. trHtml += `
  3209. <td class="cursor-pointer" 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>
  3210. <td class="cursor-pointer" 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>
  3211. <td class="cursor-pointer" 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>
  3212. <td class="cursor-pointer" 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>
  3213. <td class="cursor-pointer" 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>
  3214. <td class="cursor-pointer text-danger" 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>
  3215. `;
  3217. tr.innerHTML = trHtml;
  3218. tbody.appendChild(tr);
  3219. });
  3221. // Append TOTAL row at the bottom
  3222. const totalTr = document.createElement('tr');
  3223. totalTr.className = 'table-warning fw-bold text-dark';
  3224. totalTr.style.borderTop = '2px solid #cbd5e1';
  3226. let totalTrHtml = `
  3227. <td class="text-start">TOTAL</td>
  3228. <td class="cursor-pointer text-primary fw-bold" onclick="openModalForCount('total', null, 'Total No of Files')">${sumTotal}</td>
  3229. `;
  3231. // 1. Completed statuses
  3232. let sumCompleted = 0;
  3233. completedStatuses.forEach(s => {
  3234. const style = getStatusStyle(s.status_name);
  3235. sumCompleted += sumStatuses[s.id];
  3236. 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>`;
  3237. });
  3239. // 2. Custom "Pending" column
  3240. const sumPending = sumTotal - sumCompleted;
  3241. totalTrHtml += `<td class="cursor-pointer text-danger fw-bold" onclick="openModalForCount('pending_custom', null, 'Pending Files')">${sumPending}</td>`;
  3243. // 3. Non-completed statuses
  3244. nonCompletedStatuses.forEach(s => {
  3245. const style = getStatusStyle(s.status_name);
  3246. 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>`;
  3247. });
  3249. totalTrHtml += `
  3250. <td class="cursor-pointer" onclick="openModalForCount('age', [1, 15], 'Age: 1-15 Days')">${sumAge1_15}</td>
  3251. <td class="cursor-pointer" onclick="openModalForCount('age', [16, 30], 'Age: 16-30 Days')">${sumAge16_30}</td>
  3252. <td class="cursor-pointer" onclick="openModalForCount('age', [31, 60], 'Age: 31-60 Days')">${sumAge31_60}</td>
  3253. <td class="cursor-pointer" onclick="openModalForCount('age', [61, 90], 'Age: 61-90 Days')">${sumAge61_90}</td>
  3254. <td class="cursor-pointer" onclick="openModalForCount('age', [91, 120], 'Age: 91-120 Days')">${sumAge91_120}</td>
  3255. <td class="cursor-pointer text-danger" onclick="openModalForCount('age', [121, null], 'Age: Over 120 Days')">${sumAgeOver120}</td>
  3256. `;
  3257. totalTr.innerHTML = totalTrHtml;
  3258. tbody.appendChild(totalTr);
  3259. }
  3261. function filterVendorBreakdown(val) {
  3262. renderVendorBreakdown();
  3263. }
  3265. function setClickFilter(type, value, displayName, vendorName = null, col = null) {
  3266. activeClickFilter = { type, value, displayName, vendorName, col };
  3268. const badge = document.getElementById('click-filter-badge');
  3269. if (badge) {
  3270. badge.innerHTML = `Filter: ${displayName} <i class="fa-solid fa-circle-xmark ms-1 cursor-pointer" onclick="clearClickFilter(event)"></i>`;
  3271. badge.style.display = 'inline-block';
  3272. badge.style.cursor = 'pointer';
  3273. }
  3275. currentPage = 1;
  3276. renderTable();
  3278. // Smoothly scroll down to the table card
  3279. document.querySelector('.table-card')?.scrollIntoView({ behavior: 'smooth' });
  3280. }
  3282. function clearClickFilter(event) {
  3283. if (event) event.stopPropagation();
  3284. activeClickFilter = null;
  3285. const badge = document.getElementById('click-filter-badge');
  3286. if (badge) {
  3287. badge.style.display = 'none';
  3288. }
  3289. currentPage = 1;
  3290. renderTable();
  3291. }
  3293. // --- COUNT DETAILS MODAL LOGIC ---
  3294. let modalClickFilter = null; // Stores { clickType, clickValue, displayName, vendorName, col }
  3295. let countDetailsModalObj = null;
  3297. function openModalForCount(clickType, clickValue, displayName, vendorName = null, col = null) {
  3298. modalClickFilter = { clickType, clickValue, displayName, vendorName, col };
  3300. // Set modal title
  3301. document.getElementById('countDetailsModalLabel').innerHTML = `<i class="fa-solid fa-list-check me-2"></i>Count Details: ${escapeHtml(displayName)}`;
  3303. // Initialize modal dropdown options
  3304. populateModalDropdowns();
  3306. // Set default selected values in modal dropdowns based on click filters
  3307. const modalTypeSelect = document.getElementById('modal-filter-type');
  3308. const modalStatusSelect = document.getElementById('modal-filter-status');
  3309. const modalVendorSelect = document.getElementById('modal-filter-vendor');
  3311. // Reset to default
  3312. modalTypeSelect.value = 'all';
  3313. modalStatusSelect.value = 'all';
  3314. modalVendorSelect.value = 'all';
  3315. const modalSearchInput = document.getElementById('modal-table-search');
  3316. if (modalSearchInput) modalSearchInput.value = '';
  3318. // If click was category/type-based
  3319. if (clickType === 'category' && clickValue) {
  3320. modalTypeSelect.value = clickValue;
  3321. }
  3323. // If click was status-based
  3324. if (clickType === 'status' && clickValue) {
  3325. modalStatusSelect.value = clickValue;
  3326. } else if (clickType === 'vendor_status' && col) {
  3327. modalStatusSelect.value = col;
  3328. }
  3330. // If click was vendor-based
  3331. if (vendorName) {
  3332. // Find matching option or set value
  3333. for (let opt of modalVendorSelect.options) {
  3334. if (opt.textContent.trim().toLowerCase() === vendorName.trim().toLowerCase() || opt.value === vendorName) {
  3335. modalVendorSelect.value = opt.value;
  3336. break;
  3337. }
  3338. }
  3339. }
  3341. // Render the modal table
  3342. applyModalFilters();
  3344. // Show modal
  3345. if (!countDetailsModalObj) {
  3346. countDetailsModalObj = new bootstrap.Modal(document.getElementById('countDetailsModal'));
  3347. }
  3348. countDetailsModalObj.show();
  3349. }
  3351. function populateModalDropdowns() {
  3352. const modalTypeSelect = document.getElementById('modal-filter-type');
  3353. const modalStatusSelect = document.getElementById('modal-filter-status');
  3354. const modalVendorSelect = document.getElementById('modal-filter-vendor');
  3356. if (modalTypeSelect) {
  3357. modalTypeSelect.innerHTML = '<option value="all">- All Types -</option>';
  3358. const optNotUpdated = document.createElement('option');
  3359. optNotUpdated.value = 'status_not_updated';
  3360. optNotUpdated.textContent = 'Status Not Updated';
  3361. modalTypeSelect.appendChild(optNotUpdated);
  3363. activeTypes.forEach(t => {
  3364. const opt = document.createElement('option');
  3365. opt.value = getCategoryCode(t.type_name);
  3366. opt.textContent = t.type_name;
  3367. modalTypeSelect.appendChild(opt);
  3368. });
  3369. }
  3371. if (modalStatusSelect) {
  3372. modalStatusSelect.innerHTML = '<option value="all">- All Statuses -</option>';
  3373. activeStatus.forEach(s => {
  3374. const opt = document.createElement('option');
  3375. opt.value = s.id;
  3376. opt.textContent = s.status_name;
  3377. modalStatusSelect.appendChild(opt);
  3378. });
  3379. }
  3381. if (modalVendorSelect) {
  3382. modalVendorSelect.innerHTML = '<option value="all">- All Vendors -</option>';
  3383. activeVendors.forEach(v => {
  3384. const opt = document.createElement('option');
  3385. opt.value = String(v.vendor_name).trim(); // Match by vendor_name text
  3386. opt.textContent = v.vendor_name;
  3387. modalVendorSelect.appendChild(opt);
  3388. });
  3389. }
  3390. }
  3392. function applyModalFilters() {
  3393. if (!modalClickFilter) return;
  3395. const selectedType = document.getElementById('modal-filter-type').value;
  3396. const selectedStatus = document.getElementById('modal-filter-status').value;
  3397. const selectedVendor = document.getElementById('modal-filter-vendor').value;
  3398. const searchVal = document.getElementById('modal-table-search')?.value || '';
  3399. const query = searchVal.toLowerCase().trim();
  3401. const { clickType, clickValue, vendorName, col } = modalClickFilter;
  3403. let filtered = allRecords.filter(row => {
  3404. // 1. Apply the original click filters from the cell / card
  3405. let age = parseInt(calculateAgeOfBill(row.received_date), 10);
  3407. if (clickType === 'category') {
  3408. if (clickValue === 'status_not_updated') {
  3409. const rowType = String(row.type || '').trim();
  3410. if (rowType !== '') return false;
  3411. } else {
  3412. const rowCategory = getCategoryCode(row.resolved_type || row.type);
  3413. if (rowCategory !== clickValue) return false;
  3414. }
  3415. }
  3417. if (clickType === 'age') {
  3418. // Exclude completed files for pending age column clicks
  3419. const rowStatusStr = String(row.status || '').trim();
  3420. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  3421. rowStatusStr === String(s.id) ||
  3422. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  3423. );
  3424. if (isCompleted) return false;
  3426. const [min, max] = clickValue;
  3427. if (max !== null) {
  3428. if (age < min || age > max) return false;
  3429. } else {
  3430. if (age < min) return false;
  3431. }
  3432. }
  3434. if (clickType === 'completed_custom') {
  3435. // Filter for completed status
  3436. const rowStatusStr = String(row.status || '').trim();
  3437. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  3438. rowStatusStr === String(s.id) ||
  3439. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  3440. );
  3441. if (!isCompleted) return false;
  3442. }
  3444. if (clickType === 'completed_age') {
  3445. // Filter for completed status
  3446. const rowStatusStr = String(row.status || '').trim();
  3447. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  3448. rowStatusStr === String(s.id) ||
  3449. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  3450. );
  3451. if (!isCompleted) return false;
  3453. const [min, max] = clickValue;
  3454. if (max !== null) {
  3455. if (age < min || age > max) return false;
  3456. } else {
  3457. if (age < min) return false;
  3458. }
  3459. }
  3461. if (clickType === 'status') {
  3462. const rowStatusStr = String(row.status || '').trim();
  3463. const matched = activeStatus.find(s => String(s.id) === clickValue);
  3464. if (matched) {
  3465. const matches = rowStatusStr === String(matched.id) ||
  3466. rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
  3467. if (!matches) return false;
  3468. }
  3469. }
  3471. if (clickType === 'vendor_pending_custom') {
  3472. const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  3473. if (rowVendor !== vendorName) return false;
  3475. const rowStatusStr = String(row.status || '').trim();
  3476. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  3477. rowStatusStr === String(s.id) ||
  3478. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  3479. );
  3480. if (isCompleted) return false;
  3481. }
  3483. if (clickType === 'pending_custom') {
  3484. const rowStatusStr = String(row.status || '').trim();
  3485. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  3486. rowStatusStr === String(s.id) ||
  3487. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  3488. );
  3489. if (isCompleted) return false;
  3490. }
  3492. if (clickType === 'vendor_total') {
  3493. const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  3494. if (rowVendor !== vendorName) return false;
  3495. }
  3497. if (clickType === 'vendor_status') {
  3498. const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  3499. if (rowVendor !== vendorName) return false;
  3501. const rowStatusStr = String(row.status || '').trim();
  3502. const matched = activeStatus.find(s => String(s.id) === col);
  3503. if (matched) {
  3504. const matches = rowStatusStr === String(matched.id) ||
  3505. rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
  3506. if (!matches) return false;
  3507. }
  3508. }
  3510. if (clickType === 'vendor_age') {
  3511. const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  3512. if (rowVendor !== vendorName) return false;
  3514. // Exclude completed files for pending vendor age clicks
  3515. const rowStatusStr = String(row.status || '').trim();
  3516. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  3517. rowStatusStr === String(s.id) ||
  3518. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  3519. );
  3520. if (isCompleted) return false;
  3522. const [min, max] = clickValue;
  3523. if (max !== null) {
  3524. if (age < min || age > max) return false;
  3525. } else {
  3526. if (age < min) return false;
  3527. }
  3528. }
  3530. if (clickType === 'vendor_completed_age') {
  3531. const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
  3532. if (rowVendor !== vendorName) return false;
  3534. // Filter for completed status
  3535. const rowStatusStr = String(row.status || '').trim();
  3536. const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
  3537. rowStatusStr === String(s.id) ||
  3538. rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
  3539. );
  3540. if (!isCompleted) return false;
  3542. const [min, max] = clickValue;
  3543. if (max !== null) {
  3544. if (age < min || age > max) return false;
  3545. } else {
  3546. if (age < min) return false;
  3547. }
  3548. }
  3550. if (clickType === 'latest_updates') {
  3551. if (row.updated_date !== clickValue) return false;
  3552. }
  3554. // 2. Apply the modal dropdown filters
  3555. if (selectedType !== 'all') {
  3556. if (selectedType === 'status_not_updated') {
  3557. const rowType = String(row.type || '').trim();
  3558. if (rowType !== '') return false;
  3559. } else {
  3560. const rowCategory = getCategoryCode(row.resolved_type || row.type);
  3561. if (rowCategory !== selectedType) return false;
  3562. }
  3563. }
  3565. if (selectedStatus !== 'all') {
  3566. const rowStatusStr = String(row.status || '').trim();
  3567. const matched = activeStatus.find(s => String(s.id) === selectedStatus);
  3568. if (matched) {
  3569. const matches = rowStatusStr === String(matched.id) ||
  3570. rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
  3571. if (!matches) return false;
  3572. }
  3573. }
  3575. if (selectedVendor !== 'all') {
  3576. const rowVendor = String(row.resolved_vendor || row.vendor_name || '').trim();
  3577. if (rowVendor.toLowerCase() !== selectedVendor.toLowerCase()) return false;
  3578. }
  3580. // 3. Apply the modal search keyword
  3581. if (query) {
  3582. const vName = String(row.resolved_vendor || row.vendor_name || '').toLowerCase();
  3583. const tName = String(row.resolved_type || row.type || '').toLowerCase();
  3584. const statusName = String(row.resolved_status || getStatusName(row.status) || '').toLowerCase();
  3585. const matchesSearch = (
  3586. vName.includes(query) ||
  3587. tName.includes(query) ||
  3588. (row.subject && String(row.subject).toLowerCase().includes(query)) ||
  3589. (row.amount && String(row.amount).toLowerCase().includes(query)) ||
  3590. (row.invoice_no && String(row.invoice_no).toLowerCase().includes(query)) ||
  3591. (row.receiptno && String(row.receiptno).toLowerCase().includes(query)) ||
  3592. (row.physical_file_no && String(row.physical_file_no).toLowerCase().includes(query)) ||
  3593. (row.remarks && String(row.remarks).toLowerCase().includes(query)) ||
  3594. (row.tat && String(row.tat).toLowerCase().includes(query)) ||
  3595. statusName.includes(query)
  3596. );
  3597. if (!matchesSearch) return false;
  3598. }
  3600. return true;
  3601. });
  3603. renderModalTable(filtered);
  3604. }
  3606. function renderModalTable(data) {
  3607. const tbody = document.getElementById('modal-tracking-tbody');
  3608. const noRecords = document.getElementById('modal-no-records-found');
  3610. tbody.innerHTML = '';
  3612. if (data.length === 0) {
  3613. noRecords.style.display = 'block';
  3614. return;
  3615. }
  3617. noRecords.style.display = 'none';
  3619. const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
  3621. const formatDate = dateStr => {
  3622. if (!dateStr) return '-';
  3623. const parts = dateStr.split('-');
  3624. if (parts.length === 3) {
  3625. return `${parts[2]}/${parts[1]}/${parts[0]}`;
  3626. }
  3627. return dateStr;
  3628. };
  3630. const formatDateTime = dateTimeStr => {
  3631. if (!dateTimeStr) return '-';
  3632. try {
  3633. const d = new Date(dateTimeStr);
  3634. if (isNaN(d.getTime())) return dateTimeStr;
  3635. const pad = n => String(n).padStart(2, '0');
  3636. return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
  3637. } catch (e) {
  3638. return dateTimeStr;
  3639. }
  3640. };
  3642. const getTypeBadge = (typeVal, filePath) => {
  3643. const cleanType = String(typeVal || '').trim().toLowerCase();
  3644. let label = cleanType;
  3645. let badgeClass = 'type-sd';
  3647. if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
  3648. label = 'ASD';
  3649. badgeClass = 'type-asd';
  3650. } else if (cleanType.includes('agreement')) {
  3651. label = 'Agreement';
  3652. badgeClass = 'type-agreement';
  3653. } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
  3654. label = 'Security Deposit';
  3655. badgeClass = 'type-sd';
  3656. } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
  3657. label = 'Tax Invoice';
  3658. badgeClass = 'type-tax-invoice';
  3659. } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
  3660. label = 'EMD';
  3661. badgeClass = 'type-emd';
  3662. } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
  3663. label = 'Bank Guarantee';
  3664. badgeClass = 'type-bank-guarantee';
  3665. } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
  3666. label = 'Delivery Chellan';
  3667. badgeClass = 'type-delivery-chellan';
  3668. } else {
  3669. const typeObj = activeTypes.find(t => String(t.id) === cleanType);
  3670. if (typeObj) {
  3671. return getTypeBadge(typeObj.type_name, filePath);
  3672. }
  3673. label = typeVal || '-';
  3674. badgeClass = 'status-default';
  3675. }
  3677. let onClickAttr = '';
  3678. if (filePath) {
  3679. let pdfUrl = filePath;
  3680. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  3681. pdfUrl = contextPath + pdfUrl.substring(1);
  3682. } else {
  3683. pdfUrl = contextPath + pdfUrl;
  3684. }
  3685. onClickAttr = `onclick="window.open('${escapeHtml(pdfUrl)}', '_blank')"`;
  3686. } else {
  3687. onClickAttr = `onclick="alert('pdf file not uploaded')"`;
  3688. }
  3690. return `<span class="type-badge ${badgeClass} cursor-pointer" ${onClickAttr} style="cursor: pointer;" title="${filePath ? 'Click to view PDF' : 'PDF not uploaded'}">${label}</span>`;
  3691. };
  3693. data.forEach((row, index) => {
  3694. const tr = document.createElement('tr');
  3696. const tdIndex = document.createElement('td');
  3697. tdIndex.className = 'text-center fw-semibold text-secondary';
  3698. tdIndex.textContent = index + 1;
  3699. tr.appendChild(tdIndex);
  3701. const dispStatus = String(row.resolved_status || getStatusName(row.status) || '').trim();
  3703. tr.innerHTML += `
  3704. <td>${formatDate(row.received_date)}</td>
  3705. <td>${formatDate(row.invoice_date)}</td>
  3706. <td>${text(row.physical_file_no)}</td>
  3707. <td>${text(row.receiptno)}</td>
  3708. <td>${text(row.subject)}</td>
  3709. <td>${getTypeBadge(row.resolved_type || row.type, row.file_path)}</td>
  3710. <td class="fw-semibold text-secondary">${text(row.resolved_vendor || row.vendor_name)}</td>
  3711. <td class="fw-semibold text-dark">&#8377; ${text(row.amount)}</td>
  3712. <td>${calculateAgeOfBill(row.received_date)}</td>
  3713. <td><span class="status-badge status-${dispStatus.toLowerCase().replace(/\s+/g, '-')}">${text(dispStatus)}</span></td>
  3714. <td><small class="text-muted">${text(row.remarks)}</small></td>
  3715. <td>${formatDateTime(row.updated_date)}</td>
  3716. <td class="fw-semibold text-secondary">${text(row.updated_by_name)}</td>
  3717. `;
  3719. // Actions cell
  3720. const tdActions = document.createElement('td');
  3721. tdActions.className = 'text-center';
  3722. tdActions.style.whiteSpace = 'nowrap'; // avoid wrapping action buttons
  3724. if (row.file_path) {
  3725. const btnViewPdf = document.createElement('button');
  3726. btnViewPdf.className = 'btn-grid-action btn-grid-pdf me-1';
  3727. btnViewPdf.innerHTML = '<i class="fa-solid fa-file-pdf"></i>';
  3728. btnViewPdf.title = 'View PDF Document';
  3729. btnViewPdf.onclick = () => {
  3730. let pdfUrl = row.file_path;
  3731. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  3732. pdfUrl = contextPath + pdfUrl.substring(1);
  3733. } else {
  3734. pdfUrl = contextPath + pdfUrl;
  3735. }
  3736. window.open(pdfUrl, '_blank');
  3737. };
  3738. tdActions.appendChild(btnViewPdf);
  3739. }
  3741. // History Button
  3742. const btnHistory = document.createElement('button');
  3743. btnHistory.className = 'btn-grid-action btn-outline-secondary me-1';
  3744. btnHistory.innerHTML = '<i class="fa-solid fa-clock-rotate-left"></i>';
  3745. btnHistory.style.border = '1px solid #cbd5e1';
  3746. btnHistory.title = 'View Update History';
  3747. btnHistory.onclick = () => {
  3748. showHistoryModal(row.id);
  3749. };
  3750. tdActions.appendChild(btnHistory);
  3752. if (isAdmin) {
  3753. const btnEdit = document.createElement('button');
  3754. btnEdit.className = 'btn-grid-action btn-grid-edit me-1';
  3755. btnEdit.innerHTML = '<i class="fa-solid fa-pen-to-square"></i>';
  3756. btnEdit.title = 'Edit Record';
  3757. btnEdit.onclick = () => {
  3758. openEditModal(row);
  3759. };
  3761. const btnDelete = document.createElement('button');
  3762. btnDelete.className = 'btn-grid-action btn-grid-delete';
  3763. btnDelete.innerHTML = '<i class="fa-solid fa-trash-can"></i>';
  3764. btnDelete.title = 'Delete Record';
  3765. btnDelete.onclick = () => {
  3766. deleteRecord(row.id);
  3767. };
  3769. tdActions.appendChild(btnEdit);
  3770. tdActions.appendChild(btnDelete);
  3771. }
  3772. tr.appendChild(tdActions);
  3774. tbody.appendChild(tr);
  3775. });
  3776. }
  3778. // --- EXPORT TO EXCEL LOGIC ---
  3779. function exportTableToExcelHelper(tableId, filename) {
  3780. const originalTable = document.getElementById(tableId);
  3781. if (!originalTable) {
  3782. alert("Table element not found.");
  3783. return;
  3784. }
  3786. // Clone table to modify it and strip actions column
  3787. const clonedTable = originalTable.cloneNode(true);
  3789. // Find Actions column index
  3790. const headers = clonedTable.querySelectorAll('thead th');
  3791. let actionsColIndex = -1;
  3792. headers.forEach((th, index) => {
  3793. const text = th.textContent.trim().toLowerCase();
  3794. if (text === 'actions' || text === 'action') {
  3795. actionsColIndex = index;
  3796. th.remove();
  3797. }
  3798. });
  3800. if (actionsColIndex !== -1) {
  3801. const rows = clonedTable.querySelectorAll('tbody tr');
  3802. rows.forEach(row => {
  3803. const cells = row.querySelectorAll('td');
  3804. if (cells[actionsColIndex]) {
  3805. cells[actionsColIndex].remove();
  3806. }
  3807. });
  3808. }
  3810. // Find Type of File column index to append PDF Status
  3811. let typeColIndex = -1;
  3812. clonedTable.querySelectorAll('thead th').forEach((th, index) => {
  3813. if (th.textContent.trim().toLowerCase() === 'type of file') {
  3814. typeColIndex = index;
  3815. }
  3816. });
  3818. if (typeColIndex !== -1) {
  3819. // Insert header "PDF Status" right after "Type of File"
  3820. const th = document.createElement('th');
  3821. th.textContent = 'PDF Status';
  3822. th.style.backgroundColor = '#f0fdf4';
  3823. th.style.color = '#166534';
  3825. const theadTr = clonedTable.querySelector('thead tr');
  3826. const nextTh = theadTr.children[typeColIndex + 1];
  3827. if (nextTh) {
  3828. theadTr.insertBefore(th, nextTh);
  3829. } else {
  3830. theadTr.appendChild(th);
  3831. }
  3833. // Insert td for each row
  3834. clonedTable.querySelectorAll('tbody tr').forEach(row => {
  3835. const cells = row.querySelectorAll('td');
  3836. const typeCell = cells[typeColIndex];
  3837. let pdfStatusText = 'pdf file not uploaded';
  3838. if (typeCell) {
  3839. const span = typeCell.querySelector('span');
  3840. if (span && span.getAttribute('title') && span.getAttribute('title').toLowerCase().includes('click')) {
  3841. pdfStatusText = 'PDF Uploaded';
  3842. }
  3843. }
  3845. const td = document.createElement('td');
  3846. td.textContent = pdfStatusText;
  3848. const nextTd = row.children[typeColIndex + 1];
  3849. if (nextTd) {
  3850. row.insertBefore(td, nextTd);
  3851. } else {
  3852. row.appendChild(td);
  3853. }
  3854. });
  3855. }
  3857. // Convert to Excel workbook and download
  3858. const wb = XLSX.utils.table_to_book(clonedTable, { raw: true, sheet: "Sheet1" });
  3859. XLSX.writeFile(wb, filename);
  3860. }
  3862. function exportModalTableToExcel() {
  3863. exportTableToExcelHelper('modal-tracking-table', 'Payment_Tracking_Details_Modal_Report.xlsx');
  3864. }
  3866. function exportMainTableToExcel() {
  3867. if (!currentFilteredRecords || currentFilteredRecords.length === 0) {
  3868. alert("No records to export.");
  3869. return;
  3870. }
  3872. // Create a temporary table element in memory
  3873. const tempTable = document.createElement('table');
  3875. // 1. Create head
  3876. const thead = document.createElement('thead');
  3877. thead.innerHTML = `
  3878. <tr>
  3879. <th>Sr. No.</th>
  3880. <th>Received Date</th>
  3881. <th>Invoice Date</th>
  3882. <th>Physical File No.</th>
  3883. <th>eFile No./ Receipt No.</th>
  3884. <th>Subject</th>
  3885. <th>Type of File</th>
  3886. <th>PDF Status</th>
  3887. <th>Vendor Name</th>
  3888. <th>Amount</th>
  3889. <th>Age of Bill (Days)</th>
  3890. <th>Status (Pending / Completed)</th>
  3891. <th>Remarks</th>
  3892. <th>Last Updated At</th>
  3893. <th>Last Updated By</th>
  3894. </tr>
  3895. `;
  3896. tempTable.appendChild(thead);
  3898. // Helpers
  3899. const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
  3901. const formatDate = dateStr => {
  3902. if (!dateStr) return '-';
  3903. const parts = dateStr.split('-');
  3904. if (parts.length === 3) {
  3905. return `${parts[2]}/${parts[1]}/${parts[0]}`;
  3906. }
  3907. return dateStr;
  3908. };
  3910. const formatDateTime = dateTimeStr => {
  3911. if (!dateTimeStr) return '-';
  3912. try {
  3913. const d = new Date(dateTimeStr);
  3914. if (!isNaN(d.getTime())) {
  3915. const dd = String(d.getDate()).padStart(2, '0');
  3916. const MM = String(d.getMonth() + 1).padStart(2, '0');
  3917. const yyyy = d.getFullYear();
  3918. const HH = String(d.getHours()).padStart(2, '0');
  3919. const mm = String(d.getMinutes()).padStart(2, '0');
  3920. const ss = String(d.getSeconds()).padStart(2, '0');
  3921. return `${dd}/${MM}/${yyyy} ${HH}:${mm}:${ss}`;
  3922. }
  3923. } catch (e) {
  3924. console.error(e);
  3925. }
  3926. return dateTimeStr;
  3927. };
  3929. const getTypeLabel = typeVal => {
  3930. const cleanType = String(typeVal || '').trim().toLowerCase();
  3931. let label = cleanType;
  3933. if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
  3934. label = 'ASD';
  3935. } else if (cleanType.includes('agreement')) {
  3936. label = 'Agreement';
  3937. } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
  3938. label = 'Security Deposit';
  3939. } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
  3940. label = 'Tax Invoice';
  3941. } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
  3942. label = 'EMD';
  3943. } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
  3944. label = 'Bank Guarantee';
  3945. } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
  3946. label = 'Delivery Chellan';
  3947. } else {
  3948. const typeObj = activeTypes.find(t => String(t.id) === cleanType);
  3949. if (typeObj) {
  3950. return typeObj.type_name;
  3951. }
  3952. label = typeVal || '-';
  3953. }
  3954. return label;
  3955. };
  3957. // 2. Create body
  3958. const tbody = document.createElement('tbody');
  3959. currentFilteredRecords.forEach((row, index) => {
  3960. const tr = document.createElement('tr');
  3961. const dispStatus = String(row.resolved_status || getStatusName(row.status) || '').trim();
  3963. tr.innerHTML = `
  3964. <td>${index + 1}</td>
  3965. <td>${formatDate(row.received_date)}</td>
  3966. <td>${formatDate(row.invoice_date)}</td>
  3967. <td>${text(row.physical_file_no)}</td>
  3968. <td>${text(row.receiptno)}</td>
  3969. <td>${text(row.subject)}</td>
  3970. <td>${getTypeLabel(row.resolved_type || row.type)}</td>
  3971. <td>${row.file_path ? 'PDF Uploaded' : 'pdf file not uploaded'}</td>
  3972. <td>${text(row.resolved_vendor || row.vendor_name)}</td>
  3973. <td>${text(row.amount)}</td>
  3974. <td>${calculateAgeOfBill(row.received_date)}</td>
  3975. <td>${text(dispStatus)}</td>
  3976. <td>${text(row.remarks)}</td>
  3977. <td>${formatDateTime(row.updated_date)}</td>
  3978. <td>${text(row.updated_by_name || '-')}</td>
  3979. `;
  3980. tbody.appendChild(tr);
  3981. });
  3982. tempTable.appendChild(tbody);
  3984. // Convert to Excel workbook and download
  3985. const wb = XLSX.utils.table_to_book(tempTable, { raw: true, sheet: "Sheet1" });
  3986. XLSX.writeFile(wb, 'Payment_Tracking_Details_Main_Report.xlsx');
  3987. }
  3989. // --- LATEST UPDATES CORNER BADGE LOGIC ---
  3990. function updateLatestUpdateBadge() {
  3991. const badge = document.getElementById('latest-update-badge');
  3992. if (!badge) return;
  3994. if (!allRecords || allRecords.length === 0) {
  3995. badge.style.setProperty('display', 'none', 'important');
  3996. return;
  3997. }
  3999. // Find the maximum updated_date
  4000. let maxTime = 0;
  4001. let maxDateStr = null;
  4003. allRecords.forEach(r => {
  4004. if (r.updated_date) {
  4005. const time = new Date(r.updated_date).getTime();
  4006. if (!isNaN(time) && time > maxTime) {
  4007. maxTime = time;
  4008. maxDateStr = r.updated_date;
  4009. }
  4010. }
  4011. });
  4013. if (maxTime === 0 || !maxDateStr) {
  4014. badge.style.setProperty('display', 'none', 'important');
  4015. return;
  4016. }
  4018. // Count how many files share this exact latest update date/time stamp
  4019. let count = 0;
  4020. allRecords.forEach(r => {
  4021. if (r.updated_date === maxDateStr) {
  4022. count++;
  4023. }
  4024. });
  4026. // Formatted date string helper
  4027. const formatDateTimeHelper = dateTimeStr => {
  4028. if (!dateTimeStr) return '-';
  4029. try {
  4030. const d = new Date(dateTimeStr);
  4031. if (isNaN(d.getTime())) return dateTimeStr;
  4032. const pad = n => String(n).padStart(2, '0');
  4033. return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
  4034. } catch (e) {
  4035. return dateTimeStr;
  4036. }
  4037. };
  4039. const countEl = document.getElementById('latest-update-count');
  4040. const timeEl = document.getElementById('latest-update-time');
  4041. if (countEl) countEl.textContent = count;
  4042. if (timeEl) timeEl.textContent = formatDateTimeHelper(maxDateStr);
  4044. badge.style.setProperty('display', 'flex', 'important');
  4045. badge.setAttribute('data-latest-date', maxDateStr);
  4046. }
  4048. function openLatestUpdatesModal() {
  4049. const badge = document.getElementById('latest-update-badge');
  4050. if (!badge) return;
  4051. const latestDate = badge.getAttribute('data-latest-date');
  4052. if (!latestDate) return;
  4054. openModalForCount('latest_updates', latestDate, 'Latest Updates');
  4055. }
  4057. function escapeHtml(str) {
  4058. if (!str) return '';
  4059. return String(str)
  4060. .replace(/&/g, "&amp;")
  4061. .replace(/</g, "&lt;")
  4062. .replace(/>/g, "&gt;")
  4063. .replace(/"/g, "&quot;")
  4064. .replace(/'/g, "&#039;");
  4065. }
  4066. // --- END OF NEW METRICS & INTERACTIVE CLICK FILTER LOGIC ---
  4068. // Delete record API call with remarks confirmation modal
  4069. let recordIdToDelete = null;
  4070. let deleteConfirmModalObj = null;
  4072. function deleteRecord(id) {
  4073. recordIdToDelete = id;
  4074. document.getElementById('delete-remarks').value = '';
  4076. if (!deleteConfirmModalObj) {
  4077. deleteConfirmModalObj = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
  4078. }
  4079. deleteConfirmModalObj.show();
  4080. }
  4082. function submitDeleteRecord() {
  4083. if (!recordIdToDelete) return;
  4085. const remarks = document.getElementById('delete-remarks').value.trim();
  4086. if (!remarks) {
  4087. alert('Please enter remarks/reason for deletion.');
  4088. return;
  4089. }
  4091. if (deleteConfirmModalObj) {
  4092. deleteConfirmModalObj.hide();
  4093. }
  4095. showLoader(true, 'Deleting record...');
  4097. const csrfHeaders = getCsrfHeaders();
  4098. const headers = {
  4099. 'Content-Type': 'application/x-www-form-urlencoded',
  4100. ...csrfHeaders
  4101. };
  4103. const body = new URLSearchParams();
  4104. body.append('id', recordIdToDelete);
  4105. body.append('remarks', remarks);
  4107. fetch(contextPath + 'gccservicepaymenttracker/api/delete', {
  4108. method: 'POST',
  4109. headers: headers,
  4110. body: body
  4111. })
  4112. .then(response => response.json())
  4113. .then(data => {
  4114. if (data.success) {
  4115. recordIdToDelete = null;
  4116. loadCounts();
  4117. loadList();
  4118. } else {
  4119. alert(data.error || 'Failed to delete record.');
  4120. showLoader(false);
  4121. }
  4122. })
  4123. .catch(err => {
  4124. console.error("Delete Error:", err);
  4125. alert("Failed to delete record due to connection error.");
  4126. showLoader(false);
  4127. });
  4128. }
  4130. // Show update history for a payment tracking record
  4131. function showHistoryModal(id) {
  4132. const tbody = document.getElementById('history-tbody');
  4133. const noHistoryFound = document.getElementById('no-history-found');
  4135. tbody.innerHTML = '';
  4136. noHistoryFound.style.display = 'none';
  4138. historyModalObj.show();
  4140. // Local formatting helpers for history records
  4141. const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
  4142. const formatDate = dateStr => {
  4143. if (!dateStr) return '-';
  4144. const parts = dateStr.split('-');
  4145. if (parts.length === 3) {
  4146. return `${parts[2]}/${parts[1]}/${parts[0]}`;
  4147. }
  4148. return dateStr;
  4149. };
  4150. const formatDateTime = dateTimeStr => {
  4151. if (!dateTimeStr) return '-';
  4152. try {
  4153. const d = new Date(dateTimeStr);
  4154. if (!isNaN(d.getTime())) {
  4155. const dd = String(d.getDate()).padStart(2, '0');
  4156. const MM = String(d.getMonth() + 1).padStart(2, '0');
  4157. const yyyy = d.getFullYear();
  4158. const HH = String(d.getHours()).padStart(2, '0');
  4159. const mm = String(d.getMinutes()).padStart(2, '0');
  4160. const ss = String(d.getSeconds()).padStart(2, '0');
  4161. return `${dd}/${MM}/${yyyy} ${HH}:${mm}:${ss}`;
  4162. }
  4163. } catch (e) {
  4164. console.error(e);
  4165. }
  4166. return dateTimeStr;
  4167. };
  4169. fetch(contextPath + 'gccservicepaymenttracker/api/history?id=' + id)
  4170. .then(response => response.json())
  4171. .then(historyList => {
  4172. if (!historyList || historyList.length === 0) {
  4173. noHistoryFound.style.display = 'block';
  4174. return;
  4175. }
  4177. historyList.forEach((item, index) => {
  4178. const tr = document.createElement('tr');
  4180. const dispStatus = String(item.resolved_status || getStatusName(item.status) || '').trim();
  4182. // Document button if file path is available
  4183. let docBtnHtml = '-';
  4184. if (item.file_path) {
  4185. let pdfUrl = item.file_path;
  4186. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  4187. pdfUrl = contextPath + pdfUrl.substring(1);
  4188. } else {
  4189. pdfUrl = contextPath + pdfUrl;
  4190. }
  4191. docBtnHtml = `<a href="${pdfUrl}" target="_blank" class="btn-grid-action btn-grid-pdf"><i class="fa-solid fa-file-pdf"></i></a>`;
  4192. }
  4194. // Resolve type badge
  4195. let typeHtml = '';
  4196. if (item.type) {
  4197. const cleanType = String(item.type).toLowerCase().trim();
  4198. let label = cleanType;
  4199. let badgeClass = 'type-sd';
  4201. if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
  4202. label = 'ASD';
  4203. badgeClass = 'type-asd';
  4204. } else if (cleanType.includes('agreement')) {
  4205. label = 'Agreement';
  4206. badgeClass = 'type-agreement';
  4207. } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
  4208. label = 'Security Deposit';
  4209. badgeClass = 'type-sd';
  4210. } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
  4211. label = 'Tax Invoice';
  4212. badgeClass = 'type-tax-invoice';
  4213. } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
  4214. label = 'EMD';
  4215. badgeClass = 'type-emd';
  4216. } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
  4217. label = 'Bank Guarantee';
  4218. badgeClass = 'type-bank-guarantee';
  4219. } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
  4220. label = 'Delivery Chellan';
  4221. badgeClass = 'type-delivery-chellan';
  4222. } else {
  4223. const typeObj = activeTypes.find(t => String(t.id) === cleanType);
  4224. if (typeObj) {
  4225. label = typeObj.type_name;
  4226. }
  4227. badgeClass = 'status-default';
  4228. }
  4229. typeHtml = `<span class="type-badge ${badgeClass}">${label}</span>`;
  4230. } else {
  4231. typeHtml = '-';
  4232. }
  4234. // Resolve vendor name
  4235. let resolvedVendor = item.resolved_vendor || item.vendor_name || '-';
  4237. tr.innerHTML = `
  4238. <td class="text-center fw-semibold text-secondary">${index + 1}</td>
  4239. <td>${formatDate(item.received_date)}</td>
  4240. <td>${formatDate(item.invoice_date)}</td>
  4241. <td>${text(item.subject)}</td>
  4242. <td>${typeHtml}</td>
  4243. <td class="fw-semibold text-secondary">${text(resolvedVendor)}</td>
  4244. <td class="fw-semibold text-dark">&#8377; ${text(item.amount)}</td>
  4245. <td><span class="status-badge status-${dispStatus.toLowerCase().replace(/\s+/g, '-')}">${text(dispStatus)}</span></td>
  4246. <td><small class="text-muted">${text(item.remarks)}</small></td>
  4247. <td>${formatDateTime(item.updated_at)}</td>
  4248. <td class="fw-semibold text-secondary">${text(item.updated_by_name || '-')}</td>
  4249. <td class="text-center">${docBtnHtml}</td>
  4250. `;
  4251. tbody.appendChild(tr);
  4252. });
  4253. })
  4254. .catch(err => {
  4255. console.error("Fetch History Error:", err);
  4256. 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>';
  4257. });
  4258. }
  4260. // --- DELETED RECORDS MODAL & RESTORE LOGIC ---
  4261. function openDeletedRecordsModal() {
  4262. if (!deletedRecordsModalObj) {
  4263. deletedRecordsModalObj = new bootstrap.Modal(document.getElementById('deletedRecordsModal'));
  4264. }
  4265. deletedRecordsModalObj.show();
  4266. showLoader(true, 'Fetching deleted records...');
  4268. fetch(contextPath + 'gccservicepaymenttracker/api/deleted-list?_=' + new Date().getTime())
  4269. .then(response => response.json())
  4270. .then(data => {
  4271. renderDeletedRecordsTable(data);
  4272. showLoader(false);
  4273. })
  4274. .catch(err => {
  4275. console.error("Fetch Deleted Records Error:", err);
  4276. alert("Failed to load deleted records.");
  4277. showLoader(false);
  4278. });
  4279. }
  4281. function renderDeletedRecordsTable(data) {
  4282. const tbody = document.getElementById('deleted-tracking-tbody');
  4283. const noRecords = document.getElementById('deleted-no-records-found');
  4285. tbody.innerHTML = '';
  4287. if (!data || data.length === 0) {
  4288. noRecords.style.display = 'block';
  4289. return;
  4290. }
  4292. noRecords.style.display = 'none';
  4294. const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
  4296. const formatDate = dateStr => {
  4297. if (!dateStr) return '-';
  4298. const parts = dateStr.split('-');
  4299. if (parts.length === 3) {
  4300. return `${parts[2]}/${parts[1]}/${parts[0]}`;
  4301. }
  4302. return dateStr;
  4303. };
  4305. const formatDateTime = dateTimeStr => {
  4306. if (!dateTimeStr) return '-';
  4307. try {
  4308. const d = new Date(dateTimeStr);
  4309. if (isNaN(d.getTime())) return dateTimeStr;
  4310. const pad = n => String(n).padStart(2, '0');
  4311. return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
  4312. } catch (e) {
  4313. return dateTimeStr;
  4314. }
  4315. };
  4317. const getTypeBadge = (typeVal, filePath) => {
  4318. const cleanType = String(typeVal || '').trim().toLowerCase();
  4319. let label = cleanType;
  4320. let badgeClass = 'type-sd';
  4322. if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
  4323. label = 'ASD';
  4324. badgeClass = 'type-asd';
  4325. } else if (cleanType.includes('agreement')) {
  4326. label = 'Agreement';
  4327. badgeClass = 'type-agreement';
  4328. } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
  4329. label = 'Security Deposit';
  4330. badgeClass = 'type-sd';
  4331. } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
  4332. label = 'Tax Invoice';
  4333. badgeClass = 'type-tax-invoice';
  4334. } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
  4335. label = 'EMD';
  4336. badgeClass = 'type-emd';
  4337. } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
  4338. label = 'Bank Guarantee';
  4339. badgeClass = 'type-bank-guarantee';
  4340. } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
  4341. label = 'Delivery Chellan';
  4342. badgeClass = 'type-delivery-chellan';
  4343. } else {
  4344. const typeObj = activeTypes.find(t => String(t.id) === cleanType);
  4345. if (typeObj) {
  4346. return getTypeBadge(typeObj.type_name, filePath);
  4347. }
  4348. label = typeVal || '-';
  4349. badgeClass = 'status-default';
  4350. }
  4352. let onClickAttr = '';
  4353. if (filePath) {
  4354. let pdfUrl = filePath;
  4355. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  4356. pdfUrl = contextPath + pdfUrl.substring(1);
  4357. } else {
  4358. pdfUrl = contextPath + pdfUrl;
  4359. }
  4360. onClickAttr = `onclick="window.open('${escapeHtml(pdfUrl)}', '_blank')"`;
  4361. } else {
  4362. onClickAttr = `onclick="alert('pdf file not uploaded')"`;
  4363. }
  4365. return `<span class="type-badge ${badgeClass} cursor-pointer" ${onClickAttr} style="cursor: pointer;" title="${filePath ? 'Click to view PDF' : 'PDF not uploaded'}">${label}</span>`;
  4366. };
  4368. data.forEach((row, index) => {
  4369. const tr = document.createElement('tr');
  4371. const tdIndex = document.createElement('td');
  4372. tdIndex.className = 'text-center fw-semibold text-secondary';
  4373. tdIndex.textContent = index + 1;
  4374. tr.appendChild(tdIndex);
  4376. const dispStatus = String(row.resolved_status || getStatusName(row.status) || '').trim();
  4378. tr.innerHTML += `
  4379. <td>${formatDate(row.received_date)}</td>
  4380. <td>${formatDate(row.invoice_date)}</td>
  4381. <td>${text(row.physical_file_no)}</td>
  4382. <td>${text(row.receiptno)}</td>
  4383. <td>${text(row.subject)}</td>
  4384. <td>${getTypeBadge(row.resolved_type || row.type, row.file_path)}</td>
  4385. <td class="fw-semibold text-secondary">${text(row.resolved_vendor || row.vendor_name)}</td>
  4386. <td class="fw-semibold text-dark">&#8377; ${text(row.amount)}</td>
  4387. <td>${calculateAgeOfBill(row.received_date)}</td>
  4388. <td><span class="status-badge status-${dispStatus.toLowerCase().replace(/\s+/g, '-')}">${text(dispStatus)}</span></td>
  4389. <td><small class="text-danger fw-semibold">${text(row.remarks)}</small></td>
  4390. <td>${formatDateTime(row.updated_date)}</td>
  4391. <td class="fw-semibold text-secondary">${text(row.updated_by_name)}</td>
  4392. `;
  4394. // Actions cell
  4395. const tdActions = document.createElement('td');
  4396. tdActions.className = 'text-center';
  4397. tdActions.style.whiteSpace = 'nowrap';
  4399. // Restore Button
  4400. const btnRestore = document.createElement('button');
  4401. btnRestore.className = 'btn btn-sm btn-outline-warning d-inline-flex align-items-center gap-1';
  4402. btnRestore.innerHTML = '<i class="fa-solid fa-trash-arrow-up"></i> Restore';
  4403. btnRestore.style.fontSize = '0.72rem';
  4404. btnRestore.style.fontWeight = '600';
  4405. btnRestore.title = 'Restore Payment Record';
  4406. btnRestore.onclick = () => {
  4407. restoreDeletedRecord(row.id);
  4408. };
  4409. tdActions.appendChild(btnRestore);
  4411. tr.appendChild(tdActions);
  4412. tbody.appendChild(tr);
  4413. });
  4414. }
  4416. function restoreDeletedRecord(id) {
  4417. if (!confirm("Are you sure you want to restore this payment record?")) {
  4418. return;
  4419. }
  4421. if (deletedRecordsModalObj) {
  4422. deletedRecordsModalObj.hide();
  4423. }
  4425. showLoader(true, 'Restoring record...');
  4427. const csrfHeaders = getCsrfHeaders();
  4428. const headers = {
  4429. 'Content-Type': 'application/x-www-form-urlencoded',
  4430. ...csrfHeaders
  4431. };
  4433. const body = new URLSearchParams();
  4434. body.append('id', id);
  4436. fetch(contextPath + 'gccservicepaymenttracker/api/restore', {
  4437. method: 'POST',
  4438. headers: headers,
  4439. body: body
  4440. })
  4441. .then(response => response.json())
  4442. .then(data => {
  4443. if (data.success) {
  4444. alert('Record successfully restored!');
  4445. loadCounts();
  4446. loadList();
  4447. } else {
  4448. alert(data.error || 'Failed to restore record.');
  4449. showLoader(false);
  4450. }
  4451. })
  4452. .catch(err => {
  4453. console.error("Restore Error:", err);
  4454. alert("Failed to restore record due to connection error.");
  4455. showLoader(false);
  4456. });
  4457. }
  4459. // Dynamic stacked modals manager to handle overlays and backdrops dynamically
  4460. document.addEventListener('show.bs.modal', function (event) {
  4461. // Find currently shown modals
  4462. const openModals = document.querySelectorAll('.modal.show');
  4463. const count = openModals.length + 1;
  4464. const zIndex = 1050 + (10 * count);
  4465. event.target.style.setProperty('z-index', zIndex, 'important');
  4467. // Adjust the backdrop z-index on next tick
  4468. setTimeout(() => {
  4469. const backdrops = document.querySelectorAll('.modal-backdrop');
  4470. if (backdrops.length > 0) {
  4471. backdrops[backdrops.length - 1].style.setProperty('z-index', zIndex - 5, 'important');
  4472. }
  4473. }, 0);
  4474. });
  4476. document.addEventListener('hidden.bs.modal', function (event) {
  4477. event.target.style.removeProperty('z-index');
  4478. // If there are still open modals, make sure the body still has the modal-open class
  4479. const openModals = document.querySelectorAll('.modal.show');
  4480. if (openModals.length > 0) {
  4481. document.body.classList.add('modal-open');
  4482. }
  4483. });
  4484. </script>
  4485. </body>
  4487. </html>