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

homepage, analytics

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+bun.lock
+bun.lockb

package.json

@@ -7,8 +7,14 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.7",
+    "chart.js": "^4.5.0",
+    "faker": "^6.6.6",
     "react": "^19.1.0",
+    "react-bootstrap": "^2.10.10",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.0",
+    "react-router-dom": "^7.7.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.jsx

@@ -0,0 +1,38 @@
+import "./css/App.css";
+import NavigationBar from "./components/NavigationBar/NavigationBar";
+import { useTheme } from "./contexts/ThemeContext";
+import { useEffect } from "react";
+import Transactions from "./pages/Transactions";
+import Home from "./pages/Home";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
+// import { Container } from "react-bootstrap";
+import NotFound from "./pages/NotFound";
+
+function App() {
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    document.body.setAttribute("data-bs-theme", theme);
+  }, [theme]);
+
+  return (
+    <Router>
+      <NavigationBar />
+      <>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/transactions" element={<Transactions />} />
+          <Route path="/not-found" element={<NotFound />} />
+          <Route path="*" element={<Navigate to="/not-found" replace />} />
+        </Routes>
+      </>
+    </Router>
+  );
+}
+
+export default App;

src/components/AppointmentDashboard/AppointmentDashboard.jsx

@@ -0,0 +1,167 @@
+import { Card, Accordion, ProgressBar } from "react-bootstrap";
+
+const AppointmentDashboard = ({ ...props }) => {
+  return (
+    <>
+      <Card {...props}>
+        <Card.Body>
+          <h3
+            className="mb-3 fw-bolder"
+            style={{ fontSize: "1.1rem", fontWeight: 700 }}
+          >
+            Appointment
+          </h3>
+          <Accordion defaultActiveKey="">
+            <Accordion.Item eventKey="0" className="p-0">
+              <Accordion.Header className="p-0">
+                <div className="p-0" style={{ fontSize: "30px" }}>
+                  <div>&#128512;</div>
+                </div>
+                <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                  <div className="d-flex justify-content-between w-100">
+                    <h3 className="mb-0" style={{ fontSize: "1.1rem" }}>
+                      Cash loan
+                    </h3>
+                    <h3
+                      className="mb-0 fw-bolder"
+                      style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                    >
+                      21531,00 ₽
+                    </h3>
+                  </div>
+                  <div className="d-flex w-100 align-items-end gap-2">
+                    <ProgressBar
+                      now={75}
+                      className="mt-2 w-100"
+                      style={{ height: "5px" }}
+                    />
+                    <div
+                      className="d-flex text-muted small mb-0"
+                      style={{ fontSize: "0.8rem" }}
+                    >
+                      75%
+                    </div>
+                  </div>
+                </div>
+              </Accordion.Header>
+              <Accordion.Body>
+                <div className="d-flex align-items-center">
+                  <div
+                    className="p-2 justify-content-start align-items-start d-flex flex-column"
+                    style={{ fontSize: "30px" }}
+                  >
+                    <div>&#10142;</div>
+                  </div>
+                  <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                    <div className="d-flex justify-content-between w-100">
+                      <h3 className="mb-0" style={{ fontSize: "0.8rem" }}>
+                        Cash loan
+                      </h3>
+                      <h3
+                        className="mb-0 fw-bolder"
+                        style={{ fontSize: "0.8rem", fontWeight: 700 }}
+                      >
+                        21531,00 ₽
+                      </h3>
+                    </div>
+                    <div className="d-flex w-100 align-items-end gap-2">
+                      <ProgressBar
+                        now={100}
+                        className="mt-2 w-100"
+                        style={{ height: "5px" }}
+                      />
+                      <div
+                        className="d-flex text-muted small mb-0"
+                        style={{ fontSize: "0.8rem" }}
+                      >
+                        100%
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <hr />
+                <div className="d-flex align-items-center">
+                  <div
+                    className="p-2 justify-content-start align-items-start d-flex flex-column"
+                    style={{ fontSize: "30px" }}
+                  >
+                    <div>&#10142;</div>
+                  </div>
+                  <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                    <div className="d-flex justify-content-between w-100">
+                      <h3 className="mb-0" style={{ fontSize: "0.8rem" }}>
+                        Cash loan
+                      </h3>
+                      <h3
+                        className="mb-0 fw-bolder"
+                        style={{ fontSize: "0.8rem", fontWeight: 700 }}
+                      >
+                        21531,00 ₽
+                      </h3>
+                    </div>
+                    <div className="d-flex w-100 align-items-end gap-2">
+                      <ProgressBar
+                        now={100}
+                        className="mt-2 w-100"
+                        style={{ height: "5px" }}
+                      />
+                      <div
+                        className="d-flex text-muted small mb-0"
+                        style={{ fontSize: "0.8rem" }}
+                      >
+                        100%
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <hr />
+              </Accordion.Body>
+            </Accordion.Item>
+          </Accordion>
+          {/* <div>
+            <div className="d-flex flex-row gap-3 p-2">
+              <div
+                className="p-2 justify-content-start align-items-start d-flex flex-column"
+                style={{ fontSize: "30px" }}
+              >
+                <div>&#128512;</div>
+              </div>
+              <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                <h3
+                  className="mb-0 fw-bolder"
+                  style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                >
+                  -63.00 ₽
+                </h3>
+                <div
+                  className="text-muted small mb-1"
+                  style={{ fontSize: "0.8rem" }}
+                >
+                  Transport
+                </div>
+                <div
+                  className="text-muted small mb-1"
+                  style={{ fontSize: "0.8rem" }}
+                >
+                  Note
+                </div>
+              </div>
+              <div
+                className="p-0 m-0"
+                style={{ width: "100%", height: "100%" }}
+              >
+                <div
+                  className="text-muted small mb-1 text-end"
+                  style={{ fontSize: "0.8rem" }}
+                >
+                  09:14
+                </div>
+              </div>
+            </div>
+          </div> */}
+        </Card.Body>
+      </Card>
+    </>
+  );
+};
+export default AppointmentDashboard;

