added settings (switch dark mode), addoperation, operationhistory,

homepage, analytics
2025-07-26 17:27:32 +07:00
1 parent a3cacb6753
commit 9205083486
@@ -0,0 +1,185 @@
+import { useState } from "react";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Tabs, Tab, Modal, Button } from "react-bootstrap";
+import FinancialDashboard from "../../components/FinancialDashboard/FinancialDashboard";
+import AppointmentDashboard from "../../components/AppointmentDashboard/AppointmentDashboard";
+import styles from "./AnalyticsModal.module.css";
+
+const AnalyticsModal = () => {
+  const { theme } = useTheme();
+  const [show, setShow] = useState(false);
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  // const income = 40407.17;
+  const expenses = 39985.23;
+
+  const monthdata = [
+    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 141, 15, 16, 17, 18, 19, 20, 21,
+    22, 23, 24, 25, 26, 27, 2, 29, 30, 31,
+  ];
+
+  const monthMaxValue = Math.max(...monthdata);
+
+  const MonthChartData = {
+    labels: [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12",
+      "13",
+      "14",
+      "15",
+      "16",
+      "17",
+      "18",
+      "19",
+      "20",
+      "21",
+      "22",
+      "23",
+      "24",
+      "25",
+      "26",
+      "27",
+      "28",
+      "29",
+      "30",
+      "31",
+    ],
+    datasets: [
+      {
+        data: monthdata,
+        backgroundColor: "#3576C3",
+        categoryPercentage: 0.5,
+        borderRadius: 3,
+        responsive: true,
+      },
+    ],
+  };
+
+  const MonthLeftCardData = {
+    label: "Total for the period",
+    value: expenses,
+  };
+
+  const MonthRightCardData = {
+    label: "Daily average",
+    value: expenses / monthdata.length,
+  };
+
+  const MonthChartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      y: {
+        display: false,
+        beginAtZero: true,
+        max: monthMaxValue * 1.1,
+      },
+      x: {
+        grid: {
+          display: false,
+          drawBorder: false,
+        },
+        ticks: {
+          color: "#6b7280",
+          font: {
+            size: 12,
+            weight: "500",
+          },
+        },
+      },
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        // enabled: true,
+        callbacks: {
+          // title: function (context) {
+          //   // Customize the tooltip title
+          //   return `${context[0].label}`;
+          // },
+          label: function (context) {
+            // Customize the tooltip label
+            let label = context.dataset.label || "";
+            if (label) {
+              label += ": ";
+            }
+            if (context.parsed.y !== null) {
+              label += `${context.parsed.y} ₽`;
+            }
+            return label;
+          },
+        },
+      },
+    },
+  };
+  return (
+    <>
+      <Button
+        variant={theme}
+        className="shadow-sm p-2"
+        style={{ width: "100%", borderRadius: "15px" }}
+        onClick={handleShow}
+      >
+        Analytics
+      </Button>
+
+      <Modal show={show} onHide={handleClose} fullscreen={true}>
+        <Modal.Header className="d-flex align-items-center justify-content-between">
+          <Button variant={theme} type="button" onClick={handleClose}>
+            Close
+          </Button>
+          <Modal.Title>Analytics</Modal.Title>
+          <spacer />
+        </Modal.Header>
+        <Modal.Body style={{ paddingLeft: "0", paddingRight: "0" }}>
+          <Tabs defaultActiveKey="Expenses" id="history-tabs">
+            <Tab eventKey="Incomes" title="Incomes"></Tab>
+            <Tab eventKey="Expenses" title="Expenses" style={{ padding: "0" }}>
+              <div className="d-flex mt-2 justify-content-center">
+                <div className="d-flex flex-column p-0 justify-content-center align-items-center w-100">
+                  <h3
+                    className="mb-0 fw-bolder"
+                    style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                  >
+                    July 2025
+                  </h3>
+                  <div
+                    className="d-flex text-muted small mb-0"
+                    style={{ fontSize: "0.8rem" }}
+                  >
+                    Period: month
+                  </div>
+                </div>
+              </div>
+              <hr className="mt-1" />
+              <div className={styles.scrollableContent}>
+                <FinancialDashboard
+                  chartData={MonthChartData}
+                  chartOptions={MonthChartOptions}
+                  maxValue={monthMaxValue}
+                  LeftCardData={MonthLeftCardData}
+                  RightCardData={MonthRightCardData}
+                />
+                <AppointmentDashboard className="m-3" />
+              </div>
+            </Tab>
+          </Tabs>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+export default AnalyticsModal;