Polish mobile and web experience

apps/mobile/app/(app)/more/reports.tsx

@@ -1,8 +1,9 @@
-import { RefreshControl, StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
 import { AppBackground } from "@/components/AppBackground";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { PageHeader } from "@/components/PageHeader";
+import { PullToRefresh } from "@/components/PullToRefresh";
 import { StatCard } from "@/components/StatCard";
 import { TabPage } from "@/components/TabPage";
 import { TabScrollView } from "@/components/TabScrollView";
@@ -48,13 +49,14 @@ export default function ReportsScreen() {
         <TabScrollView
           header={<PageHeader title="Reports" subtitle="Business performance snapshot" />}
           refreshControl={
-            <RefreshControl
-              refreshing={statsQuery.isRefetching}
-              onRefresh={() => {
-                void statsQuery.refetch();
-                void expensesQuery.refetch();
-                void summaryQuery.refetch();
-              }}
+            <PullToRefresh
+              onRefresh={() =>
+                Promise.all([
+                  statsQuery.refetch(),
+                  expensesQuery.refetch(),
+                  summaryQuery.refetch(),
+                ])
+              }
               tintColor={colors.primary}
             />
           }