src/components/BalanceBlock/BalanceBlock.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Card } from "react-bootstrap";
+import AddOperationModal from "../../modals/AddOperationModal/AddOperationModal";
+
+const BalanceBlock = ({ balance }) => {
+  return (
+    <Card style={{ position: "fixed", bottom: 0, width: "100%" }}>
+      <Card.Body className="d-flex justify-content-between">
+        <div>
+          <div className="text-muted small mb-1" style={{ fontSize: "0.8rem" }}>
+            Balance
+          </div>
+          <h3
+            className="mb-0 fw-bolder"
+            style={{ fontSize: "1.1rem", fontWeight: 700 }}
+          >
+            40 407,17 ₽
+          </h3>
+        </div>
+        <AddOperationModal />
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default BalanceBlock;

src/components/FinancialDashboard/FinancialDashboard.jsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { Card, Col } from "react-bootstrap";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+} from "chart.js";
+// import { useTheme } from "../../contexts/ThemeContext";
+import styles from "./FinancialDashboard.module.css";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
+
+const FinancialDashboard = ({
+  chartData,
+  chartOptions,
+  maxValue,
+  LeftCardData,
+  RightCardData,
+}) => {
+  // const { theme } = useTheme();
+  // const [incomedata, setIncomeData] = useState(income);
+  // const [expensesdata, setExpensesData] = useState(expenses);
+
+  return (
+    <div
+      className="d-flex flex-column p-3 gap-3"
+      style={{
+        margin: "0 auto",
+        fontFamily: "Inter, sans-serif",
+      }}
+    >
+      {/* Карточка с диаграммой */}
+      <Card className="border-0 shadow-sm" style={{ borderRadius: "15px" }}>
+        <Card.Body className="p-4">
+          <div className="d-flex justify-content-between align-items-center mb-0">
+            <Col md={6} className="mb-0">
+              <Card className="border-0">
+                <Card.Body className="p-0">
+                  <div className="d-flex align-items-center p-0 m-0">
+                    <div
+                      style={{
+                        width: "10px",
+                        height: "10px",
+                        backgroundColor: "#3576C3",
+                        borderRadius: "50%",
+                        display: "inline-block",
+                        marginRight: "10px",
+                      }}
+                    />
+                    <div className="p-0 m-0">
+                      <h3
+                        className="mb-0 fw-bold"
+                        style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                      >
+                        {LeftCardData.value.toLocaleString("ru-RU", {
+                          minimumFractionDigits: 2,
+                        })}{" "}
+                        ₽
+                      </h3>
+                    </div>
+                  </div>
+                  <div
+                    className="text-muted small mb-1"
+                    style={{ fontSize: "0.8rem" }}
+                  >
+                    {LeftCardData.label}
+                  </div>
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col md={6} className="mb-0">
+              <Card className="border-0">
+                <Card.Body className="p-0">
+                  <div className="d-flex align-items-center">
+                    <div
+                      style={{
+                        width: "10px",
+                        height: "10px",
+                        backgroundColor: "#38393F",
+                        borderRadius: "50%",
+                        display: "inline-block",
+                        marginRight: "10px",
+                      }}
+                    />
+                    <div className="p-0">
+                      <h3
+                        className="mb-0 fw-bold"
+                        style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                      >
+                        {RightCardData.value.toLocaleString("ru-RU", {
+                          minimumFractionDigits: 2,
+                        })}{" "}
+                        ₽
+                      </h3>
+                    </div>
+                  </div>
+                  <div
+                    className="text-muted small mb-1"
+                    style={{ fontSize: "0.8rem" }}
+                  >
+                    {RightCardData.label}
+                  </div>
+                </Card.Body>
+              </Card>
+            </Col>
+          </div>
+
+          {/* Контейнер для диаграммы */}
+          <div className={styles.chartContainer}>
+            <Bar data={chartData} options={chartOptions} />
+          </div>
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};
+
+export default FinancialDashboard;

src/components/FinancialDashboard/FinancialDashboard.module.css

@@ -0,0 +1,13 @@
+.chartContainer {
+    margin: 0;
+    height: 200px;
+    width: auto;
+    position: relative;
+    margin-bottom: 0;
+}
+
+@media (max-width: 768px) {
+    .chartContainer {
+        height: 100px;
+    }
+}

src/components/NavigationBar/NavigationBar.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Navbar from "react-bootstrap/Navbar";
+import SettingsModal from "../../modals/SettingsModal/SettingsModal";
+
+const NavigationBar = () => {
+  return (
+    <Navbar
+      expand="lg"
+      className="justify-content-between"
+      style={{ padding: "1rem 1rem 0 1rem" }}
+    >
+      <Navbar.Brand href="/">Wallet</Navbar.Brand>
+      <SettingsModal />
+    </Navbar>
+  );
+};
+
+export default NavigationBar;

src/components/ThemeToggle.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Form, Row, Col } from "react-bootstrap";
+import { useTheme } from "../contexts/ThemeContext";
+
+const ThemeToggle = () => {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <>
+      <Form.Group as={Row}>
+        <Form.Label column>Dark Mode</Form.Label>
+        <Col className="d-flex align-items-center justify-content-end">
+          <Form.Check
+            type="switch"
+            id="dark-mode-switch"
+            checked={theme === "dark"}
+            onChange={toggleTheme}
+          />
+        </Col>
+      </Form.Group>
+    </>
+  );
+};
+
+export default ThemeToggle;

