Skip to content

re-designed overview screen #565

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rajat1saxena merged 2 commits into from
Mar 30, 2025
Merged

re-designed overview screen #565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
79e00ad
re-designed overview screen
rajat1saxena Mar 29, 2025
bb0d9c4
Lint fixes
rajat1saxena Mar 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file modified .husky/pre-commit
100644 → 100755
View file
Open in desktop
Empty file.
150 changes: 137 additions & 13 deletions apps/web/app/(with-contexts)/dashboard/(sidebar)/overview/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,82 @@
"use client";

import DashboardContent from "@components/admin/dashboard-content";
import { Metric } from "@components/admin/dashboard/metric";
import { Todo } from "@components/admin/dashboard/to-do";
import LoadingScreen from "@components/admin/loading-screen";
import { useContext, useState } from "react";
import {
AddressContext,
ProfileContext,
SiteInfoContext,
} from "@components/contexts";
import { UIConstants } from "@courselit/common-models";
import { UIConstants, Constants } from "@courselit/common-models";
import { checkPermission } from "@courselit/utils";
import { DASHBOARD_PAGE_HEADER, OVERVIEW_HEADER } from "@ui-config/strings";
import { useContext } from "react";
import {
DASHBOARD_PAGE_HEADER,
OVERVIEW_HEADER,
UNNAMED_USER,
} from "@ui-config/strings";
import { TIME_RANGES } from "@ui-config/constants";
import { useActivities } from "@/hooks/use-activities";
import dynamic from "next/dynamic";
import DashboardContent from "@components/admin/dashboard-content";
const Todo = dynamic(() =>
import("@components/admin/dashboard/to-do").then((mod) => ({
default: mod.Todo,
})),
);
const LoadingScreen = dynamic(() => import("@components/admin/loading-screen"));
const MetricCard = dynamic(() => import("../product/[id]/metric-card"));
const SalesCard = dynamic(() => import("./sales-card"));

// Dynamically import UI components
const Select = dynamic(() =>
import("@/components/ui/select").then((mod) => ({ default: mod.Select })),
);
const SelectContent = dynamic(() =>
import("@/components/ui/select").then((mod) => ({
default: mod.SelectContent,
})),
);
const SelectItem = dynamic(() =>
import("@/components/ui/select").then((mod) => ({
default: mod.SelectItem,
})),
);
const SelectTrigger = dynamic(() =>
import("@/components/ui/select").then((mod) => ({
default: mod.SelectTrigger,
})),
);
const SelectValue = dynamic(() =>
import("@/components/ui/select").then((mod) => ({
default: mod.SelectValue,
})),
);

// Dynamically import icons
const DollarSign = dynamic(() =>
import("lucide-react").then((mod) => ({ default: mod.DollarSign })),
);
const UserPlus = dynamic(() =>
import("lucide-react").then((mod) => ({ default: mod.UserPlus })),
);
const Users = dynamic(() =>
import("lucide-react").then((mod) => ({ default: mod.Users })),
);
const Mail = dynamic(() =>
import("lucide-react").then((mod) => ({ default: mod.Mail })),
);
const breadcrumbs = [{ label: OVERVIEW_HEADER, href: "#" }];

