tpay client

src/components/Chart.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import { Box, Typography } from '@mui/material';
+import '../style/Chart.css';
+
+const ChartBox = () => {
+  const data = {
+    labels: ['Jan 01', 'Jan 02', 'Jan 03', 'Jan 04', 'Jan 05', 'Jan 06'],
+    datasets: [
+      {
+        label: 'Cash In',
+        data: [50, 75, 200, 125, 150, 175],
+        backgroundColor: 'rgba(75,192,192,0.4)',
+        borderColor: 'rgba(75,192,192,1)',
+        fill: true, // No fill under the line
+        tension: 0.5, // Line curve
+      },
+      {
+        label: 'Cash Out',
+        data: [100, 90, 80, 70, 60, 50],
+        backgroundColor: 'rgba(255,99,132,0.4)',
+        borderColor: 'rgba(255,99,132,1)',
+        fill: true, // No fill under the line
+        tension: 0.5, // Line curve
+      },
+    ],
+  };
+
+  return (
+    <Box sx={{ padding: 2, backgroundColor: '#fff', borderRadius: 2, boxShadow: 1 }}>
+      <Typography variant="h6" sx={{ marginBottom: 2 }}>
+        Account Activities
+      </Typography>
+      <Line data={data} />
+    </Box>
+  );
+};
+
+export default ChartBox;