src/contexts/ThemeContext.js

@@ -0,0 +1,35 @@
+import React, { createContext, useState, useEffect, useContext } from "react";
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme");
+      const systemPreferDark = window.matchMedia(
+        "(prefers-color-scheme: dark)",
+      ).matches;
+      return savedTheme || (systemPreferDark ? "dark" : "light");
+    }
+    return "light";
+  });
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      document.body.setAttribute("data-bs-theme", theme);
+      localStorage.setItem("theme", theme);
+    }
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);

src/css/App.css

@@ -0,0 +1,36 @@
+/* src/App.css */
+body[data-bs-theme="dark"] {
+    background-color: #121212;
+    color: #f8f9fa;
+    .modal-content {
+        background-color: #121212 !important;
+    }
+    .nav-link.active {
+        background-color: #121212 !important;
+    }
+}
+
+body[data-bs-theme="light"] {
+    background-color: #f8f9fa;
+    color: #212529;
+}
+
+.progress {
+    border-radius: 20px;
+}
+
+.progress-bar {
+    border-radius: 20px;
+}
+
+.accordion-button {
+    padding: 10px !important;
+}
+
+.accordion-body {
+    padding: 0 10px !important;
+}
+
+hr {
+    margin: 0 !important;
+}

src/css/index.css

@@ -0,0 +1,19 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+        "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family:
+        source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.js

