diff --git a/src/modals/AnalyticsModal/AnalyticsModal.module.css b/frontend/src/modals/AnalyticsModal/AnalyticsModal.module.css
similarity index 100%
rename from src/modals/AnalyticsModal/AnalyticsModal.module.css
rename to frontend/src/modals/AnalyticsModal/AnalyticsModal.module.css
diff --git a/frontend/src/modals/CategoriesModal/CategoriesModal.jsx b/frontend/src/modals/CategoriesModal/CategoriesModal.jsx
new file mode 100644
index 0000000..1e3ef48
--- /dev/null
+++ b/frontend/src/modals/CategoriesModal/CategoriesModal.jsx
@@ -0,0 +1,148 @@
+import { useEffect, useState, useMemo, useCallback } from "react";
+import { useTheme } from "../../contexts/ThemeContext";
+import {
+ Modal,
+ Button,
+ Form,
+ InputGroup,
+ Tabs,
+ Tab,
+ Dropdown,
+ DropdownButton,
+} from "react-bootstrap";
+import styles from "./CategoriesModal.module.css";
+import CategorySign from "./components/CategorySign/CategorySign";
+import AddCategoryModal from "../../modals/AddCategoryModal/AddCategoryModal";
+import fetchCategories from "../../logic/category/GetAllCategories";
+
+const CategoriesModal = ({ variant }) => {
+ let [expenseCategories, setExpenseCategories] = useState([]);
+ const [incomeCategories, setIncomeCategories] = useState([]);
+ const { theme } = useTheme();
+ const [show, setShow] = useState(false);
+ const [searchTerm, setSearchTerm] = useState("");
+ const handleClose = () => setShow(false);
+ const handleShow = () => setShow(true);
+ useEffect(() => {
+ fetchCategories().then((data) => {
+ setExpenseCategories(
+ data.filter((category) => category.type === "expense"),
+ );
+ setIncomeCategories(
+ data.filter((category) => category.type === "income"),
+ );
+ console.log(data);
+ });
+ }, []);
+ const filteredExpenseCategories = useMemo(() => {
+ if (!searchTerm) return expenseCategories;
+ const term = searchTerm.toLowerCase();
+ return expenseCategories.filter((category) =>
+ category.title.toLowerCase().includes(term),
+ );
+ }, [expenseCategories, searchTerm]);
+ const filteredIncomeCategories = useMemo(() => {
+ if (!searchTerm) return incomeCategories;
+ const term = searchTerm.toLowerCase();
+ return incomeCategories.filter((category) =>
+ category.title.toLowerCase().includes(term),
+ );
+ }, [incomeCategories, searchTerm]);
+ const handleSearch = useCallback((e) => {
+ setSearchTerm(e.target.value);
+ }, []);
+ return (
+ <>
+
+
+
+
+
+
+
Categories
+
+
+
+
+
+ Reorder
+
+
+
+
+ ☌
+
+
+
+
+ {filteredIncomeCategories.map((category) => (
+
+ ))}
+
+
+
+
+ {filteredExpenseCategories.map((category) => (
+
+ ))}
+
+
+
+
+
+
+ );
+};
+export default CategoriesModal;
diff --git a/frontend/src/modals/CategoriesModal/CategoriesModal.module.css b/frontend/src/modals/CategoriesModal/CategoriesModal.module.css
new file mode 100644
index 0000000..8626f1c
--- /dev/null
+++ b/frontend/src/modals/CategoriesModal/CategoriesModal.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);
+ }
+}
diff --git a/frontend/src/modals/CategoriesModal/components/CategorySign/CategorySign.jsx b/frontend/src/modals/CategoriesModal/components/CategorySign/CategorySign.jsx
new file mode 100644
index 0000000..0a4361a
--- /dev/null
+++ b/frontend/src/modals/CategoriesModal/components/CategorySign/CategorySign.jsx
@@ -0,0 +1,66 @@
+import { useTheme } from "../../../../contexts/ThemeContext";
+import { Button } from "react-bootstrap";
+import styles from "./CategorySign.module.css";
+import classNames from "classnames";
+
+const CategorySign = ({ icon, title, subcategories }) => {
+ const { theme } = useTheme();
+ return (
+
+ );
+};
+
+export default CategorySign;
diff --git a/frontend/src/modals/CategoriesModal/components/CategorySign/CategorySign.module.css b/frontend/src/modals/CategoriesModal/components/CategorySign/CategorySign.module.css
new file mode 100644
index 0000000..f199a05
--- /dev/null
+++ b/frontend/src/modals/CategoriesModal/components/CategorySign/CategorySign.module.css
@@ -0,0 +1,7 @@
+.hideScrollbar {
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+.hideScrollbar::-webkit-scrollbar {
+ display: none;
+}
diff --git a/frontend/src/modals/HistoryModal/HistoryModal.jsx b/frontend/src/modals/HistoryModal/HistoryModal.jsx
new file mode 100644
index 0000000..c2a7a85
--- /dev/null
+++ b/frontend/src/modals/HistoryModal/HistoryModal.jsx
@@ -0,0 +1,186 @@
+import { useState, useEffect } 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";
+import GetAllOperation from "../../logic/operation/GetAllOperation";
+import OperationSign from "./components/OperationSign/OperationSign";
+import DayTitle from "../../components/DayTitle";
+import {
+ processMonthlyOperations,
+ processOperations,
+ processWeeklyOperations,
+ processYearlyOperations,
+} from "./logic/groupOperations";
+import { formatWeekRange } from "./logic/week";
+
+const HistoryModal = () => {
+ const { theme } = useTheme();
+ const [show, setShow] = useState(false);
+ const handleClose = () => setShow(false);
+ const handleShow = () => setShow(true);
+ const [grouped, setGrouped] = useState({});
+ const [sortedGroupKeys, setSortedGroupKeys] = useState([]);
+ const [groupedWeek, setGroupedWeek] = useState({});
+ const [sortedGroupKeysWeek, setSortedGroupKeysWeek] = useState([]);
+ const [groupedMonth, setGroupedMonth] = useState({});
+ const [sortedGroupKeysMonth, setSortedGroupKeysMonth] = useState([]);
+ const [groupedYear, setGroupedYear] = useState({});
+ const [sortedGroupKeysYear, setSortedGroupKeysYear] = useState([]);
+ useEffect(() => {
+ GetAllOperation().then((data) => {
+ console.log(data);
+ const processop = processOperations(data);
+ setGrouped(processop.grouped);
+ setSortedGroupKeys(processop.sortedGroupKeys);
+ console.log(processop, processOperations(data));
+ const processopWeek = processWeeklyOperations(data);
+ setGroupedWeek(processopWeek.grouped);
+ setSortedGroupKeysWeek(processopWeek.sortedKeys);
+ console.log(processopWeek, processWeeklyOperations(data));
+ const processopMonth = processMonthlyOperations(data);
+ setGroupedMonth(processopMonth.grouped);
+ setSortedGroupKeysMonth(processopMonth.sortedKeys);
+ console.log(processopMonth, processMonthlyOperations(data));
+ const processopYear = processYearlyOperations(data);
+ setGroupedYear(processopYear.grouped);
+ setSortedGroupKeysYear(processopYear.sortedKeys);
+ console.log(processopYear, processYearlyOperations(data));
+ });
+ }, []);
+ return (
+ <>
+
+
+
+
+
+ History
+
+ {/* */}
+
+
+
+
+
+ {sortedGroupKeys.map((dateKey) => {
+ const group = grouped[dateKey];
+ return (
+
+
+
+ {group.operations.map((operation) => (
+
+
+
+ ))}
+
+
+ );
+ })}
+
+ {sortedGroupKeysWeek.map((weekKey) => {
+ const group = groupedWeek[weekKey];
+ return (
+
+
+
+ {group.operations.map((operation) => (
+
+
+
+ ))}
+
+
+ );
+ })}
+
+ {sortedGroupKeysMonth.map((monthKey) => {
+ const group = groupedMonth[monthKey];
+ return (
+
+
+
+ {group.operations.map((operation) => (
+
+
+
+ ))}
+
+
+ );
+ })}
+
+ {sortedGroupKeysYear.map((yearKey) => {
+ const group = groupedYear[yearKey];
+ return (
+
+
+
+ {group.operations.map((operation) => (
+
+
+
+ ))}
+
+
+ );
+ })}
+
+
+ );
+};
+export default HistoryModal;
diff --git a/src/modals/HistoryModal/HistoryModal.module.css b/frontend/src/modals/HistoryModal/HistoryModal.module.css
similarity index 100%
rename from src/modals/HistoryModal/HistoryModal.module.css
rename to frontend/src/modals/HistoryModal/HistoryModal.module.css
diff --git a/frontend/src/modals/HistoryModal/components/OperationSign/OperationSign.jsx b/frontend/src/modals/HistoryModal/components/OperationSign/OperationSign.jsx
new file mode 100644
index 0000000..330ad3f
--- /dev/null
+++ b/frontend/src/modals/HistoryModal/components/OperationSign/OperationSign.jsx
@@ -0,0 +1,60 @@
+import getDateString from "../../../../logic/getDateString";
+// import { Button } from "react-bootstrap";
+// import classNames from "classnames";
+// import styles from "./OperationSign.module.css";
+
+const OperationSign = ({ operation }) => {
+ return (
+
+
+
+
+
+ {operation.type === "income" ? "" : "-"}
+ {operation.amount} ₽
+
+
+ {operation.category}
+
+ {!operation.subcategory ? (
+ ""
+ ) : (
+
+ {operation.subcategory.title}
+
+ )}
+
+ {operation.note && operation.note !== ""
+ ? operation.note
+ : "No note"}
+
+
+
+
+ {getDateString(operation.date)}
+
+
+
+
+ );
+};
+
+export default OperationSign;
diff --git a/frontend/src/modals/HistoryModal/components/OperationSign/OperationSign.module.css b/frontend/src/modals/HistoryModal/components/OperationSign/OperationSign.module.css
new file mode 100644
index 0000000..f199a05
--- /dev/null
+++ b/frontend/src/modals/HistoryModal/components/OperationSign/OperationSign.module.css
@@ -0,0 +1,7 @@
+.hideScrollbar {
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+.hideScrollbar::-webkit-scrollbar {
+ display: none;
+}
diff --git a/frontend/src/modals/HistoryModal/logic/groupOperations.js b/frontend/src/modals/HistoryModal/logic/groupOperations.js
new file mode 100644
index 0000000..28bdc5d
--- /dev/null
+++ b/frontend/src/modals/HistoryModal/logic/groupOperations.js
@@ -0,0 +1,175 @@
+import { getMonday } from "./week";
+
+const groupOperationsByDate = (operations) => {
+ const groups = {};
+ operations.forEach((operation) => {
+ const date = new Date(operation.date);
+
+ const dateKey = [
+ date.getFullYear(),
+ String(date.getMonth() + 1).padStart(2, "0"),
+ String(date.getDate()).padStart(2, "0"),
+ ].join("-");
+
+ if (!groups[dateKey]) {
+ groups[dateKey] = {
+ dateObj: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
+ operations: [],
+ income: 0,
+ expense: 0,
+ };
+ }
+ groups[dateKey].operations.push(operation);
+ operation.type === "income"
+ ? (groups[dateKey].income += operation.amount)
+ : (groups[dateKey].expense += operation.amount);
+ });
+ return groups;
+};
+
+const processOperations = (operations) => {
+ const grouped = groupOperationsByDate(operations);
+ const sortedGroupKeys = Object.keys(grouped).sort(
+ (a, b) => new Date(b) - new Date(a),
+ );
+
+ sortedGroupKeys.forEach((key) => {
+ grouped[key].operations.sort((a, b) => new Date(b.date) - new Date(a.date));
+ });
+ return { grouped, sortedGroupKeys };
+};
+
+const groupOperationsByWeek = (operations) => {
+ const groups = {};
+
+ operations.forEach((operation) => {
+ const date = new Date(operation.date);
+ const monday = getMonday(date);
+ const weekKey = monday.toISOString().split("T")[0]; // YYYY-MM-DD
+
+ if (!groups[weekKey]) {
+ groups[weekKey] = {
+ monday: new Date(monday), // Сохраняем объект Date
+ operations: [],
+ income: 0,
+ expense: 0,
+ };
+ }
+
+ groups[weekKey].operations.push(operation);
+ operation.type === "income"
+ ? (groups[weekKey].income += operation.amount)
+ : (groups[weekKey].expense += operation.amount);
+ });
+
+ return groups;
+};
+
+const processWeeklyOperations = (operations) => {
+ const grouped = groupOperationsByWeek(operations);
+
+ // Сортировка недель (от новых к старым)
+ const sortedKeys = Object.keys(grouped).sort(
+ (a, b) => new Date(b) - new Date(a),
+ );
+
+ // Сортировка транзакций внутри недель (от новых к старым)
+ sortedKeys.forEach((key) => {
+ grouped[key].operations.sort((a, b) => new Date(b.date) - new Date(a.date));
+ });
+
+ return { grouped, sortedKeys };
+};
+
+// Группировка транзакций по месяцу и году
+const groupOperationsByMonth = (operations) => {
+ const groups = {};
+
+ operations.forEach((operation) => {
+ const date = new Date(operation.date);
+ // Формируем ключ в формате "Год-Месяц" (например: "2025-08")
+ const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+
+ if (!groups[monthKey]) {
+ groups[monthKey] = {
+ monthDate: new Date(date.getFullYear(), date.getMonth(), 1), // Первый день месяца
+ operations: [],
+ income: 0,
+ expense: 0,
+ };
+ }
+
+ groups[monthKey].operations.push(operation);
+ operation.type === "income"
+ ? (groups[monthKey].income += operation.amount)
+ : (groups[monthKey].expense += operation.amount);
+ });
+
+ return groups;
+};
+
+// Обработка и сортировка транзакций
+const processMonthlyOperations = (operations) => {
+ const grouped = groupOperationsByMonth(operations);
+
+ // Сортировка месяцев (от новых к старым)
+ const sortedKeys = Object.keys(grouped).sort(
+ (a, b) => new Date(b) - new Date(a),
+ );
+
+ // Сортировка транзакций внутри месяцев (от новых к старым)
+ sortedKeys.forEach((key) => {
+ grouped[key].operations.sort((a, b) => new Date(b.date) - new Date(a.date));
+ });
+
+ return { grouped, sortedKeys };
+};
+
+// Группировка транзакций по году
+const groupOperationsByYear = (operations) => {
+ const groups = {};
+
+ operations.forEach((operation) => {
+ const date = new Date(operation.date);
+ const year = date.getFullYear();
+ const yearKey = String(year);
+
+ if (!groups[yearKey]) {
+ groups[yearKey] = {
+ year,
+ operations: [],
+ income: 0,
+ expense: 0,
+ };
+ }
+
+ groups[yearKey].operations.push(operation);
+ operation.type === "income"
+ ? (groups[yearKey].income += operation.amount)
+ : (groups[yearKey].expense += operation.amount);
+ });
+
+ return groups;
+};
+
+// Обработка и сортировка транзакций
+const processYearlyOperations = (operations) => {
+ const grouped = groupOperationsByYear(operations);
+
+ // Сортировка годов (от новых к старым)
+ const sortedKeys = Object.keys(grouped).sort((a, b) => b - a);
+
+ // Сортировка транзакций внутри годов (от новых к старым)
+ sortedKeys.forEach((key) => {
+ grouped[key].operations.sort((a, b) => new Date(b.date) - new Date(a.date));
+ });
+
+ return { grouped, sortedKeys };
+};
+
+export {
+ processOperations,
+ processWeeklyOperations,
+ processMonthlyOperations,
+ processYearlyOperations,
+};
diff --git a/frontend/src/modals/HistoryModal/logic/week.js b/frontend/src/modals/HistoryModal/logic/week.js
new file mode 100644
index 0000000..da67bbd
--- /dev/null
+++ b/frontend/src/modals/HistoryModal/logic/week.js
@@ -0,0 +1,29 @@
+// Получение даты понедельника для любой даты
+const getMonday = (date) => {
+ const d = new Date(date);
+ const day = d.getDay(); // 0 (воскресенье) - 6 (суббота)
+ const diff = d.getDate() - day + (day === 0 ? -6 : 1); // Коррекция для воскресенья
+ return new Date(d.setDate(diff));
+};
+
+// Форматирование диапазона недели
+const formatWeekRange = (monday) => {
+ const start = new Date(monday);
+ const end = new Date(monday);
+ end.setDate(start.getDate() + 6);
+
+ const startStr = start.toLocaleDateString("ru-RU", {
+ day: "numeric",
+ month: "short",
+ });
+
+ const endStr = end.toLocaleDateString("ru-RU", {
+ day: "numeric",
+ month: "short",
+ year: "numeric",
+ });
+
+ return `${startStr} - ${endStr}`;
+};
+
+export { getMonday, formatWeekRange };
diff --git a/src/modals/SettingsModal/SettingsModal.jsx b/frontend/src/modals/SettingsModal/SettingsModal.jsx
similarity index 60%
rename from src/modals/SettingsModal/SettingsModal.jsx
rename to frontend/src/modals/SettingsModal/SettingsModal.jsx
index d2ae274..00f346a 100644
--- a/src/modals/SettingsModal/SettingsModal.jsx
+++ b/frontend/src/modals/SettingsModal/SettingsModal.jsx
@@ -2,6 +2,8 @@ import { useState } from "react";
import { useTheme } from "../../contexts/ThemeContext";
import { ListGroup, Modal, Button } from "react-bootstrap";
import ThemeToggle from "../../components/ThemeToggle";
+import CategoriesModal from "../../modals/CategoriesModal/CategoriesModal";
+import logout from "../../logic/logout";
const SettingsModal = () => {
const { theme } = useTheme();
@@ -39,11 +41,36 @@ const SettingsModal = () => {
+
+ DATA
+
+
+
+
+
+
+
+ APPLICATION
+
+
+ ACCOUNT
+
+
+
+
+
+
diff --git a/src/modals/SettingsModal/SettingsModal.module.css b/frontend/src/modals/SettingsModal/SettingsModal.module.css
similarity index 100%
rename from src/modals/SettingsModal/SettingsModal.module.css
rename to frontend/src/modals/SettingsModal/SettingsModal.module.css
diff --git a/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
similarity index 100%
rename from src/pages/Home.jsx
rename to frontend/src/pages/Home.jsx
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
new file mode 100644
index 0000000..caf73ac
--- /dev/null
+++ b/frontend/src/pages/Login.jsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { Modal, Card, Button, Form } from "react-bootstrap";
+import InputTitle from "../components/InputTitle";
+import login from "../logic/login";
+
+const Login = () => {
+ const [show, setShow] = useState(true);
+ // const handleClose = () => setShow(false);
+ const [userdata, setUserdata] = useState({ username: "", password: "" });
+ return (
+
+
+ Login
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Login;
diff --git a/src/pages/NotFound.jsx b/frontend/src/pages/NotFound.jsx
similarity index 100%
rename from src/pages/NotFound.jsx
rename to frontend/src/pages/NotFound.jsx
diff --git a/src/reportWebVitals.js b/frontend/src/reportWebVitals.js
similarity index 100%
rename from src/reportWebVitals.js
rename to frontend/src/reportWebVitals.js
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
new file mode 100644
index 0000000..b68cdac
--- /dev/null
+++ b/frontend/src/routes.js
@@ -0,0 +1,8 @@
+const host = window.location.origin;
+const prefix = "/api";
+const routes = {
+ token: `${host}${prefix}/token`,
+ categories: `${host}${prefix}/category`,
+ operations: `${host}${prefix}/operation`,
+};
+export default routes;
diff --git a/src/setupTests.js b/frontend/src/setupTests.js
similarity index 100%
rename from src/setupTests.js
rename to frontend/src/setupTests.js
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render(
);
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/modals/HistoryModal/HistoryModal.jsx b/src/modals/HistoryModal/HistoryModal.jsx
deleted file mode 100644
index 29ef4de..0000000
--- a/src/modals/HistoryModal/HistoryModal.jsx
+++ /dev/null
@@ -1,652 +0,0 @@
-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 (
- <>
-
-
-
-
-
- History
-
- {/* */}
-
-
-
-
-
-
-
-
- 25 Jul 2025
-
-
-
- Income: 0,00 ₽
-
-
- Expense: 0,00 ₽
-
-
-
-
-
-
-
-
-
-
- -63.00 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
-
- 18000 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
-
- -63.00 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
-
- 25 Jul 2025
-
-
-
- Income: 0,00 ₽
-
-
- Expense: 0,00 ₽
-
-
-
-
-
-
-
-
-
-
- -63.00 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
-
- 18000 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
-
- -63.00 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
-
- 25 Jul 2025
-
-
-
- Income: 0,00 ₽
-
-
- Expense: 0,00 ₽
-
-
-
-
-
-
-
-
-
-
- -63.00 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
-
- 18000 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
-
- -63.00 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
-
- 25 Jul 2025
-
-
-
- Income: 0,00 ₽
-
-
- Expense: 0,00 ₽
-
-
-
-
-
-
-
-
-
-
- -63.00 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
-
- 18000 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
-
- -63.00 ₽
-
-
- Transport
-
-
- Note
-
-
-
-
-
-
- );
-};
-export default HistoryModal;