feat: add teams filtration for streaming payments page

[adam-strzelec]

Description

Add filtration for streaming payments page

Testing

Open Streaming payments page

Diffs

New stuff ✨

Resolves #4021

[iamsamgibbs]

Nice job, all seems to be working as expected!

A team with an active payment:

A team without:

With all teams selected:

[mmioana]

Awesome work on this one @adam-strzelec 🥇

Previously created 2 active streaming payments and one that has not yet started in Rocinate

View for All teams

View for General

View for Rocinate

View for Andromeda where there are no streams

I left a small refactoring comment so we keep it consistent as much as possible with the other places where we use the team filtering 💯

[mmioana]

Could we please use here ContentWithTeamFilter instead of TeamFilter?

So we could refactor this as

<ContentWithTeamFilter>
      <StatsCards
        streamingPerMonth={totalLastMonthStreaming}
        totalActiveStreams={activeStreamingPayments}
        totalStreamed={totalStreamed}
        unclaimedFounds={totalFunds.totalAvailable}
        prefix={currencySymbolMap[currency]}
        suffix={currency}
      />
    </ContentWithTeamFilter>

[iamsamgibbs]

@adam-strzelec There is already a ContentWithTeamFilter component here: src/components/v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx Although it looks like some of the classnames are different. My preference would be to keep the StatsCards wrapped in a div to add the extra spacing rather than creating a second ContentWithTeamFilter component.

[mmioana]

Hey @adam-strzelec thank you for your super-fast changes! 💯

However I had in mind re-using the existing ContentWithTeamFilter component as there is no value into creating a new one 😅

[mmioana]

Could we please use the existing component ContentWithTeamFilter from src/components/v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx?

And if we really need the distance between the filter and content to be of 8, we could refactor the component as in

import React, { type FC, type PropsWithChildren } from 'react';

import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';

const displayName = 'v5.frame.ContentWithTeamFilter';

interface ContentWithTeamFilterProps extends PropsWithChildren {
  className?: string;
}

const ContentWithTeamFilter: FC<ContentWithTeamFilterProps> = ({
  className = 'pb-6',
  children,
}) => {
  return (
    <div className="flex flex-col">
      <div className={className}>
        <TeamFilter />
      </div>
      {children}
    </div>
  );
};

ContentWithTeamFilter.displayName = displayName;
export default ContentWithTeamFilter;

[mmioana]

And then pass here the className='pb-8'

[adam-strzelec]

@mmioana @iamsamgibbs Right, I didn't notice that this component already exists 🤦‍♂️

[mmioana]

Thanks for your continuous effort @adam-strzelec 🙌 everything works as expected

Screen.Recording.2025-01-13.at.16.07.04.mov

[arrenv]

@adam-strzelec Nice one, looks and works great!!

[iamsamgibbs]

Thanks for the change! This is good now.

Although I have now noticed that the totals on this page include inactive payments from previous installations of the extension so this will need addressing as a later issue.