export default function Page() {
const siteInfo = useContext(SiteInfoContext);
const address = useContext(AddressContext);
const { profile } = useContext(ProfileContext);
const [timeRange, setTimeRange] = useState("7d");
const { data: salesData, loading: salesLoading } = useActivities(
Constants.ActivityType.PURCHASED,
timeRange,
undefined,
true,
);

if (
!checkPermission(profile.permissions!, [
Expand All @@ -36,13 +93,79 @@ export default function Page() {

return (
<DashboardContent breadcrumbs={breadcrumbs}>
<h1 className="text-4xl font-semibold mb-8">
{DASHBOARD_PAGE_HEADER}
<div className="flex justify-between items-center mb-8">
<h1 className="text-4xl font-semibold mb-4">
{DASHBOARD_PAGE_HEADER},{" "}
{profile.name ? profile.name.split(" ")[0] : UNNAMED_USER}
</h1>
<div>
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger className="w-[140px]">
<SelectValue placeholder="Select time range" />
</SelectTrigger>
<SelectContent>
{TIME_RANGES.map((range) => (
<SelectItem
key={range.value}
value={range.value}
>
{range.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
{/* <h1 className="text-4xl font-semibold mb-8">
{DASHBOARD_PAGE_HEADER}, {profile.name ? profile.name.split(" ")[0] : ""}
</h1>
<div className="mb-8">
<Todo siteinfo={siteInfo} />
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger className="w-[140px]">
<SelectValue placeholder="Select time range" />
</SelectTrigger>
<SelectContent>
{TIME_RANGES.map((range) => (
<SelectItem
key={range.value}
value={range.value}
>
{range.label}
</SelectItem>
))}
</SelectContent>
</Select> */}
<Todo siteinfo={siteInfo} />
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
<MetricCard
title="Sales"
icon={
<DollarSign className="h-4 w-4 text-muted-foreground" />
}
type={Constants.ActivityType.PURCHASED}
duration={timeRange}
/>
<MetricCard
title="Customers"
icon={
<UserPlus className="h-4 w-4 text-muted-foreground" />
}
type={Constants.ActivityType.ENROLLED}
duration={timeRange}
/>
<MetricCard
title="New community members"
icon={<Users className="h-4 w-4 text-muted-foreground" />}
type={Constants.ActivityType.COMMUNITY_JOINED}
duration={timeRange}
/>
<MetricCard
title="Subscribers"
icon={<Mail className="h-4 w-4 text-muted-foreground" />}
type={Constants.ActivityType.NEWSLETTER_SUBSCRIBED}
duration={timeRange}
/>
</div>
<div className="grid xs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{/* <div className="grid xs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<Metric
title="Revenue"
type="purchased"
Expand All @@ -67,7 +190,8 @@ export default function Page() {
duration="7d"
address={address}
/>
</div>
</div> */}
<SalesCard data={salesData} loading={salesLoading} />
</DashboardContent>
);
}
89 changes: 89 additions & 0 deletions apps/web/app/(with-contexts)/dashboard/(sidebar)/overview/sales-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { SiteInfoContext } from "@components/contexts";
import { Card, CardContent, CardTitle, CardHeader } from "@components/ui/card";
import { Skeleton } from "@components/ui/skeleton";
import { getSymbolFromCurrency } from "@courselit/components-library";
import { useContext } from "react";
import {
CartesianGrid,
Line,
LineChart,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from "recharts";

export default function SalesCard({
data,
loading,
}: {
data: any;
loading: boolean;
}) {
const siteinfo = useContext(SiteInfoContext);

return (
<div className="mt-4">
<Card>
<CardHeader>
<CardTitle>Sales</CardTitle>
</CardHeader>
<CardContent>
{loading ? (
<Skeleton className="h-[240px] w-full" />
) : (
<div className="">
<ResponsiveContainer width="100%" height={200}>
<LineChart
width={300}
height={200}
data={data?.points}
>
<CartesianGrid
strokeDasharray="3 3"
stroke="#e5e7eb"
/>
<Line
type="monotone"
dataKey="count"
strokeWidth={2}
stroke="#000000"
dot={false}
/>
<XAxis
dataKey="date"
className="text-xs"
axisLine={false}
tickLine={false}
/>
<YAxis
tickFormatter={(value) =>
`${getSymbolFromCurrency(siteinfo.currencyISOCode || "USD")}${value}`
}
className="text-xs"
axisLine={false}
tickLine={false}
/>
<Tooltip
contentStyle={{
backgroundColor: "#333",
border: "none",
borderRadius: "4px",
padding: "4px 8px",
fontSize: "12px",
color: "white",
}}
itemStyle={{ color: "white" }}
formatter={(value) => [
`Sales: ${value}`,
]}
/>
</LineChart>
</ResponsiveContainer>
</div>
)}
</CardContent>
</Card>
</div>
);
}
2 changes: 1 addition & 1 deletion apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/metric-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ interface MetricCardProps {
icon: React.ReactNode;
type: string;
duration: string;
entityId: string;
entityId?: string;
}

const MetricCard = ({
Expand Down
49 changes: 7 additions & 42 deletions apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,18 +70,11 @@ import {
import { useActivities } from "@/hooks/use-activities";
import { Constants } from "@courselit/common-models";
import Resources from "@components/resources";
import { TIME_RANGES } from "@ui-config/constants";
import SalesCard from "../../overview/sales-card";

const { ActivityType } = Constants;

const timeRanges = [
{ value: "1d", label: "1 day" },
{ value: "7d", label: "1 week" },
{ value: "30d", label: "30 days" },
{ value: "90d", label: "90 days" },
{ value: "1y", label: "1 year" },
{ value: "lifetime", label: "Lifetime" },
];

export default function DashboardPage() {
const params = useParams();
const productId = params.id as string;
Expand Down Expand Up @@ -189,7 +182,7 @@ export default function DashboardPage() {
<SelectValue placeholder="Select time range" />
</SelectTrigger>
<SelectContent>
{timeRanges.map((range) => (
{TIME_RANGES.map((range) => (
<SelectItem
key={range.value}
value={range.value}
Expand Down Expand Up @@ -366,7 +359,9 @@ export default function DashboardPage() {
)}
</div>

<div className="mt-4">
<SalesCard data={salesData} loading={salesLoading} />

{/* <div className="mt-4">
<Card>
<CardHeader>
<CardTitle>Sales</CardTitle>
Expand All @@ -376,36 +371,6 @@ export default function DashboardPage() {
<Skeleton className="h-[240px] w-full" />
) : (
<div className="">
{/* <LineChart
data={productData.salesData}
categories={["Sales"]}
index="name"
colors={["#16a34a"]}
valueFormatter={(value: number) =>
`${getSymbolFromCurrency(
siteinfo.currencyISOCode || "USD",
)}${value}`
}
className="h-full w-full"
/> */}

{/* <ResponsiveContainer width="100%" height={200}>
<LineChart
width={300}
height={200}
data={salesData?.points}
>
<Line
type="monotone"
dataKey="count"
strokeWidth={2}
stroke="#000"
/>
<XAxis className="text-xs" dataKey="date" />
<YAxis className="text-xs" tickFormatter={(value) => `${getSymbolFromCurrency(siteinfo.currencyISOCode || "USD")}${value}`} />
<Tooltip formatter={(value) => `${getSymbolFromCurrency(siteinfo.currencyISOCode || "USD")}${value}`} />
</LineChart>
</ResponsiveContainer> */}
<ResponsiveContainer width="100%" height={200}>
<LineChart
width={300}
Expand Down Expand Up @@ -457,7 +422,7 @@ export default function DashboardPage() {
)}
</CardContent>
</Card>
</div>
</div> */}

<Resources
links={[
Expand Down
2 changes: 2 additions & 0 deletions apps/web/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@ export async function generateMetadata(): Promise<Metadata> {
"/courselit_backdrop_square.webp",
],
},
generator: "CourseLit",
applicationName: "CourseLit",
};
}

Expand Down
Loading
Loading