Skip to content
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

UI Revamp #37

Merged
merged 7 commits into from
Aug 25, 2024
Merged

UI Revamp #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8eef200
fix: base of UI redo
not-ani Aug 22, 2024
4209ff4
fix(nextjs): Tasks finished overtime chart not filling up window
not-ani Aug 22, 2024
843352e
fix(nextjs): Tasks Finished Over Time chart having the ID next to it
not-ani Aug 22, 2024
2ff0091
feat: the blog
not-ani Aug 24, 2024
43c4d66
feat: website redesign
not-ani Aug 25, 2024
8ffb2b5
format
not-ani Aug 25, 2024
730b39c
fix: eslint file ignore generated blog posts
not-ani Aug 25, 2024
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
172 changes: 172 additions & 0 deletions apps/nextjs/src/app/(dashboard)/project/[id]/(root)/_components/ChartData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
"use client";

import { TrendingUp } from "lucide-react";
import {
Area,
AreaChart,
Bar,
BarChart,
CartesianGrid,
Cell,
Pie,
PieChart,
XAxis,
YAxis,
} from "recharts";

import type { ChartConfig } from "@amaxa/ui/chart";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@amaxa/ui/card";
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@amaxa/ui/chart";

import { api } from "~/trpc/react";

const chartConfig = {
tasksFinished: {
label: "Tasks Finished",
color: "hsl(var(--primary))",
},
} satisfies ChartConfig;

const COLORS = ["#3498db", "#e74c3c", "#2ecc71", "#f39c12"];

export function ProjectDashboard({ id }: { id: string }) {
const [taskData] = api.tasks.getTasksOverTime.useSuspenseQuery({
projectId: id,
});
const [priorityData] = api.tasks.getTaskPriorities.useSuspenseQuery({
projectId: id,
});
const [statusData] = api.tasks.getTaskStatuses.useSuspenseQuery({
projectId: id,
});

return (
<main className="px-10">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card className="col-span-2">
<CardHeader>
<CardTitle>Tasks Finished Over Time</CardTitle>
<CardDescription>
Number of tasks completed each month
</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig} className="h-[300px] w-full">
<AreaChart
data={taskData}
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="month" />
<YAxis />
<ChartTooltip content={<ChartTooltipContent />} />
<Area
type="monotone"
dataKey="tasksFinished"
stroke={chartConfig.tasksFinished.color}
fill={chartConfig.tasksFinished.color}
/>
</AreaChart>
</ChartContainer>
</CardContent>
<CardFooter>
<div className="flex w-full items-start gap-2 text-sm">
<div className="grid gap-2">
<div className="flex items-center gap-2 font-medium leading-none">
Trending up by 10% this month{" "}
<TrendingUp className="h-4 w-4" />
</div>
<div className="flex items-center gap-2 leading-none text-muted-foreground">
{taskData[0]?.month} - {taskData[taskData.length - 1]?.month}
</div>
</div>
</div>
</CardFooter>
</Card>

<Card>
<CardHeader>
<CardTitle>Task Priority Distribution</CardTitle>
<CardDescription>Breakdown of tasks by priority</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig} className="h-[300px] w-full">
<PieChart>
<Pie
data={priorityData}
cx="50%"
cy="50%"
labelLine={false}
outerRadius={80}
fill="#8884d8"
dataKey="count"
>
{priorityData.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index % COLORS.length]}
/>
))}
</Pie>
<ChartTooltip content={<ChartTooltipContent />} />
</PieChart>
</ChartContainer>
</CardContent>
<CardFooter>Low, Medium, and High priority tasks</CardFooter>
</Card>

<Card className="col-span-full">
<CardHeader>
<CardTitle>Task Status Overview</CardTitle>
<CardDescription>Current status of all tasks</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig} className="h-[300px] w-full">
<BarChart
data={statusData}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="status" />
<YAxis />
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="count">
{statusData.map((_, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index % COLORS.length]}
/>
))}
</Bar>
</BarChart>
</ChartContainer>
</CardContent>
<CardFooter>
Todo, In Progress, Done, and Unable to Complete statuses
</CardFooter>
</Card>
</div>
</main>
);
}
186 changes: 4 additions & 182 deletions apps/nextjs/src/app/(dashboard)/project/[id]/(root)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,190 +1,12 @@
"use client";

