feat(page:problemNum): render ProblemVerdictChart component

  ## what
  - render `ProblemVerdictChart` component

  ## how

  ## why

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

src/app/problems/[problemNum]/page.tsx

@@ -7,31 +7,13 @@ import Error from "@/components/error";
 import {
   Card,
   CardContent,
-  CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
 import { useFetchProblemNum } from "@/hooks";
 import { problemNumSchema } from "@/schema";
-
-
-type ChartCard = {
-  title: string;
-  chart: React.ReactNode;
-}
-const ChartCard = ({title, chart}: ChartCard) => {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{title}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        {chart}
-      </CardContent>
-    </Card>
-  );
-}
+import { processProblemNumBarChartData } from "@/utils/dataProcessing";
+import ProblemVerdictChart from "@/components/charts/ProblemVerdictChart";
 
 type problemPageProps = {
   params: z.infer<typeof problemNumSchema>;
@@ -46,7 +28,7 @@ const ProblemPage = ({ params }: problemPageProps) => {
     error: problemNumError,
   } = useFetchProblemNum(params.problemNum);
 
-  if (problemNumIsLoading) {
+  if (problemNumIsLoading || !problemNumData  || problemNumData.data === undefined) {
     return (
       <section>
         <h1 className="text-3xl">Loading: {params.problemNum}</h1>
@@ -78,22 +60,29 @@ const ProblemPage = ({ params }: problemPageProps) => {
   }
 
   if (problemNumIsSuccess) {
-    console.log(problemNumData);
+    // console.log(problemNumData);
   }
 
-  console.log("problem page: ", params.problemNum);
+  const processedProblemVerdictData = processProblemNumBarChartData(problemNumData.data)
   return (
     <section>
       <h1 className="text-3xl mb-4">Problem page: {params.problemNum}</h1>
       <div className="grid lg:grid-cols-2 gap-4 mb-4">
         <div className="w-full">
-          <ChartCard title="Problem Verdicts" />
+          <Card>
+            <CardHeader>
+              <CardTitle>Submission Verdicts</CardTitle>
+            </CardHeader>
+            <CardContent className="h-[400px]">
+              <ProblemVerdictChart data={processedProblemVerdictData} />
+            </CardContent>
+          </Card>
         </div>
         <div className="w-full">
-          <ChartCard title="Submissions overtime" />
+          {/* <ChartCard title="Submissions overtime" /> */}
         </div>
         <div className="w-full">
-          <ChartCard title="Submission by language" />
+          {/* <ChartCard title="Submission by language" /> */}
         </div>
       </div>
       <div className="flex flex-col gap-4">