implemented chart

package.json

@@ -15,12 +15,14 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "chart.js": "^4.4.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide": "^0.300.0",
     "lucide-react": "^0.300.0",
     "next": "14.0.4",
     "react": "^18",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7"

src/app/(dashboard)/(program-manager)/billings/page.tsx

@@ -1,5 +1,42 @@
 "use client";
 import { useState } from "react";
+import { Line } from 'react-chartjs-2';
+import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
+
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+
+const getChartData = () => {
+  return {
+    labels: ['January 12', 'January 19', 'January 26', 'February 2', 'February 9', 'February 12'],
+    datasets: [
+      {
+        label: 'Calls Placed',
+        data: [50, 75, 150, 125, 200, 220],
+        borderColor: 'rgb(53, 162, 235)',
+        backgroundColor: 'rgba(53, 162, 235, 0.5)',
+      },
+      {
+        label: 'Messages Sent',
+        data: [400, 600, 900, 800, 1300, 1600],
+        borderColor: 'rgb(255, 99, 132)',
+        backgroundColor: 'rgba(255, 99, 132, 0.5)',
+      },
+    ],
+  };
+};
+
+const options = {
+  scales: {
+    x: {
+      type: 'category',
+    },
+    y: {
+      beginAtZero: true,
+    },
+  },
+};
+
 
 interface BillingPeriod {
   startDate: string;
@@ -38,17 +75,15 @@ export default function Billings() {
       <hr className="my-6 border-t border-gray-200" />
       <div>
         <h3 className="text-xl font-bold">Current Balance</h3>
-        <p className="text-lead20 mt-2">${/* Insert current balance here */}</p>
+        <p className="text-lead20 mt-2">$240.89</p>
         <p className="text-subtle14 mt-1">{`Billing cycle: ${billingPeriod.startDate} - ${billingPeriod.endDate}`}</p>
       </div>
       <div className="mt-8">
         <h3 className="text-xl font-bold">Usage Breakdown</h3>
-        <img
-          src="/placeholder-graph.jpg" // Replace with actual graph image or component
-          alt="Usage Graph"
-          className="mt-4"
-        />
-        <div className="flex justify-start mt-4">
+        <div className="relative h-64 w-full max-w-lg">
+          <Line data={getChartData()} options={{ responsive: true, maintainAspectRatio: false }} />
+          </div>        
+          <div className="flex justify-start mt-4">
           <div>
             <h4 className="text-lg font-semibold">Calls placed</h4>
             <p className="text-lead20 text-black">{usageStatistics.callsPlaced}</p>