tpay client

2025-01-07 16:25:37 +07:00
parent 6f1eac180a
commit cabc5be6a3
40 changed files with 4186 additions and 106 deletions
--- a/src/components/MemberActivity.js
+++ b/src/components/MemberActivity.js
@ -0,0 +1,163 @@
+// src/MyCharts.js
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import { Doughnut } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, ArcElement } from 'chart.js';
+import '../style/MemberActivity.css';
+import {
+  Box,
+  List,
+  ListItem,
+  ListItemText,
+  Typography,
+  Divider,
+} from "@mui/material";
+import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
+
+// Register Chart.js components
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, ArcElement);
+
+const MyCharts = () => {
+  const percentage = 45;
+  // Level Chart (Line Chart) Data
+  const levelData = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        label: 'Level Progress',
+        data: [20, 40, 60, 80, 100, 90, 70],
+        fill: false,
+        borderColor: 'rgb(75, 192, 192)',
+        tension: 0.1,
+      },
+    ],
+  };
+
+  // Circle Chart (Doughnut Chart) Data
+  const circleData = {
+    labels: ['Completed', 'Remaining'],
+    datasets: [
+      {
+        label: 'Completion',
+        data: [75, 25],
+        backgroundColor: ['rgb(75, 192, 192)', 'rgb(192, 75, 75)'],
+        borderColor: 'rgb(255, 255, 255)',
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  // Performance Chart (Bar Chart) Data
+  // const performanceData = {
+  //   labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+  //   datasets: [
+  //     {
+  //       label: 'Performance',
+  //       data: [50, 70, 90, 60],
+  //       backgroundColor: 'rgb(75, 192, 192)',
+  //       borderColor: 'rgb(0, 123, 255)',
+  //       borderWidth: 1,
+  //     },
+  //   ],
+  // };
+
+  // Chart Options
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top',
+      },
+    },
+  };
+
+  return (
+    <div className="charts-container">
+      <div className="chart-item">
+        <Box boxShadow="0px 2px 5px rgba(0, 0, 0, 0.1)">
+          <h3>Level Chart</h3>
+          <Line data={levelData} options={options} />
+        </Box>
+      </div>
+      <div className="chart-item">
+        <Box boxShadow="0px 2px 5px rgba(0, 0, 0, 0.1)">
+          <h3>Circle Chart</h3>
+          <Doughnut data={circleData} options={options} />
+        </Box>
+      </div>
+      <div className="chart-item">
+        <h3>Performance Chart</h3>
+        {/* <Bar data={performanceData} options={options} /> */}
+        <Box
+          display="flex"
+          flexDirection="row"
+          width={300}
+          border="1px solid #ddd"
+          borderRadius={4}
+          overflow="hidden"
+          boxShadow="0px 2px 5px rgba(0, 0, 0, 0.1)"
+        >
+          {/* Sidebar Menu */}
+          <Box
+            width="40%"
+            bgcolor="#f9f9f9"
+            display="flex"
+            flexDirection="column"
+            borderRight="1px solid #ddd"
+            py={2}
+          >
+            <List disablePadding>
+              {[
+                "Settings",
+                "Subscription",
+                "Auto Renewal",
+                "Achievements",
+                "Logout",
+              ].map((text, index) => (
+                <React.Fragment key={index}>
+                  <ListItem button>
+                    <ListItemText primary={text} />
+                  </ListItem>
+                  {index === 3 && <Divider />} {/* Divider after "Achievements" */}
+                </React.Fragment>
+              ))}
+            </List>
+          </Box>
+
+          {/* Active User Section */}
+          <Box
+            width="60%"
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            justifyContent="center"
+            p={2}
+          >
+            <Typography variant="subtitle1" fontWeight="bold">
+              Active User
+            </Typography>
+            <Box width={80} mt={1}>
+              <CircularProgressbar
+                value={percentage}
+                text={`${percentage}%`}
+                styles={buildStyles({
+                  textSize: "14px",
+                  pathColor: "#4caf50",
+                  textColor: "#4caf50",
+                  trailColor: "#ddd",
+                  pathTransitionDuration: 0.5,
+                })}
+              />
+            </Box>
+            <Typography variant="body2" mt={1}>
+              {`${percentage}%`}
+            </Typography>
+          </Box>
+        </Box>
+      </div>
+    </div>
+  );
+};
+
+export default MyCharts;