[Release] Dashboard + Bug fix release

packages/app/control/src/app/(app)/(home)/credits/claim/[code]/_components/container.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 export const ClaimCreditsContainer: React.FC<Props> = ({ children }) => {
   return (
-    <div className="flex flex-col items-center justify-center gap-8 w-full max-w-xl mx-auto py-8">
+    <div className="flex flex-col items-center justify-center gap-8 w-full max-w-xl mx-auto py-8 px-2">
       <div className="flex flex-col items-center gap-4 text-center max-w-2xl">
         <Card className="size-20 p-2 border rounded-xl flex items-center justify-center bg-card">
           <Logo className="size-full" />

packages/app/control/src/app/(app)/(home)/credits/claim/[code]/_components/coupon.tsx

@@ -63,7 +63,7 @@ export const ClaimCreditsCoupon: React.FC<Props> = ({
   };
 
   return (
-    <div className="flex flex-col items-center gap-4">
+    <div className="flex flex-col items-center gap-4 w-full">
       <CouponContainer>
         <CouponHeader>
           <CouponTitle>
@@ -105,7 +105,7 @@ export const ClaimCreditsCoupon: React.FC<Props> = ({
 
 export const LoadingCoupon = () => {
   return (
-    <CouponContainer>
+    <CouponContainer className="w-full">
       <CouponHeader>
         <CouponTitle>
           <div className="opacity-50">

packages/app/control/src/app/(app)/admin/_components/chart/HomePage.tsx

@@ -4,7 +4,8 @@ import { ChartPanel } from '@/components/overview-chart/ChartPanel';
 import { api } from '@/trpc/client';
 
 export default function HomePageChart() {
-  const { data, isLoading, error } = api.admin.tokens.getHomePageChart.useQuery();
+  const { data, isLoading, error } =
+    api.admin.tokens.getHomePageChart.useQuery();
 
   return (
     <ChartPanel
@@ -15,4 +16,4 @@ export default function HomePageChart() {
       className="mb-8"
     />
   );
-}
+}

packages/app/control/src/app/(app)/admin/_components/chart/UserApps.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import ChartPanel from '@/components/overview-chart/ChartPanel';
+import { ChartPanel } from '@/components/overview-chart/ChartPanel';
 import { api } from '@/trpc/client';
 
 interface UserAppsChartProps {

packages/app/control/src/app/(app)/admin/_components/header/App.tsx

@@ -109,5 +109,3 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ appId, className }) => {
     </div>
   );
 };
-
-export default AppHeader;

packages/app/control/src/app/(app)/admin/_components/header/User.tsx

@@ -116,5 +116,3 @@ export const UserHeader: React.FC<UserHeaderProps> = ({
     </div>
   );
 };
-
-export default UserHeader;

packages/app/control/src/app/(app)/admin/_components/index.ts

@@ -2,14 +2,6 @@ export { PendingPayoutsTable } from './pendingPayouts';
 export { CompletedPayoutsTable } from './completedPayouts';
 export { UserLink } from './UserLink';
 export { AppLink } from './AppLink';
-
-// V2 Components
-export { default as AppEarnings } from './table/AppEarnings';
-export { default as UserEarnings } from './table/UserEarnings';
-export { default as UserSpending } from './table/UserSpending';
-export { default as AppUsers } from './table/AppUsers';
-export { default as UserApps } from './table/UserApps';
-export { default as PaymentHistory } from './table/PaymentHistory';
 export { UserAppsOverview } from './overview/UserApps';
 export { default as TableLayout } from './TableLayout';
 export { UserHeader } from './header/User';

packages/app/control/src/app/(app)/admin/_components/overview/AppEarnings.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { OverviewPanel } from '@/components/overview-panel/OverviewPanel';
+import { api } from '@/trpc/client';
+
+export function AppEarningsOverview() {
+  const { data, isLoading, error } =
+    api.admin.earnings.getAppEarningsOverviewMetrics.useQuery();
+
+  return (
+    <OverviewPanel
+      title="App Earnings Overview"
+      description="Summary statistics for app revenues and usage"
+      metrics={data || []}
+      isLoading={isLoading}
+      error={error}
+      grid={{
+        columns: 3,
+        gap: 'md',
+        responsive: true,
+      }}
+      className="mb-8"
+    />
+  );
+}

packages/app/control/src/app/(app)/admin/_components/overview/PaymentHistory.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+import { OverviewPanel } from '@/components/overview-panel/OverviewPanel';
+import { api } from '@/trpc/client';
+
+export function PaymentsOverview() {
+  const { data, isLoading, error } =
+    api.admin.payments.getPaymentsOverviewMetrics.useQuery();
+
+  return (
+    <OverviewPanel
+      title="Payments Overview"
+      description="How users are paying into the platform"
+      metrics={data || []}
+      isLoading={isLoading}
+      error={error}
+      grid={{ columns: 3, gap: 'md', responsive: true }}
+      className="mb-8"
+    />
+  );
+}

packages/app/control/src/app/(app)/admin/_components/overview/UserEarnings.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { OverviewPanel } from '@/components/overview-panel/OverviewPanel';
+import { api } from '@/trpc/client';
+
+export function UserEarningsOverview() {
+  const { data, isLoading, error } =
+    api.admin.earnings.getUserEarningsOverviewMetrics.useQuery();
+
+  return (
+    <OverviewPanel
+      title="User Earnings Overview"
+      description="Summary statistics for user earnings"
+      metrics={data || []}
+      isLoading={isLoading}
+      error={error}
+      grid={{
+        columns: 3,
+        gap: 'md',
+        responsive: true,
+      }}
+      className="mb-8"
+    />
+  );
+}

packages/app/control/src/app/(app)/admin/_components/overview/UserSpending.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { OverviewPanel } from '@/components/overview-panel/OverviewPanel';
+import { api } from '@/trpc/client';
+
+export function UserSpendingOverview() {
+  const { data, isLoading, error } =
+    api.admin.spending.getUserSpendingOverviewMetrics.useQuery();
+
+  return (
+    <OverviewPanel
+      title="User Spending Overview"
+      description="Summary statistics for how users are spending"
+      metrics={data || []}
+      isLoading={isLoading}
+      error={error}
+      grid={{
+        columns: 3,
+        gap: 'md',
+        responsive: true,
+      }}
+      className="mb-8"
+    />
+  );
+}