refactor: appointments UI

Перемещены и переименованы компоненты Appointments.

web-app/src/Components/Layouts/MainLayout.jsx

@@ -33,10 +33,8 @@ const MainLayout = () => {
     }
 
     menuItems.push(
-        mainLayoutData.getItem("Мой профиль", "profile", <UserOutlined/>, [
         mainLayoutData.getItem("Перейти в профиль", "/profile", <UserOutlined/>),
         mainLayoutData.getItem("Выйти", "logout", <LogoutOutlined/>)
-        ])
     );
 
     if (mainLayoutData.isUserError) {
@@ -45,6 +43,56 @@ const MainLayout = () => {
 
     return (
         <Layout style={{minHeight: "100vh"}}>
+            {mainLayoutData.screens.xs ? (
+                <>
+                    <Content style={{
+                        margin: "0 8px",
+                        padding: 24,
+                        flex: 1,
+                        overflow: "auto",
+                        background: "#fff",
+                        borderRadius: 8,
+                        marginTop: "8px"
+                    }}>
+                        {mainLayoutData.isUserLoading ? (
+                            <LoadingIndicator/>
+                        ) : (
+                            <Outlet/>
+                        )}
+                    </Content>
+                    <Layout.Header style={{
+                        position: "fixed",
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        padding: "0 16px",
+                        background: "#001529",
+                        zIndex: 1000
+                    }}>
+                        <div style={{display: "flex", alignItems: "center", paddingRight: 16}}>
+                            <img
+                                src="/logo_rounded.png"
+                                alt="Логотип"
+                                style={{width: 40}}
+                            />
+                        </div>
+                        <Menu
+                            theme="dark"
+                            mode="horizontal"
+                            selectedKeys={[mainLayoutData.location.pathname]}
+                            items={menuItems}
+                            onClick={mainLayoutData.handleMenuClick}
+                            style={{flex: 1, minWidth: 0}}
+                        />
+                    </Layout.Header>
+                    <Footer style={{textAlign: "center", padding: "12px 0", marginBottom: 48}}>
+                        Visus+ © {new Date().getFullYear()}
+                    </Footer>
+                </>
+            ) : (
+                <>
                     <Sider
                         collapsible={!mainLayoutData.screens.xs}
                         collapsed={mainLayoutData.collapsed}
@@ -87,6 +135,9 @@ const MainLayout = () => {
                         </Content>
                         <Footer style={{textAlign: "center"}}>Visus+ © {new Date().getFullYear()}</Footer>
                     </Layout>
+                </>
+            )}
+
         </Layout>
     );
 };

web-app/src/Components/Pages/AppointmentsPage/AppointmentsPage.jsx

@@ -7,7 +7,7 @@ import {
     PlusOutlined,
     ClockCircleOutlined,
 } from "@ant-design/icons";
-import AppointmentsCalendarTab from "./Components/AppointmentCalendarTab/AppointmentsCalendarTab.jsx";
+import AppointmentsCalendar from "./Components/AppointmentCalendar/AppointmentsCalendar.jsx";
 import useAppointments from "./useAppointments.js";
 import dayjs from 'dayjs';
 import LoadingIndicator from "../../Widgets/LoadingIndicator/LoadingIndicator.jsx";
@@ -87,7 +87,7 @@ const AppointmentsPage = () => {
                             min="25%"
                             max="90%"
                         >
-                            <AppointmentsCalendarTab
+                            <AppointmentsCalendar
                                 currentMonth={currentMonth}
                                 onMonthChange={handleMonthChange}
                                 appointments={appointments} // Добавляем

web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendar/AppointmentsCalendar.jsx

@@ -1,13 +1,13 @@
 import {Calendar} from "antd";
 import "dayjs/locale/ru";
 import CalendarCell from "../CalendarCell/CalendarCell.jsx";
-import useAppointmentCalendarUI from "./useAppointmentCalendarUI.js";
+import useAppointmentCalendar from "./useAppointmentCalendar.js";
 import AppointmentsListModal from "../AppointmentsListModal/AppointmentsListModal.jsx";
 import dayjs from "dayjs";
 import PropTypes from "prop-types";
 
-const AppointmentsCalendarTab = ({currentMonth, onMonthChange, appointments, scheduledAppointments}) => {
+const AppointmentsCalendar = ({currentMonth, onMonthChange, appointments, scheduledAppointments}) => {
-    const appointmentsCalendarUI = useAppointmentCalendarUI(appointments, scheduledAppointments);
+    const appointmentsCalendarUI = useAppointmentCalendar(appointments, scheduledAppointments);
 
     const dateCellRender = (value) => {
         const appointmentsForDate = appointmentsCalendarUI.getAppointmentsByListAndDate(
@@ -39,12 +39,11 @@ const AppointmentsCalendarTab = ({currentMonth, onMonthChange, appointments, sch
         <div style={appointmentsCalendarUI.calendarContainerStyle}>
             <Calendar
                 fullscreen={appointmentsCalendarUI.fullScreenCalendar}
-                value={currentMonth} // Используем currentMonth вместо selectedDate
+                value={currentMonth}
-                onSelect={appointmentsCalendarUI.onSelect}
                 onPanelChange={(value, mode) => {
                     appointmentsCalendarUI.onPanelChange(value, mode);
                     if (mode === "month") {
-                        onMonthChange(value); // Вызываем onMonthChange при смене месяца
+                        onMonthChange(value);
                     }
                 }}
                 cellRender={dateCellRender}
@@ -54,11 +53,11 @@ const AppointmentsCalendarTab = ({currentMonth, onMonthChange, appointments, sch
     );
 };
 
-AppointmentsCalendarTab.propTypes = {
+AppointmentsCalendar.propTypes = {
     currentMonth: PropTypes.object.isRequired,
     onMonthChange: PropTypes.func.isRequired,
     appointments: PropTypes.array.isRequired,
     scheduledAppointments: PropTypes.array.isRequired,
 };
 
-export default AppointmentsCalendarTab;
+export default AppointmentsCalendar;

web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendar/useAppointmentCalendar.js

@@ -17,7 +17,7 @@ dayjs.tz.setDefault("Europe/Moscow");
 
 const { useBreakpoint } = Grid;
 
-const useAppointmentCalendarUI = (appointments, scheduledAppointments) => {
+const useAppointmentCalendar = (appointments, scheduledAppointments) => {
     const dispatch = useDispatch();
     const selectedDate = dayjs.tz(useSelector((state) => state.appointmentsUI.selectedDate), "Europe/Moscow");
 
@@ -75,4 +75,4 @@ const useAppointmentCalendarUI = (appointments, scheduledAppointments) => {
     };
 };
 
-export default useAppointmentCalendarUI;
+export default useAppointmentCalendar;

web-app/src/Components/Pages/AppointmentsPage/Components/CalendarCell/CalendarCell.jsx

@@ -2,7 +2,7 @@ import {Badge, Col, Tag, Tooltip} from "antd";
 import PropTypes from "prop-types";
 import {AppointmentPropType} from "../../../../../Types/appointmentPropType.js";
 import {ScheduledAppointmentPropType} from "../../../../../Types/scheduledAppointmentPropType.js";
-import useCalendarCellUI from "./useCalendarCellUI.js";
+import useCalendarCell from "./useCalendarCell.js";
 
 const CalendarCell = ({allAppointments, onCellClick, onItemClick}) => {
     const {
@@ -18,7 +18,7 @@ const CalendarCell = ({allAppointments, onCellClick, onItemClick}) => {
         getBadgeText,
         getTagColor,
         getBadgeStatus,
-    } = useCalendarCellUI();
+    } = useCalendarCell();
 
     return (
         <div

web-app/src/Components/Pages/AppointmentsPage/Components/CalendarCell/useCalendarCell.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 
-const useCalendarCellUI = () => {
+const useCalendarCell = () => {
     const containerRef = useRef(null);
     const [isCompressed, setIsCompressed] = useState(false);
     const COMPRESSION_THRESHOLD = 70;
@@ -53,7 +53,7 @@ const useCalendarCellUI = () => {
 
     const compressedCountStyle = {
         position: "absolute",
-        top: 2,
+        bottom: 12,
         right: 2,
         fontSize: 10,
         fontWeight: "bold",
@@ -108,4 +108,4 @@ const useCalendarCellUI = () => {
     };
 };
 
-export default useCalendarCellUI;
+export default useCalendarCell;