Migrate to shadcn/ui chart components

components/dashboard/course-strategy-sidebar.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import * as React from "react";
-import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
+import { PieChart, Pie, Cell } from "recharts";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Slider } from "@/components/ui/slider";
 import { CourseData } from "@/actions/get-course-data";
@@ -111,11 +116,27 @@ export function CourseStrategySidebar({ course }: CourseStrategySidebarProps) {
     {
       name: "Completed",
       value: completedWeight,
-      color: course.color || "#000",
+      fill: course.color || "hsl(var(--chart-1))",
+    },
+    {
+      name: "Remaining",
+      value: remainingWeight,
+      fill: "hsl(var(--muted))",
     },
-    { name: "Remaining", value: remainingWeight, color: "#e5e7eb" }, // gray-200
   ];
 
+  const chartConfig = {
+    value: {
+      label: "Weight",
+    },
+    Completed: {
+      label: "Completed",
+    },
+    Remaining: {
+      label: "Remaining",
+    },
+  };
+
   // Calculate total weight for grade weights
   const totalWeight = React.useMemo(() => {
     return course.grade_weights.reduce((sum, weight) => {
@@ -399,7 +420,7 @@ export function CourseStrategySidebar({ course }: CourseStrategySidebarProps) {
         </CardHeader>
         <CardContent>
           <div className="h-[200px] w-full relative">
-            <ResponsiveContainer width="100%" height="100%">
+            <ChartContainer config={chartConfig} className="mx-auto aspect-square h-[200px]">
               <PieChart>
                 <Pie
                   data={pieData}
@@ -412,15 +433,19 @@ export function CourseStrategySidebar({ course }: CourseStrategySidebarProps) {
                   dataKey="value"
                   stroke="none"
                 >
-                  <Cell fill={pieData[0].color} />
-                  <Cell fill={pieData[1].color} fillOpacity={0.3} />
+                  {pieData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.fill} fillOpacity={index === 1 ? 0.3 : 1} />
+                  ))}
                 </Pie>
-                <Tooltip
-                  formatter={(value: number) => `${value.toFixed(1)}%`}
-                  contentStyle={{ borderRadius: "8px" }}
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      formatter={(value: number) => `${value.toFixed(1)}%`}
+                    />
+                  }
                 />
               </PieChart>
-            </ResponsiveContainer>
+            </ChartContainer>
             <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
               <span className="text-3xl font-bold">
                 {completedWeight.toFixed(0)}%

components/dashboard/workload-heatmap.tsx

@@ -3,17 +3,12 @@
 import { DashboardMetrics } from "@/actions/dashboard";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Cell,
-} from "recharts";
+  ChartContainer,
+  ChartTooltip,
+} from "@/components/ui/chart";
+import { Bar, BarChart, XAxis, YAxis, Cell } from "recharts";
 import { Activity } from "lucide-react";
 import { format, parseISO } from "date-fns";
-import { useTheme } from "next-themes";
 
 interface WorkloadHeatmapProps {
   data: DashboardMetrics["workloadHeatmap"];
@@ -29,9 +24,14 @@ export function WorkloadHeatmap({ data }: WorkloadHeatmapProps) {
     formattedDate: format(parseISO(d.date), "MMM d"),
   }));
 
-  const isDark = theme === "dark";
-  const defaultBarColor = isDark ? "var(--chart-1)" : "var(--chart-1)"; // slate-200 : slate-900
-  const warningBarColor = "var(--destructive)"; // red-500
+  const defaultBarColor = "hsl(var(--chart-1))";
+  const warningBarColor = "hsl(var(--destructive))";
+
+  const chartConfig = {
+    taskCount: {
+      label: "Tasks",
+    },
+  };
 
   return (
     <Card className="h-full">
@@ -42,62 +42,60 @@ export function WorkloadHeatmap({ data }: WorkloadHeatmapProps) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[200px] w-full">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart
-              data={chartData}
-              margin={{ top: 5, right: 5, bottom: 5, left: -20 }}
-            >
-              <XAxis
-                dataKey="dayName"
-                fontSize={12}
-                tickLine={false}
-                axisLine={false}
-                tick={{ fill: "currentColor", opacity: 0.7 }}
-              />
-              <YAxis
-                fontSize={12}
-                tickLine={false}
-                axisLine={false}
-                allowDecimals={false}
-                tick={{ fill: "currentColor", opacity: 0.7 }}
-              />
-              <Tooltip
-                cursor={{ fill: "transparent" }}
-                content={({ active, payload }) => {
-                  if (active && payload && payload.length) {
-                    const item = payload[0].payload;
-                    return (
-                      <div className="rounded-lg border bg-background p-2 shadow-sm">
-                        <div className="grid grid-cols-2 gap-2">
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              {item.formattedDate}
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {item.taskCount} Tasks
-                            </span>
-                          </div>
+        <ChartContainer config={chartConfig} className="h-[200px] w-full">
+          <BarChart
+            data={chartData}
+            margin={{ top: 5, right: 5, bottom: 5, left: -20 }}
+          >
+            <XAxis
+              dataKey="dayName"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+              tick={{ fill: "currentColor", opacity: 0.7 }}
+            />
+            <YAxis
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+              allowDecimals={false}
+              tick={{ fill: "currentColor", opacity: 0.7 }}
+            />
+            <ChartTooltip
+              cursor={{ fill: "transparent" }}
+              content={({ active, payload }) => {
+                if (active && payload && payload.length) {
+                  const item = payload[0].payload;
+                  return (
+                    <div className="rounded-lg border bg-background p-2 shadow-sm">
+                      <div className="grid grid-cols-2 gap-2">
+                        <div className="flex flex-col">
+                          <span className="text-[0.70rem] uppercase text-muted-foreground">
+                            {item.formattedDate}
+                          </span>
+                          <span className="font-bold text-muted-foreground">
+                            {item.taskCount} Tasks
+                          </span>
                         </div>
                       </div>
-                    );
+                    </div>
+                  );
+                }
+                return null;
+              }}
+            />
+            <Bar dataKey="taskCount" radius={[4, 4, 0, 0]}>
+              {chartData.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={
+                    entry.taskCount > 3 ? warningBarColor : defaultBarColor
                   }
-                  return null;
-                }}
-              />
-              <Bar dataKey="taskCount" radius={[4, 4, 0, 0]}>
-                {chartData.map((entry, index) => (
-                  <Cell
-                    key={`cell-${index}`}
-                    fill={
-                      entry.taskCount > 3 ? warningBarColor : defaultBarColor
-                    }
-                  />
-                ))}
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
+                />
+              ))}
+            </Bar>
+          </BarChart>
+        </ChartContainer>
       </CardContent>
     </Card>
   );