As an user, I want to know how much fellowship paid to secretaries, #7345

packages/collectives-next/pages/secretary/statistics/index.jsx

@@ -0,0 +1,31 @@
+import ListLayout from "next-common/components/layout/ListLayout";
+import SecretaryCollectivesStatistics from "next-common/components/secretary/statistics/collectives";
+import CollectivesProvider from "next-common/context/collectives/collectives";
+import { withCommonProps } from "next-common/lib";
+import { backendApi } from "next-common/services/nextApi";
+import { secretaryMembersApiUri } from "next-common/services/url";
+
+export default function SecretaryStatisticsPage() {
+  const category = "Secretary Statistics";
+  const seoInfo = { title: category, desc: category };
+
+  return (
+    <CollectivesProvider section="secretary">
+      <ListLayout seoInfo={seoInfo} title={category}>
+        <SecretaryCollectivesStatistics />
+      </ListLayout>
+    </CollectivesProvider>
+  );
+}
+
+export const getServerSideProps = withCommonProps(async () => {
+  const { result: secretaryMembers } = await backendApi.fetch(
+    secretaryMembersApiUri,
+  );
+
+  return {
+    props: {
+      secretaryMembers: secretaryMembers ?? null,
+    },
+  };
+});

packages/next-common/components/fellowship/statistics/expenditure/claimants/index.jsx

@@ -32,16 +32,19 @@ function paginateData(data, page, pageSize) {
   return data.slice(start, end);
 }
 
-function StatisticsClaimantsTable({ members = [] }) {
+function StatisticsClaimantsTable({
+  members = [],
+  membersApi = fellowshipStatisticsMembersApi,
+}) {
   const [total, setTotal] = useState(0);
   const [processedData, setProcessedData] = useState([]);
   const [rowData, setRowData] = useState([]);
   const [tableLoading, setTableLoading] = useState(false);
+  const pageSize = defaultPageSize;
   const { page, component: pageComponent } = usePaginationComponent(
     total,
-    defaultPageSize,
+    pageSize,
   );
-  const membersApi = fellowshipStatisticsMembersApi;
 
   const columns = [
     useStatisticsClaimantsRankColumn(),
@@ -64,7 +67,7 @@ function StatisticsClaimantsTable({ members = [] }) {
       setTableLoading(false);
       return [];
     }
-  }, []);
+  }, [membersApi]);
 
   useEffect(() => {
     if (originalMembers && members) {
@@ -99,12 +102,15 @@ function StatisticsClaimantsTable({ members = [] }) {
   );
 }
 
-export default function StatisticsClaimants({ members = [] }) {
+export default function StatisticsClaimants({
+  members = [],
+  membersApi = fellowshipStatisticsMembersApi,
+}) {
   return (
     <SecondaryCard>
       <div className="flex flex-col gap-[16px] h-full">
         <StatisticsTitle>Top Claimants</StatisticsTitle>
-        <StatisticsClaimantsTable members={members} />
+        <StatisticsClaimantsTable members={members} membersApi={membersApi} />
       </div>
     </SecondaryCard>
   );

packages/next-common/components/fellowship/statistics/expenditure/rank/doughnutChart/index.jsx

@@ -33,9 +33,9 @@ function handleLabelDataArr(members, ranksData) {
   const totalSalary = getTotalSalary(ranksData);
   const ranksDataObj = transformRanksDataToObject(ranksData);
   const dataArr = rankArr.map((rank, index) => {
-    const count = ranksDataObj[index] || 0;
-    const percent = ranksDataObj[index]
-      ? new BigNumber(ranksDataObj[index]).div(totalSalary)
+    const count = ranksDataObj[rank] || 0;
+    const percent = ranksDataObj[rank]
+      ? new BigNumber(ranksDataObj[rank]).div(totalSalary)
       : "";
     return {
       label: `Rank ${rank}`,
@@ -71,11 +71,11 @@ function RankChart({ labelDataArr, data }) {
 }
 
 export default function RankDoughnutChart({ members = [] }) {
+  const ranksApi = fellowshipStatisticsRanksApi;
+
   const [labelDataArr, setLabelDataArr] = useState([]);
   const [contentLoading, setContentLoading] = useState(false);
 
-  const ranksApi = fellowshipStatisticsRanksApi;
-
   const { value: ranksData } = useAsync(async () => {
     setContentLoading(true);
     if (!ranksApi) {

packages/next-common/components/secretary/statistics/assetBreakdown.jsx

@@ -0,0 +1,34 @@
+import BigNumber from "bignumber.js";
+import { cn } from "next-common/utils";
+import TokenSymbolAsset from "next-common/components/summary/polkadotTreasurySummary/common/tokenSymbolAsset";
+
+export default function AssetBreakdown({
+  usdTotal,
+  rows = [],
+  align = "left",
+}) {
+  if (!rows || rows.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex flex-col", { "items-end": align === "right" })}>
+      <div className="text-textPrimary mb-2">${usdTotal}</div>
+      <div
+        className={cn("flex flex-col gap-1", {
+          "items-end": align === "right",
+        })}
+      >
+        {rows.map((row, i) => (
+          <TokenSymbolAsset
+            key={i}
+            amount={new BigNumber(row.value || 0)
+              .div(Math.pow(10, row.decimals))
+              .toFixed(row.decimals > 6 ? 4 : 2)}
+            symbol={row.symbol}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

packages/next-common/components/secretary/statistics/breakdown.js

@@ -0,0 +1,46 @@
+import BigNumber from "bignumber.js";
+
+export function getCyclesTotal(cycles) {
+  if (!cycles || cycles.length === 0) {
+    return new BigNumber(0);
+  }
+  return cycles.reduce((total, item) => {
+    const registeredPaid = new BigNumber(item.registeredPaid || 0);
+    const unRegisteredPaid = new BigNumber(item.unRegisteredPaid || 0);
+    return total.plus(registeredPaid).plus(unRegisteredPaid);
+  }, new BigNumber(0));
+}
+
+export function getReferendaTotal(paymentReferenda) {
+  if (!paymentReferenda || paymentReferenda.length === 0) {
+    return new BigNumber(0);
+  }
+  return paymentReferenda.reduce((total, item) => {
+    return total.plus(new BigNumber(item.value || 0));
+  }, new BigNumber(0));
+}
+
+export function getReferendaUsd(paymentReferenda) {
+  if (!paymentReferenda || paymentReferenda.length === 0) {
+    return new BigNumber(0);
+  }
+  return paymentReferenda.reduce((total, ref) => {
+    const value = new BigNumber(ref.value || 0);
+    const amount = value.div(Math.pow(10, ref.decimals || 10));
+    return total.plus(amount.times(ref.price || 0));
+  }, new BigNumber(0));
+}
+
+export function getReferendaTotalByAddress(paymentReferenda, address) {
+  const refs = (paymentReferenda || []).filter(
+    (r) => r.beneficiary === address,
+  );
+  return getReferendaTotal(refs);
+}
+
+export function getReferendaUsdByAddress(paymentReferenda, address) {
+  const refs = (paymentReferenda || []).filter(
+    (r) => r.beneficiary === address,
+  );
+  return getReferendaUsd(refs);
+}