53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
"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>
|
|
);
|
|
}
|