import { useQuery } from "@tanstack/react-query";
import {
Bar,
BarChart,
CartesianGrid,
Line,
LineChart,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
Legend,
} from "recharts";
import { supabase } from "@/integrations/supabase/client";
const MONTHS = 6;
function monthKeys() {
const now = new Date();
return Array.from({ length: MONTHS }, (_, i) => {
const d = new Date(now.getFullYear(), now.getMonth() - (MONTHS - 1 - i), 1);
return { key: `${d.getFullYear()}-${d.getMonth()}`, label: d.toLocaleString("en", { month: "short" }) };
});
}
const bucket = (iso: string) => {
const d = new Date(iso);
return `${d.getFullYear()}-${d.getMonth()}`;
};
function ChartCard({ title, subtitle, children }: { title: string; subtitle: string; children: React.ReactNode }) {
return (
{title}
{subtitle}
{children as React.ReactElement}
);
}
export function AnalyticsPanel() {
const { data, isLoading } = useQuery({
queryKey: ["admin-analytics"],
queryFn: async () => {
const [bookings, scans, reviews] = await Promise.all([
supabase.from("bookings").select("created_at,status"),
supabase.from("mold_scans").select("created_at"),
supabase.from("reviews").select("created_at,rating,approved"),
]);
if (bookings.error) throw bookings.error;
if (scans.error) throw scans.error;
if (reviews.error) throw reviews.error;
return { bookings: bookings.data, scans: scans.data, reviews: reviews.data };
},
});
if (isLoading || !data) return Loading analytics…
;
const rows = monthKeys().map(({ key, label }) => {
const bookings = data.bookings.filter((b) => bucket(b.created_at) === key);
const scans = data.scans.filter((s) => bucket(s.created_at) === key).length;
const inspections = bookings.filter((b) =>
["inspector_assigned", "inspection_completed", "treatment_scheduled", "completed"].includes(b.status),
).length;
const monthReviews = data.reviews.filter((r) => bucket(r.created_at) === key);
const avgRating = monthReviews.length
? Number((monthReviews.reduce((sum, r) => sum + r.rating, 0) / monthReviews.length).toFixed(2))
: 0;
return {
month: label,
bookings: bookings.length,
scans,
inspections,
conversion: scans ? Math.round((bookings.length / scans) * 100) : 0,
reviews: monthReviews.length,
approved: monthReviews.filter((r) => r.approved).length,
avgRating,
};
});
const axis = { stroke: "currentColor", fontSize: 11 };
return (
);
}