Make "Match Voucher" clear and responsive

[barredterra]

Problem

We have too much data in the horizontal direction to fit into the "Match Voucher" tab as a table. On my big screen, I can only see five of seven columns, which makes it look a bit convoluted and requires horizontal scrolling, which is unusual.

Proposed solution

• Render each Bank Transaction as a card.
• Cards use the full width of the "Match Voucher" tab (minus some padding) and are stacked vertically.
• Have a "Reconcile" button on every card.
• Display the match reasons by highlighting the data points in bold and/or color?

[marination]

Either bold, or green ticks infront of whatever is matching

[marination]

The first draft of the design:

• green highlights for matching parameters
• "View" btn to open voucher in new tab
• Primary action to reconcile

@barredterra suggestions ? Maybe Reference Number can be on the next line? I did not want to make it too bulky vertically either.

Before:

[barredterra]

To represent the voucher in a compact way but still be able to make sense of it, I think we need the following values:

• Date,
• Remaining,
• Reference Number,
• Party Name (links to party, link title set to party type),
• Voucher Name (links to voucher, link title set to voucher type)

All except the voucher name should get highlighted if matching.

What if we make the layout similar to the bank transactions on the left side? It could be almost identical except we'd replace the Description with the Voucher Name.

[marination]

What if we make the layout similar to the bank transactions on the left side? It could be almost identical except we'd replace the Description with the Voucher Name.

@barredterra We have much more horizontal space on the RHS, so the exact same LHS leaves a lot of white space.

Party Name (links to party, link title set to party type),

Maybe users want to see the party as the title since it is a match parameter

[barredterra]

Whitespace isn't a bad thing per se, I guess. But rows are fine as well, as long as everything fits into the view.

Maybe users want to see the party as the title since it is a match parameter

With "link title" I meant the title attribute that's shown on long hover. Like this:

<a href="/app/customer/ABC" title="Customer">ABC</a>

[marination]

@barredterra I rethought this issue and we seem to be focusing on the wrong problem if not going about it wrong.

• The primary issue was horizontal scroll and visibility, which i fixed with some tweaks in the linked PR.
• For such a data heavy view, table really works the best and has most features a user will need (custom sorting, searching, etc). Reinventing the wheel seems like a much bigger undertaking at the moment.
• Also, we probably should get a card view professionally designed since its not just about aesthetic. I tried sticking cards similar to the LHS and it increased the cognitive load. The column names on the table really simplify things and give it some structure.
• 

  I think we can utilise space much better (We can move data to fill up the whitespace but functionally it does not do the job of quickly dissipating the right information for a selection decision)

• There's also additional effort to build custom checkboxes, its events, etc.

I think the table does a decent job at the moment and revamping that does not personally seem worth it to me. If there is a specific design you have in mind that solves our issues, please feel free to pitch it. I unfortunately could not come up with something much better.

[barredterra]

Makes sense, thank you.

One thing we should still consider is highlighting the matched values, instead of the info icon. I guess that could be done via custom formatters in the data table?

[marination]

One thing we should still consider is highlighting the matched values, instead of the info icon. I guess that could be done via custom formatters in the data table?

Agreed