user report gtound work

apps/admin/src/app/reports/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { UserReport } from "@/components/reports/UserReport";
+import { ReportFilters } from "@/components/reports/ReportFilters";
+import { Card, CardContent } from "@/components/ui/card";
+
+export default function ReportsPage() {
+  const [selectedUserId, setSelectedUserId] = useState<string>("");
+  const [dateRange, setDateRange] = useState<{
+    startDate: string;
+    endDate: string;
+  }>({
+    startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
+      .toISOString()
+      .split("T")[0],
+    endDate: new Date().toISOString().split("T")[0],
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto px-4 py-8 space-y-6">
+        <div className="flex justify-between items-center">
+          <h1 className="text-3xl font-bold text-gray-900">User Reports</h1>
+        </div>
+
+        <ReportFilters
+          selectedUserId={selectedUserId}
+          onUserChange={setSelectedUserId}
+          dateRange={dateRange}
+          onDateRangeChange={setDateRange}
+        />
+
+        {selectedUserId ? (
+          <UserReport
+            userId={selectedUserId}
+            startDate={dateRange.startDate}
+            endDate={dateRange.endDate}
+          />
+        ) : (
+          <Card>
+            <CardContent className="flex items-center justify-center h-64">
+              <p className="text-gray-500 text-lg">
+                Select a user to view their report
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}