Update payment columns

[DarksightKellar]

Closes #2229
Closes #2232

Replaces payments column with Active Payments and their counts

Figma:

App:

EDIT: Just realising the "no payments" look doesn't match figma. Will update.

[netlify]

✅ Deploy Preview for decent-interface-dev ready!

Name	Link
🔨 Latest commit	5017eca
🔍 Latest deploy log	https://app.netlify.com/sites/decent-interface-dev/deploys/66be56f4c1d2400008d4665d
😎 Deploy Preview	https://deploy-preview-2241.app.dev.decentdao.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[adamgall]

@DarksightKellar can you please include some screenshots and descriptions of the visual changes in this PR?

[xraystyle1980]

Desktop request:

• Please nudge the active payments column so that it sits at the right edge of the table and center align the counter beneath the column header
  

[nicolaus-sherrill]

Thanks @xraystyle1980
+1 that request

[Da-Colon]

approved, code wise.

[xraystyle1980]

I can see the update after I create a role and the payment column is empty. That looks good.

However I want to see the pattern in action WITH a payment but I am unable to add payment to this role. See attached video

CleanShot.-.Arc.-.2024-08-15.mp4

[adamgall]

@xraystyle1980 thanks for the bug report and video.

@DarksightKellar please look into this

[mudrila]

2 minor comments, otherwise - looks good
I also changed base branch to cut off amount of changes to what's actually changed

[adamgall]

Approving, assuming @mudrila's comments are addressed

[mudrila]

@nicolaus-sherrill @xraystyle1980 Think I've tackled it.
I'm gonna merge this now assuming it was only design feedback
Yet, there's a need to test this pattern in action, which will be possible after merging currently opened PRs - so please take a note to check it during bug bash