[Feature] Update the dashboard to display locked status

[thetif]

Description and related issues

Locked APDs should have disabled links (link to open the APD and link to delete) with color #5A5A5A. They should display a locked message "In Use: This APD is currently being locked by another user.." It should also display "Locked:" and the date of lockedAt instead of "Lasted edited:". The figma shows a Last edited by and Locked by, but Akua decided we won't use names right now. We will still be logging them in the APD though.

When the APD unlocks, the links will be enabled, the locked message will be removed and Last edited will replace Locked.

• trash can icon <i class="fa-solid fa-trash-can"></i>
• lock icon <i class="fa-solid fa-lock"></i>
• clock icon <i class="fa-solid fa-clock"></i>
• lightbulb-on icon <i class="fa-solid fa-lightbulb-on"></i>

Mockups or link to Figma

Design ticket #4016 https://www.figma.com/file/hJpKHKU6fz5J0Z7fisSwa2/eAPD-MMIS-2022?node-id=5016%3A22717&t=COWHWEvjG4Ksdv6G-1

Behind the scene changes

Frontend only

Acceptance criteria

• [ ] disable the APD link when the APD is locked
• [ ] make the delete button gray (#5A5A5A) when the APD is locked
• [ ] make the delete button red when it is enabled
• [ ] add a trashcan icon to the delete link
• [ ] change the ffy to show as a tag instead of MMIS IAPD|FFY 2022-2023
• [ ] when an APD is locked, display the lock icon and locked message
• [ ] add a clock icon to the Last edited line
• [ ] when an APD is locked, hide the Last edited date line
• [ ] when the APD is locked, show the clock icon and the Locked date line
• [ ] add the lightbulb-on icon to the Created date line

Testing criteria

Given	When	Then	Covered
the APD List view	an APD is locked	it's links are disabled, it displays the locked message, and Last edited becomes Locked
the APD List view	an APD is unlocked	it's links are enabled, it doesn't display the locked message, and has a Last edited and not a Locked time

[stephanieboydcms]

Good to go!