import { TrendingUp } from "lucide-react";
import {
Area,
AreaChart,
Bar,
BarChart,
CartesianGrid,
Cell,
Pie,
PieChart,
XAxis,
YAxis,
} from "recharts";

import type { ChartConfig } from "@amaxa/ui/chart";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@amaxa/ui/card";
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@amaxa/ui/chart";
import { ProjectDashboard } from "./_components/ChartData";

interface ProjectPageProps {
params: {
id: string;
};
}

const chartConfig = {
tasksFinished: {
label: "Tasks Finished",
color: "hsl(var(--primary))",
},
} satisfies ChartConfig;

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
const getTaskData = () => {
return [
{ month: "January", tasksFinished: 18 },
{ month: "February", tasksFinished: 30 },
{ month: "March", tasksFinished: 23 },
{ month: "April", tasksFinished: 7 },
{ month: "May", tasksFinished: 20 },
{ month: "June", tasksFinished: 21 },
];
};

const getPriorityData = () => {
return [
{ priority: "Low", count: 15 },
{ priority: "Medium", count: 30 },
{ priority: "High", count: 20 },
];
};

const getStatusData = () => {
return [
{ status: "todo", count: 10 },
{ status: "in-progress", count: 15 },
{ status: "done", count: 40 },
{ status: "unable-to-complete", count: 5 },
];
};

export default function HomePage({ params }: ProjectPageProps) {
const { id } = params;
const taskData = getTaskData();
const priorityData = getPriorityData();
const statusData = getStatusData();
return (
<main className="px-10">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card className="col-span-2">
<CardHeader>
<CardTitle>Tasks Finished Over Time project {id}</CardTitle>
<CardDescription>
Number of tasks completed each month
</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig} className="h-[300px]">
<AreaChart
data={taskData}
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="month" />
<YAxis />
<ChartTooltip content={<ChartTooltipContent />} />
<Area
type="monotone"
dataKey="tasksFinished"
stroke="#8884d8"
fill="#8884d8"
/>
</AreaChart>
</ChartContainer>
</CardContent>
<CardFooter>
<div className="flex w-full items-start gap-2 text-sm">
<div className="grid gap-2">
<div className="flex items-center gap-2 font-medium leading-none">
Trending up by 10% this month{" "}
<TrendingUp className="h-4 w-4" />
</div>
<div className="flex items-center gap-2 leading-none text-muted-foreground">
January - June 2024
</div>
</div>
</div>
</CardFooter>
</Card>

<Card>
<CardHeader>
<CardTitle>Task Priority Distribution</CardTitle>
<CardDescription>Breakdown of tasks by priority</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig} className="h-[300px] w-full">
<PieChart>
<Pie
data={priorityData}
cx="50%"
cy="50%"
labelLine={false}
outerRadius={80}
fill="#8884d8"
dataKey="count"
>
{priorityData.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index % COLORS.length]}
/>
))}
</Pie>
<ChartTooltip content={<ChartTooltipContent />} />
</PieChart>
</ChartContainer>
</CardContent>
<CardFooter>Low, Medium, and High priority tasks</CardFooter>
</Card>

<Card className="col-span-full">
<CardHeader>
<CardTitle>Task Status Overview</CardTitle>
<CardDescription>Current status of all tasks</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig} className="h-[300px] w-full">
<BarChart
data={statusData}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="status" />
<YAxis />
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="count" fill="#82ca9d" />
</BarChart>
</ChartContainer>
</CardContent>
<CardFooter>
Todo, In Progress, Done, and Unable to Complete statuses
</CardFooter>
</Card>
</div>
</main>
);
export default async function HomePage({ params }: ProjectPageProps) {

Check failure on line 9 in apps/nextjs/src/app/(dashboard)/project/[id]/(root)/page.tsx

View workflow job for this annotation

GitHub Actions / lint 

Async function 'HomePage' has no 'await' expression
const id = params.id;
return <ProjectDashboard id={id} />;
}
Loading
Loading