90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import { MainLayout } from "@/components/layouts/MainLayout";
|
|
import { Container } from "@/components/Container";
|
|
import { api } from "@/utils/api";
|
|
import Link from "next/link";
|
|
import { PageTitle } from "@/components/PageTitle";
|
|
import { useOrganizationParams } from "@/hooks/useOrganizationParams";
|
|
import { Suspense, useMemo, useState } from "react";
|
|
import { createServerSideProps } from "@/server/getServerSideProps";
|
|
import { Chart } from "@/components/report/chart";
|
|
import { timeRanges } from "@/utils/constants";
|
|
import { type IChartRange } from "@/types";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import { getRangeLabel } from "@/utils/getRangeLabel";
|
|
|
|
export const getServerSideProps = createServerSideProps();
|
|
|
|
export default function Dashboard() {
|
|
const params = useOrganizationParams();
|
|
|
|
const query = api.report.list.useQuery({
|
|
projectSlug: params.project,
|
|
dashboardSlug: params.dashboard,
|
|
});
|
|
|
|
const dashboard = query.data?.dashboard ?? null;
|
|
const reports = useMemo(() => {
|
|
return query.data?.reports ?? [];
|
|
}, [query]);
|
|
|
|
const [range, setRange] = useState<null | IChartRange>(null);
|
|
|
|
return (
|
|
<MainLayout>
|
|
<Container>
|
|
<Suspense fallback="Loading">
|
|
<PageTitle>{dashboard?.name}</PageTitle>
|
|
|
|
<RadioGroup className="mb-8">
|
|
{timeRanges.map((item) => {
|
|
return (
|
|
<RadioGroupItem
|
|
key={item.range}
|
|
active={item.range === range}
|
|
onClick={() => {
|
|
setRange((p) => (p === item.range ? null : item.range));
|
|
}}
|
|
>
|
|
{item.title}
|
|
</RadioGroupItem>
|
|
);
|
|
})}
|
|
</RadioGroup>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{reports.map((report) => {
|
|
const chartRange = getRangeLabel(report.range);
|
|
return (
|
|
<div
|
|
className="rounded-md border border-border bg-white shadow"
|
|
key={report.id}
|
|
>
|
|
<Link
|
|
href={`/${params.organization}/reports/${report.id}`}
|
|
className="block border-b border-border p-4 leading-none hover:underline"
|
|
>
|
|
<div className="font-medium">{report.name}</div>
|
|
{chartRange && (
|
|
<div className="mt-2 text-sm flex gap-2">
|
|
<span className={range ? "line-through" : ""}>{chartRange}</span>
|
|
{range && <span>{getRangeLabel(range)}</span>}
|
|
</div>
|
|
)}
|
|
</Link>
|
|
<div className="aspect-[1.8/1] overflow-auto p-4 pl-2">
|
|
<Chart
|
|
{...report}
|
|
range={range ?? report.range}
|
|
editMode={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</Suspense>
|
|
</Container>
|
|
</MainLayout>
|
|
);
|
|
}
|