Polish and unify site and emailed statements

[novoselt]

Current state:

• emailed statements have unusable description column and can be a bit improved otherwise
• interactive statements look way better especially in the description column, but can be slightly improved
• two versions look quite different even apart from the description, in the choice and order of columns

This is an emailed statement (Mar 20 2024 to [email protected]):

• description is of limited use
• everything is very squeezed due to hard-coding narrow width

From the same statement on the website:

• description is both informative and compact, very naturally spanning two lines for compute servers but slightly going over to the third line in one case
• period is hard to fit on two lines with two time stamps and the duration underneath
• service, amount, and balance could be narrower to give more space for the description
• vertical padding is pretty much one line above and one line below each transaction, which seems excessive

Proposal:

• use the same code to generate both versions, if this is technically infeasible, keep them in sync
• do NOT include "(USD)" in column titles - we are using $ to indicate CoCalc credits, actual currency names are relevant only during checkout
• use these column with these names: | Id | Time | Service | Duration | Amount | Balance | Project | Description |
• for emailed statements use Time (UTC) as it is done now
• Duration is what is given on the site under Period, but with two decimals in hours
• Description should be a tad wider, I would actually prefer it to have no limit on width at all or at least let the table fill the width of the browser
• at the same time decrease the width of everything else preventing but prevent wrapping, Description should be only possible double-liner
• decrease vertical padding between transactions to a half of the current value or even less

Supporting arguments:

• these statements are particularly important for people heavily using LLMs and compute servers, which generate a lot of transactions, it should be possible to easily get a good sense of where money are going to when there are dozens of transactions
• description is very important, but at the same time it is the only "long information", so it is better if it is not inserted in the middle of others
• when description is last, it is perfectly OK for it to be partially cut off, everything else is still there and can be read even on narrow screens
• project may be useful, but usually not that much, it is also a potentially long field, so it is second to last

[williamstein]

use the same code to generate both versions, if this is technically infeasible, keep them in sync

The code dependencies in CoCalc is the full react + antd + whatever else Javascript ecosystem.

The code dependencies for these email messages is basically nothing: plain text and basic HTML.

The standard solution for this sort of problem is to make a hosted version of the statement with an easy link to open it quickly (probably without requiring sign in). That's what strip does. That could be done in this case too, and would make it possible to use react etc fully, but also have only one codebase for the statements. We would email only a small summary and a link.

[novoselt]

I really like this idea - email just the top table with balance/charges/number of transactions and give a link to open the list of transactions on the site, even if it does require signing in. Is it possible to make a link that will expand that particular daily statement and scroll it into focus?

This way the daily emailed statement is very neat and not intimidating, giving users a quick sanity check, which is exactly the point. If they want more details - it is perfectly reasonable to go to a website!

[williamstein]

Is it possible to make a link that will expand that particular daily statement and scroll it into focus?

I think it should be something hosted on the nextjs page, so loading is very fast and lightweight, like this page instead of this page. That said, it will likely take a bunch of painful refactoring to make this work properly via nextjs. Just making it so some query parameter like this works is probably much easier, but certainly requires signing in:

https://cocalc.com/settings/statements?id=22294

The above would scroll and expand exactly the statement with id 22294. That would be by far the easiest thing to implement.