admin ui enhacement

apps/admin/src/app/page.tsx

@@ -1,32 +1,62 @@
 "use client";
 
-import { Users, CreditCard, CalendarCheck, TrendingUp } from "lucide-react";
-import { StatsCard } from "@/components/ui/StatsCard";
-import { StatsCardSkeleton } from "@/components/ui/skeleton";
+import {
+  Users,
+  CreditCard,
+  CalendarCheck,
+  TrendingUp,
+  RefreshCw,
+} from "lucide-react";
+import { StatsCard, StatsCardSkeleton } from "@/components/ui/StatsCard";
+import { PageHeader } from "@/components/ui/PageHeader";
 import { UserManagement } from "@/components/users/UserManagement";
 import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
 import { useDashboardStats } from "@/hooks/use-api";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
 
 export default function Home() {
-  const { data: stats, isLoading } = useDashboardStats();
+  const { data: stats, isLoading, refetch, isFetching } = useDashboardStats();
+  const queryClient = useQueryClient();
+
+  const handleRefresh = () => {
+    queryClient.invalidateQueries({ queryKey: ["dashboard-stats"] });
+    queryClient.invalidateQueries({ queryKey: ["analytics"] });
+    refetch();
+  };
 
   const formatCurrency = (value: number) => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
     }).format(value || 0);
   };
 
   return (
     <div className="space-y-8">
-      <div>
-        <h2 className="text-3xl font-bold text-slate-900">Dashboard</h2>
-        <p className="text-slate-500 mt-2">
-          Welcome back, here's what's happening today.
-        </p>
-      </div>
+      <PageHeader
+        title="Dashboard"
+        description="Welcome back! Here's what's happening with your gym today."
+        actions={
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRefresh}
+            disabled={isFetching}
+            className="gap-2"
+          >
+            <RefreshCw
+              className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`}
+            />
+            Refresh
+          </Button>
+        }
+      />
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
         {isLoading ? (
           <>
             <StatsCardSkeleton />
@@ -72,18 +102,31 @@ export default function Home() {
         )}
       </div>
 
-      <div className="flex flex-col gap-8">
-        <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
-          <h3 className="text-xl font-bold text-slate-900 mb-6">
-            Recent Activity
-          </h3>
-          <UserManagement />
-        </div>
-        <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
-          <h3 className="text-xl font-bold text-slate-900 mb-6">
-            Quick Analytics
-          </h3>
-          <AnalyticsDashboard />
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+        {/* <div className="xl:col-span-2"> */}
+        {/*   <div className="card-modern"> */}
+        {/*     <div className="mb-6"> */}
+        {/*       <h3 className="text-lg font-semibold">Recent Activity</h3> */}
+        {/*       <p className="text-sm text-muted-foreground"> */}
+        {/*         Manage and view your users */}
+        {/*       </p> */}
+        {/*     </div> */}
+        {/*     <UserManagement /> */}
+        {/*   </div> */}
+        {/* </div> */}
+
+        {/* Analytics Sidebar */}
+        <div className="xl:col-span-3">
+          <div className="card-modern">
+            <div className="mb-6">
+              <h3 className="text-lg font-semibold">Quick Analytics</h3>
+              <p className="text-sm text-muted-foreground">
+                Overview of your gym metrics
+              </p>
+            </div>
+            <AnalyticsDashboard />
+          </div>
         </div>
       </div>
     </div>