portal-dashboard/app/routes/dashboard.tsx

70 lines
2.1 KiB
TypeScript

import { GeneralLayout } from "~/components/general-layout";
import {
CloudIcon,
CloudDownloadIcon,
CloudUploadSolidIcon,
} from "~/components/icons";
import { UpgradeAccountBanner } from "~/components/upgrade-account-banner";
import { UsageCard } from "~/components/usage-card";
import { UsageChart } from "~/components/usage-chart";
import { Authenticated } from "@refinedev/core";
export default function Dashboard() {
return (
<Authenticated key="dashboard">
<GeneralLayout>
<h1 className="font-bold mb-4 text-3xl">Dashboard</h1>
<UpgradeAccountBanner />
<h2 className="font-bold mb-8 mt-10 text-2xl">Current Usage</h2>
<div className="grid grid-cols-2 gap-8">
<UsageCard
label="Storage"
currentUsage={120}
monthlyUsage={130}
icon={<CloudIcon className="text-ring" />}
/>
<UsageCard
label="Download"
currentUsage={2}
monthlyUsage={10}
icon={<CloudDownloadIcon className="text-ring" />}
/>
<UsageCard
label="Upload"
currentUsage={5}
monthlyUsage={15}
icon={<CloudUploadSolidIcon className="text-ring" />}
/>
</div>
<h2 className="font-bold mb-8 mt-10 text-2xl">Historical Usage</h2>
<div className="grid gap-8 grid-cols-2">
<UsageChart
dataset={[
{ x: "3/2", y: "50" },
{ x: "3/3", y: "10" },
{ x: "3/4", y: "20" },
]}
label="Storage"
/>
<UsageChart
dataset={[
{ x: "3/2", y: "50" },
{ x: "3/3", y: "10" },
{ x: "3/4", y: "20" },
]}
label="Download"
/>
<UsageChart
dataset={[
{ x: "3/2", y: "50" },
{ x: "3/3", y: "10" },
{ x: "3/4", y: "20" },
]}
label="Upload"
/>
</div>
</GeneralLayout>
</Authenticated>
);
}