@@ -1,14 +1,25 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./css/index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { ThemeProvider } from "./contexts/ThemeContext";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const savedTheme =
+  localStorage.getItem("theme") ||
+  (window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light");
+document.body.setAttribute("data-bs-theme", savedTheme);
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function

src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/modals/AddOperationModal/AddOperationModal.jsx

@@ -0,0 +1,194 @@
+import { useState } from "react";
+import { useTheme } from "../../contexts/ThemeContext";
+import {
+  ListGroup,
+  Modal,
+  Button,
+  Card,
+  Form,
+  Row,
+  Col,
+} from "react-bootstrap";
+// import styles from "./HistoryModal.module.css";
+
+const AddOperationModal = ({ variant }) => {
+  const { theme } = useTheme();
+  const [show, setShow] = useState(false);
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  const [isIncome, setIsIncome] = useState(false);
+  const [isExpense, setIsExpense] = useState(true);
+  const [isNoteVisible, setIsNoteVisible] = useState(false);
+  const [amount, setAmount] = useState();
+  return (
+    <>
+      {variant ? (
+        <Button variant={variant} onClick={handleShow}>
+          &#10010;
+        </Button>
+      ) : (
+        <Button
+          className="fw-bold p-0 m-0"
+          variant="primary"
+          style={{ borderRadius: "50%", width: "40px", height: "40px" }}
+          onClick={handleShow}
+        >
+          &#10010;
+        </Button>
+      )}
+      <Modal show={show} onHide={handleClose} fullscreen={true}>
+        <Modal.Header className="d-flex align-items-center justify-content-between">
+          <spacer />
+          <Modal.Title>Add operation</Modal.Title>
+          <Button
+            variant={theme}
+            type="button"
+            onClick={handleClose}
+            style={{
+              borderRadius: "50%",
+              width: "30px",
+              height: "30px",
+              padding: "0",
+            }}
+          >
+            &#10005;
+          </Button>
+        </Modal.Header>
+        <Modal.Body className="p-0">
+          <div className="d-flex flex-column align-items-center justify-content-center m-2">
+            <h3
+              className="mb-0 fw-bolder text-start w-100"
+              style={{ fontSize: "1.1rem", fontWeight: 700 }}
+            >
+              Amount
+            </h3>
+            <div className="mb-3 d-flex gap-2 w-100 m-2">
+              <input
+                type="number"
+                className="form-control"
+                placeholder="-100 ₽"
+                value={amount}
+                onChange={(e) => setAmount(e.target.value)}
+              />
+              <Button variant={theme} onClick={() => setAmount("")}>
+                &#10005;
+              </Button>
+            </div>
+            <div className="d-flex gap-2 w-100">
+              <Button
+                variant={isIncome ? "primary" : theme}
+                className="w-100"
+                onClick={() => {
+                  setIsIncome(true);
+                  setIsExpense(false);
+                }}
+              >
+                Income
+              </Button>
+              <Button
+                variant={isExpense ? "primary" : theme}
+                className="w-100"
+                onClick={() => {
+                  setIsExpense(true);
+                  setIsIncome(false);
+                }}
+              >
+                Expense
+              </Button>
+            </div>
+          </div>
+          <div className="d-flex flex-column align-items-center justify-content-center m-2">
+            <h3
+              className="mb-0 fw-bolder text-start w-100"
+              style={{ fontSize: "1.1rem", fontWeight: 700 }}
+            >
+              Appointment
+            </h3>
+            <Button variant={theme} className="w-100 mt-3">
+              <div className="d-flex flex-row gap-3 p-2">
+                <div
+                  className="p-2 justify-content-start align-items-start d-flex flex-column"
+                  style={{ fontSize: "30px" }}
+                >
+                  <div>&#128512;</div>
+                </div>
+                <div className="d-flex flex-column p-0 justify-content-center align-items-start w-100">
+                  <h3
+                    className="mb-0 fw-bolder"
+                    style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                  >
+                    -63.00 ₽
+                  </h3>
+                  <div
+                    className="text-muted small mb-1"
+                    style={{ fontSize: "0.8rem" }}
+                  >
+                    Transport
+                  </div>
+                </div>
+              </div>
+            </Button>
+          </div>
+          <Card className="m-2">
+            <Card.Body>
+              <div
+                className="text-muted small mb-1"
+                style={{ fontSize: "0.8rem" }}
+              >
+                ADDITIONAL
+              </div>
+              <ListGroup>
+                <ListGroup.Item>
+                  <Form.Group as={Row}>
+                    <Form.Label column>Date</Form.Label>
+                    <Col>
+                      <Form.Control type="date" />
+                    </Col>
+                  </Form.Group>
+                </ListGroup.Item>
+                <ListGroup.Item>
+                  <Form.Group as={Row}>
+                    <Form.Label column>Tag</Form.Label>
+                    <Col>
+                      <Form.Control type="text" />
+                    </Col>
+                  </Form.Group>
+                </ListGroup.Item>
+                <ListGroup.Item>
+                  <Form.Group>
+                    <Row>
+                      <Form.Label column>Note</Form.Label>
+                      <Col className="d-flex align-items-center justify-content-end">
+                        <Form.Check
+                          type="switch"
+                          value={isNoteVisible}
+                          onChange={() => setIsNoteVisible(!isNoteVisible)}
+                        />
+                      </Col>
+                    </Row>
+                    <Row
+                      style={{ display: isNoteVisible ? "block" : "none" }}
+                      className="p-2"
+                    >
+                      <Form.Control type="text" placeholder="Your note text" />
+                    </Row>
+                  </Form.Group>
+                </ListGroup.Item>
+                <ListGroup.Item>
+                  <Form.Group as={Row}>
+                    <Form.Label column>Repeat payment</Form.Label>
+                    <Col className="d-flex align-items-center justify-content-end">
+                      <Form.Check type="switch" />
+                    </Col>
+                  </Form.Group>
+                </ListGroup.Item>
+              </ListGroup>
+              <Button className="w-100 mt-3">Add</Button>
+            </Card.Body>
+          </Card>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+export default AddOperationModal;

src/modals/AnalyticsModal/AnalyticsModal.jsx

@@ -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;

src/modals/AnalyticsModal/AnalyticsModal.module.css

@@ -0,0 +1,11 @@
+.scrollableContent {
+    height: calc(100vh - 220px);
+    bottom: 0;
+    overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+    .scrollableContent {
+        height: calc(100vh - 280px);
+    }
+}

src/modals/HistoryModal/HistoryModal.jsx

@@ -0,0 +1,652 @@
+import { useState } from "react";
+import { useTheme } from "../../contexts/ThemeContext";
+import { ListGroup, Tabs, Tab, Modal, Button } from "react-bootstrap";
+import styles from "./HistoryModal.module.css";
+import AddOperationModal from "../AddOperationModal/AddOperationModal";
+
+const HistoryModal = () => {
+  const { theme } = useTheme();
+  const [show, setShow] = useState(false);
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  return (
+    <>
+      <Button
+        variant={theme}
+        className="shadow-sm p-2"
+        style={{ width: "100%", borderRadius: "15px" }}
+        onClick={handleShow}
+      >
+        History
+      </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>History</Modal.Title>
+          <AddOperationModal variant={theme} />
+          {/* <Button variant={theme}>&#43;</Button> */}
+        </Modal.Header>
+        <Modal.Body>
+          <Tabs defaultActiveKey="D" id="history-tabs">
+            <Tab
+              eventKey="D"
+              title="D"
+              className="pt-2 pb-2"
+              // style={{ maxHeight: "calc(100vh - 200px)", overflowY: "auto" }}
+            >
+              <div className={styles.scrollableContent}>
+                <div className="d-flex m-1">
+                  <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                    <h3
+                      className="mb-0 fw-bolder"
+                      style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                    >
+                      25 Jul 2025
+                    </h3>
+                    <div
+                      className="d-flex text-muted small mb-1 w-100"
+                      style={{ fontSize: "0.8rem" }}
+                    >
+                      <div className="w-100">
+                        Income: <b>0,00 ₽</b>
+                      </div>
+                      <div className="w-100 text-end">
+                        Expense: <b>0,00 ₽</b>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <ListGroup className="mb-3 mt-0">
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128512;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                        >
+                          -63.00 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128508;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{
+                            fontSize: "1.1rem",
+                            fontWeight: 700,
+                            color: "#2DBB4D",
+                          }}
+                        >
+                          18000 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128512;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                        >
+                          -63.00 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                </ListGroup>
+                <div className="d-flex m-1">
+                  <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                    <h3
+                      className="mb-0 fw-bolder"
+                      style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                    >
+                      25 Jul 2025
+                    </h3>
+                    <div
+                      className="d-flex text-muted small mb-1 w-100"
+                      style={{ fontSize: "0.8rem" }}
+                    >
+                      <div className="w-100">
+                        Income: <b>0,00 ₽</b>
+                      </div>
+                      <div className="w-100 text-end">
+                        Expense: <b>0,00 ₽</b>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <ListGroup className="mb-3 mt-0">
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128512;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                        >
+                          -63.00 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128508;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{
+                            fontSize: "1.1rem",
+                            fontWeight: 700,
+                            color: "#2DBB4D",
+                          }}
+                        >
+                          18000 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128512;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                        >
+                          -63.00 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                </ListGroup>
+                <div className="d-flex m-1">
+                  <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                    <h3
+                      className="mb-0 fw-bolder"
+                      style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                    >
+                      25 Jul 2025
+                    </h3>
+                    <div
+                      className="d-flex text-muted small mb-1 w-100"
+                      style={{ fontSize: "0.8rem" }}
+                    >
+                      <div className="w-100">
+                        Income: <b>0,00 ₽</b>
+                      </div>
+                      <div className="w-100 text-end">
+                        Expense: <b>0,00 ₽</b>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <ListGroup className="mb-3 mt-0">
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128512;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                        >
+                          -63.00 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128508;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{
+                            fontSize: "1.1rem",
+                            fontWeight: 700,
+                            color: "#2DBB4D",
+                          }}
+                        >
+                          18000 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128512;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                        >
+                          -63.00 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                </ListGroup>
+                <div className="d-flex m-1">
+                  <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                    <h3
+                      className="mb-0 fw-bolder"
+                      style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                    >
+                      25 Jul 2025
+                    </h3>
+                    <div
+                      className="d-flex text-muted small mb-1 w-100"
+                      style={{ fontSize: "0.8rem" }}
+                    >
+                      <div className="w-100">
+                        Income: <b>0,00 ₽</b>
+                      </div>
+                      <div className="w-100 text-end">
+                        Expense: <b>0,00 ₽</b>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <ListGroup className="mb-3 mt-0">
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128512;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                        >
+                          -63.00 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128508;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{
+                            fontSize: "1.1rem",
+                            fontWeight: 700,
+                            color: "#2DBB4D",
+                          }}
+                        >
+                          18000 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                  <ListGroup.Item className="p-0">
+                    <div className="d-flex flex-row gap-3 p-2">
+                      <div
+                        className="p-2 justify-content-start align-items-start d-flex flex-column"
+                        style={{ fontSize: "30px" }}
+                      >
+                        <div>&#128512;</div>
+                      </div>
+                      <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
+                        <h3
+                          className="mb-0 fw-bolder"
+                          style={{ fontSize: "1.1rem", fontWeight: 700 }}
+                        >
+                          -63.00 ₽
+                        </h3>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Transport
+                        </div>
+                        <div
+                          className="text-muted small mb-1"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          Note
+                        </div>
+                      </div>
+                      <div
+                        className="p-0 m-0"
+                        style={{ width: "100%", height: "100%" }}
+                      >
+                        <div
+                          className="text-muted small mb-1 text-end"
+                          style={{ fontSize: "0.8rem" }}
+                        >
+                          09:14
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                </ListGroup>
+              </div>
+            </Tab>
+            <Tab eventKey="W" title="W" className="pt-2 pb-2"></Tab>
+            <Tab eventKey="M" title="M" className="pt-2 pb-2"></Tab>
+            <Tab eventKey="Y" title="Y" className="pt-2 pb-2"></Tab>
+          </Tabs>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+export default HistoryModal;

src/modals/HistoryModal/HistoryModal.module.css

@@ -0,0 +1,10 @@
+.scrollableContent {
+    height: calc(100vh - 220px);
+    overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+    .scrollableContent {
+        height: calc(100vh - 240px);
+    }
+}

src/modals/SettingsModal/SettingsModal.jsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { useTheme } from "../../contexts/ThemeContext";
+import { ListGroup, Modal, Button } from "react-bootstrap";
+import ThemeToggle from "../../components/ThemeToggle";
+
+const SettingsModal = () => {
+  const { theme } = useTheme();
+  const [show, setShow] = useState(false);
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  return (
+    <>
+      <Button
+        className="fw-bold p-0 m-0"
+        variant={theme}
+        style={{ borderRadius: "50%", width: "40px", height: "40px" }}
+        onClick={handleShow}
+      >
+        &#9881;
+      </Button>
+
+      <Modal show={show} onHide={handleClose} fullscreen={true}>
+        <Modal.Header className="d-flex align-items-center justify-content-between">
+          <Modal.Title>
+            <h1>Settings</h1>
+          </Modal.Title>
+          <Button
+            variant={theme}
+            type="button"
+            onClick={handleClose}
+            style={{
+              borderRadius: "50%",
+              width: "30px",
+              height: "30px",
+              padding: "0",
+            }}
+          >
+            &#10005;
+          </Button>
+        </Modal.Header>
+        <Modal.Body>
+          <ListGroup>
+            <ListGroup.Item>
+              <ThemeToggle />
+            </ListGroup.Item>
+          </ListGroup>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+export default SettingsModal;

src/modals/SettingsModal/SettingsModal.module.css

@@ -0,0 +1,10 @@
+.scrollableContent {
+    height: calc(100vh - 220px);
+    overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+    .scrollableContent {
+        height: calc(100vh - 240px);
+    }
+}

src/pages/Home.jsx

@@ -0,0 +1,110 @@
+import FinancialDashboard from "../components/FinancialDashboard/FinancialDashboard";
+import { Row, Col } from "react-bootstrap";
+import HistoryModal from "../modals/HistoryModal/HistoryModal";
+import AnalyticsModal from "../modals/AnalyticsModal/AnalyticsModal";
+import BalanceBlock from "../components/BalanceBlock/BalanceBlock";
+
+const Home = () => {
+  const weeklyData = [63, 63, 63, 63, 63, 63, 63];
+  const weeklyData1 = [20, 80, 50, 100, 1800, 60, 90];
+  const weeklyMaxValue = Math.max(...weeklyData, ...weeklyData1);
+  const chartData = {
+    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    datasets: [
+      {
+        data: weeklyData,
+        backgroundColor: "#3576C3",
+        categoryPercentage: 0.5,
+        borderRadius: 3,
+        responsive: true,
+      },
+      {
+        data: weeklyData1,
+        backgroundColor: "#38393F",
+        categoryPercentage: 0.5,
+        borderRadius: 3,
+        responsive: true,
+      },
+    ],
+  };
+  const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      y: {
+        display: false,
+        beginAtZero: true,
+        max: weeklyMaxValue * 1.1,
+      },
+      x: {
+        grid: {
+          display: false,
+          drawBorder: false,
+        },
+        ticks: {
+          color: "#6b7280",
+          font: {
+            size: 12,
+            weight: "500",
+          },
+        },
+      },
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        callbacks: {
+          label: function (context) {
+            let label = context.dataset.label || "";
+            if (label) {
+              label += ": ";
+            }
+            if (context.parsed.y !== null) {
+              label +=
+                `${weeklyData[context.dataIndex]}₽ ` +
+                `${weeklyData1[context.dataIndex]}₽`;
+            }
+            return label;
+          },
+        },
+      },
+    },
+  };
+  const income = 40407.17;
+  const expenses = 39985.23;
+
+  const LeftCardData = {
+    label: "Monthly Icome",
+    value: income,
+  };
+
+  const RightCardData = {
+    label: "Monthly Expenses",
+    value: expenses,
+  };
+
+  return (
+    <>
+      <FinancialDashboard
+        chartData={chartData}
+        chartOptions={chartOptions}
+        maxValue={weeklyMaxValue}
+        LeftCardData={LeftCardData}
+        RightCardData={RightCardData}
+      />
+      <Row className="m-1">
+        <Col>
+          <AnalyticsModal />
+        </Col>
+        <Col>
+          <HistoryModal />
+        </Col>
+      </Row>
+      <BalanceBlock />
+    </>
+  );
+};
+
+export default Home;

src/pages/NotFound.jsx

@@ -0,0 +1,14 @@
+import { Alert, Button } from "react-bootstrap";
+import { Link } from "react-router-dom";
+
+const NotFound = () => (
+  <Alert variant="danger" className="text-center">
+    <Alert.Heading>404 - Page Not Found</Alert.Heading>
+    <p>The page you're looking for doesn't exist.</p>
+    <Button as={Link} to="/" variant="outline-danger">
+      Go Home
+    </Button>
+  </Alert>
+);
+
+export default NotFound;

src/pages/Transactions.jsx

@@ -0,0 +1,9 @@
+const Transactions = () => {
+  return (
+    <>
+      <h1>Welcome to transactions</h1>
+    </>
+  );
+};
+
+export default Transactions;