feat(frontend): Improve revenue information (#3250)

* Improve revenue information

* Improve NET 60 period info + show next period if current period is over.

* invert period check

* %

* Finalize changes

* Cleanup

* Remove .idea

* Discard changes to .idea/discord.xml

* Discard changes to .idea/code.iml

* Discard changes to .idea/.gitignore

* Discard changes to .idea/libraries/KotlinJavaRuntime.xml

* Discard changes to .idea/vcs.xml

* Discard changes to .idea/modules.xml

* Discard changes to .idea/.gitignore

* fix lint issues

* table fix, lint fix and media sizing fix

* fix responsiveness

* Remove comment

* utc comment

* fix lint

apps/frontend/src/pages/legal/cmp-info.vue

@@ -82,42 +82,41 @@
     <p>
       Modrinth receives ad revenue from our ad providers on a NET 60 day basis. Due to this, not all
       revenue is immediately available to withdraw. We pay creators as soon as we receive the money
-      from our ad providers, which is 60 days after the last day of each month. This table outlines
-      some example dates of how NET 60 payments are made:
+      from our ad providers, which is 60 days after the last day of each month.
     </p>
+
+    <p>
+      To understand when revenue becomes available, you can use this calculator to estimate when
+      revenue earned on a specific date will be available for withdrawal. Please be advised that all
+      dates within this calculator are represented at 00:00 UTC.
+    </p>
+
     <table>
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Payment available date</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>January 1st</td>
-          <td>March 31st</td>
-        </tr>
-        <tr>
-          <td>January 15th</td>
-          <td>March 31st</td>
-        </tr>
-        <tr>
-          <td>March 3rd</td>
-          <td>May 30th</td>
-        </tr>
-        <tr>
-          <td>June 30th</td>
-          <td>August 29th</td>
-        </tr>
-        <tr>
-          <td>July 14th</td>
-          <td>September 29th</td>
-        </tr>
-        <tr>
-          <td>October 12th</td>
-          <td>December 30th</td>
-        </tr>
-      </tbody>
+      <tr>
+        <th>Timeline</th>
+        <th>Date</th>
+      </tr>
+      <tr>
+        <td>Revenue earned on</td>
+        <td>
+          <input id="revenue-date-picker" v-model="rawSelectedDate" type="date" />
+          <noscript
+            >(JavaScript must be enabled for the date picker to function, example date: 2024-07-15)
+          </noscript>
+        </td>
+      </tr>
+      <tr>
+        <td>End of the month</td>
+        <td>{{ formatDate(endOfMonthDate) }}</td>
+      </tr>
+      <tr>
+        <td>NET 60 policy applied</td>
+        <td>+ 60 days</td>
+      </tr>
+      <tr class="final-result">
+        <td>Available for withdrawal</td>
+        <td>{{ formatDate(withdrawalDate) }}</td>
+      </tr>
     </table>
     <h3>How do I know Modrinth is being transparent about revenue?</h3>
     <p>
@@ -127,12 +126,40 @@
         revenue distribution system</a
       >. We also have an
       <a href="https://api.modrinth.com/v3/payout/platform_revenue">API route</a> that allows users
-      to query exact daily revenue for the site.
+      to query exact daily revenue for the site - so far, Modrinth has generated
+      <strong>{{ formatMoney(platformRevenue) }}</strong> in revenue.
     </p>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Revenue</th>
+          <th>Creator Revenue (75%)</th>
+          <th>Modrinth's Cut (25%)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in platformRevenueData" :key="item.time">
+          <td>{{ formatDate(dayjs.unix(item.time)) }}</td>
+          <td>{{ formatMoney(item.revenue) }}</td>
+          <td>{{ formatMoney(item.creator_revenue) }}</td>
+          <td>{{ formatMoney(item.revenue - item.creator_revenue) }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <small
+      >Modrinth's total revenue in the previous 5 days, for the entire dataset, use the
+      aforementioned
+      <a href="https://api.modrinth.com/v3/payout/platform_revenue">API route</a>.</small
+    >
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
+import dayjs from "dayjs";
+import { computed, ref } from "vue";
+import { formatDate, formatMoney } from "@modrinth/utils";
+
 const description =
   "Information about the Rewards Program of Modrinth, an open source modding platform focused on Minecraft.";
 
@@ -142,4 +169,18 @@ useSeoMeta({
   ogTitle: "Rewards Program Information",
   ogDescription: description,
 });
+
+const rawSelectedDate = ref(dayjs().format("YYYY-MM-DD"));
+const selectedDate = computed(() => dayjs(rawSelectedDate.value));
+const endOfMonthDate = computed(() => selectedDate.value.endOf("month"));
+const withdrawalDate = computed(() => endOfMonthDate.value.add(60, "days"));
+
+const { data: transparencyInformation } = await useAsyncData("payout/platform_revenue", () =>
+  useBaseFetch("payout/platform_revenue", {
+    apiVersion: 3,
+  }),
+);
+
+const platformRevenue = transparencyInformation.value.all_time;
+const platformRevenueData = transparencyInformation.value.data.slice(0, 5);
 </script>