ProductCosts: a user should be able to add costs to a product

[richardbirkin]

Feature: Product Costs
In order to see a balance of profit and loss and apply a RoyaltyModel
As a label user
I need to be able to add Costs to a product (e.g. manufacturing of vinyl) so that the product earnings reflect outgoings
And view the correct balance

Feature: Recoupable Costs
In order to apply a cost to the Artist Balance
As label user
I need to be able to select which Costs are recoupable i.e. need to be 'earned out' by product earnings before the artist royalty is in the black

[richardbirkin]

FYI

In Cargo Physical files (.xlsx) the manufacturing costs can be seen and auto-populated by TrackShift

Manufacturing costs will appear in a statement if the label has a credit account with the distributor (Cargo) where the distributor manages and pays for the manufacture as well as the distribution.

[richardbirkin]

e.g. in the file called 444504_2022_06 row 11.

column F is a cost of type column I manufacturing for the product with column B catalogue number for column T amount

[richardbirkin]

Discussion with @g105b

Re: to modal or not to modal
Everything should have a URL. Distinct logic authority. Every state of an application should be accessed via one distinct URL.
It could still be a modal, but the logic should be accessed at a particular URL.

e.g. /product//costs

This can then be loaded into an iframe.

e.g. like the github branches dropdown + the page /branches

so...does it make sense as part of our UI?

The simplest thing will be its own page. But that won't be the best UX.

A cost could be associated to more than one product.
So maybe it makes sense to add costs on a costs screen and select the product from a dropdown (and also be able to add a cost that applies to all releases?)

Open the product and add a cost?

When a user clicks 'add cost' they go to the Costs tab, and the product has been auto selected.
The user can also click to the Costs tab and create a cost and assign it to a product(s)

This feels a lot better than the IKEA popout. Not just because of the UI style, but because it is circular - both routes end up at the same conclusion.

Or...if we do use a modal, it should use the same code from the same source of logic.

In the case of using multiselect, we need to use an EXCELLENT pattern. (greg will copy the link)

[g105b]

Discussions about UI:

This screenshot from Dribbble shows the nice usage of a multi-select we were discussing.

Here's a complex solution to a large table on a small screen (dribbble)

Or an alternative:

The discussion to have is what's more useful...

1. Preserving vertical space in a table, or
2. Showing all product information on one screen

[richardbirkin]

• Biff to mockup mobile view of product table
• Biff to do wireframe of product table -> add costs (mobile first)

[richardbirkin]

• We need some example tests to cover all the examples of how earnings and costs are split to create artist/label balances

[richardbirkin]

Here is the user interface:

The first state of the modal is brought up when a user clicks 'Add Cost' on the Product Table or 'Add a New Cost' on the Costs tab:

This is the second state of the modal, showing the data that will be saved:

This is the costs tab, showing recently added costs grouped by product. At this stage, it's not that important to group them by product, we can just list them.

[g105b]

Database is hooked up to the initial UI now. Deployed at https://slc2.dev.trackshift.app

Peek.2023-09-20.17-53.mp4

I need to output this to the Product and Upload table now, and finally load the create/edit screen as a modal.

[richardbirkin]

Ace!
I've just tried it and it works really nicely.

I noticed that the artwork grabber doesn't work anymore. Is that a bug or a thing that's not on this branch?

[richardbirkin]

Re: where costs figure in the ProductsTable

In the example, the Costs are £200

Artist	Title	Earnings	Balance	Outgoings	Profit
Example Artist	Example Album	TotalEarnings	TotalEarnings - TotalCosts	ProductBalance * Split	ProductBalance - Outgoings
Biff	Bureau De Change	£1000	£800	(SLC3)	(SLC3)

[g105b]

Completed today:

• Costs tab can create, retrieve, update and delete costs.
• Individual cost page is wrapped in a modal window.
• Costs are calculated and shown in the Balance column of the Product table.
• Uploads table shows the total earnings against each file that's been uploaded.

The SLC2 branch is up to date with these latest changes, and I'd forgotten to include the Spotify API key in the deployment, so that's why you couldn't see any artwork on SLC2.

[richardbirkin]

This is working great!

I'll branch off and do a biff-style on SLC2 this week.

Functionality suggestion:

In the ProductTable, if there are no Costs associated with a product, display a CTA to 'Add a Cost' which will bring up the modal.

[richardbirkin]

Biff styles/ux to-do:

• Unify table styling
• Add search/filter field to Costs table
• Style Costs table row links
• Do they need to be links? They don't go anywhere at the moment
• Costs table column alignment classes
• Add Costs button alignment (next to filter - before or after?)
• Costs modal cancel link left margin
• Costs modal content alignment / iframe size
• Modal: form - amount - pound sign showing that you don't need to put a pound sign in
• 'Create' button should say 'Add Cost'
• Add 'edit' button to Costs table instead of having the whole row be the link

[richardbirkin]

@g105b could you handle the modal exit tweak please?

A user should be able to escape a Costs modal by:

• pressing Esc
• clicking outside of the modal

[richardbirkin]

• Modal: form - amount - pound sign showing that you don't need to put a pound sign in

This tweak task has implications relating to the user's currency. This is something that we'll need to look at in the next couple of SLCs.

[g105b]

Okie dokie