diff --git a/app/(app)/summary/page.tsx b/app/(app)/summary/page.tsx index cbb2c4a..fe08156 100644 --- a/app/(app)/summary/page.tsx +++ b/app/(app)/summary/page.tsx @@ -9,6 +9,8 @@ import { TaskService } from "@/services/task.service"; import { COLUMNS } from "@/types/task"; import SummaryHeader from "./sections/SummaryHeader"; import SummaryKpiGrid from "./sections/SummaryKpiGrid"; +import SummaryStatusCard from "./sections/SummaryStatusCard"; +import SummaryPriorityCard from "./sections/SummaryPriorityCard"; /** * Calculates comprehensive analytical metrics from the user's active task collection. @@ -93,6 +95,17 @@ export default async function SummaryPage() { overdueTasks={analytics.overdueTasks} upcomingDueTasks={analytics.upcomingDueTasks} /> + +
+ + +
); } diff --git a/app/(app)/summary/sections/SummaryPriorityCard.tsx b/app/(app)/summary/sections/SummaryPriorityCard.tsx new file mode 100644 index 0000000..e06e4c3 --- /dev/null +++ b/app/(app)/summary/sections/SummaryPriorityCard.tsx @@ -0,0 +1,94 @@ +/** + * @file app/summary/sections/SummaryPriorityCard.tsx + * @description Client component rendering the priority severity analysis breakdown. + */ + +"use client"; + +import { Flame } from "lucide-react"; +import { PRIORITY_CONFIG } from "@/types/task"; + +/** + * Properties for the SummaryPriorityCard component. + * + * @interface SummaryPriorityCardProps + * @property {number} totalTasks - The total number of tasks to calculate percentages against. + * @property {Record} priorityCounts - An object containing counts for each priority level. + */ +interface SummaryPriorityCardProps { + totalTasks: number; + priorityCounts: Record; +} + +/** + * Renders a priority breakdown card featuring progress bars, count badges, + * percentage statistics, and severity configuration tags for high, medium, and low tasks. + * + * @param {SummaryPriorityCardProps} props - The component props. + * @returns {JSX.Element} The rendered summary priority card component. + */ +export default function SummaryPriorityCard({ + totalTasks, + priorityCounts, +}: SummaryPriorityCardProps) { + return ( +
+
+
+

+ Priority Breakdown +

+

+ Severity and importance weights assigned to active workloads. +

+
+
+ +
+
+ +
+ {(["high", "medium", "low"] as const).map((pKey) => { + const count = priorityCounts[pKey] || 0; + const percentage = + totalTasks > 0 ? Math.round((count / totalTasks) * 100) : 0; + const config = PRIORITY_CONFIG[pKey]; + + return ( +
+
+ + {config.label} + + +
+ + {percentage}% + + + {count} {count === 1 ? "item" : "items"} + +
+
+ +
+
+
+
+ ); + })} +
+
+ ); +} diff --git a/app/(app)/summary/sections/SummaryStatusCard.tsx b/app/(app)/summary/sections/SummaryStatusCard.tsx new file mode 100644 index 0000000..a580c32 --- /dev/null +++ b/app/(app)/summary/sections/SummaryStatusCard.tsx @@ -0,0 +1,88 @@ +/** + * @file app/summary/sections/SummaryStatusCard.tsx + * @description Client component rendering the workflow status distribution progress breakdown. + */ + +"use client"; + +import { LayoutDashboard } from "lucide-react"; +import { COLUMNS } from "@/types/task"; + +/** + * Properties for the SummaryStatusCard component. + * + * @interface SummaryStatusCardProps + * @property {number} totalTasks - The total number of tasks across all statuses. + * @property {Record} statusCounts - A record mapping each status identifier to its respective task count. + */ +interface SummaryStatusCardProps { + totalTasks: number; + statusCounts: Record; +} + +/** + * Renders the workflow status distribution card showing progress bars, percentages, + * and task counts for each individual pipeline stage. + * + * @param {SummaryStatusCardProps} props - The component props. + * @returns {JSX.Element} The rendered summary status card component. + */ +export default function SummaryStatusCard({ + totalTasks, + statusCounts, +}: SummaryStatusCardProps) { + return ( +
+
+
+

+ Workflow Status Distribution +

+

+ Task concentration across individual pipeline stages. +

+
+
+ +
+
+ +
+ {COLUMNS.map((col) => { + const count = statusCounts[col.id] || 0; + const percentage = + totalTasks > 0 ? Math.round((count / totalTasks) * 100) : 0; + + return ( +
+
+
+ + {col.title} +
+ +
+ + {percentage}% + + + {count} {count === 1 ? "task" : "tasks"} + +
+
+ +
+
+
+
+ ); + })} +
+
+ ); +}