сделал просмотр приемов и запланированных приемов по клику на ячейку календаря

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

@@ -7,15 +7,13 @@ import useAppointmentsUI from "./useAppointmentsUI.js";
 import useAppointments from "./useAppointments.js";
 import dayjs from 'dayjs';
 import LoadingIndicator from "../../Widgets/LoadingIndicator.jsx";
-import AppointmentFormModal
+import AppointmentFormModal from "./Components/AppointmentFormModal/AppointmentFormModal.jsx";
-    from "./Components/AppointmentFormModal/AppointmentFormModal.jsx";
 import { useDispatch } from "react-redux";
 import { closeModal, openModal } from "../../../Redux/Slices/appointmentsSlice.js";
-import AppointmentViewModal
+import AppointmentViewModal from "./Components/AppointmentViewModal/AppointmentViewModal.jsx";
-    from "./Components/AppointmentViewModal/AppointmentViewModal.jsx";
 import ScheduledAppointmentFormModal from "./Components/ScheduledAppintmentFormModal/ScheduledAppointmentFormModal.jsx";
-import ScheduledAppointmentsViewModal
+import ScheduledAppointmentsViewModal from "./Components/ScheduledAppointmentsViewModal/ScheduledAppointmentsViewModal.jsx";
-    from "./Components/ScheduledAppointmentsViewModal/ScheduledAppointmentsViewModal.jsx";
+import AppointmentsListModal from "./Components/AppointmentsListModal/AppointmentsListModal.jsx";
 
 const AppointmentsPage = () => {
     const appointmentsData = useAppointments();
@@ -83,7 +81,7 @@ const AppointmentsPage = () => {
                                 </Typography.Title>
                                 {appointmentsPageUI.upcomingEvents.length ? (
                                     <ul>
-                                        {appointmentsPageUI.upcomingEvents.map(app => (
+                                        {appointmentsPageUI.upcomingEvents.map((app) => (
                                             <li key={app.id}>
                                                 {dayjs(app.appointment_datetime || app.scheduled_datetime)
                                                     .format('DD.MM.YYYY HH:mm')} -
@@ -130,17 +128,14 @@ const AppointmentsPage = () => {
                         />
                     </FloatButton.Group>
 
-                    <AppointmentFormModal
+                    <AppointmentFormModal onCancel={handleCancelModal} />
-                        onCancel={handleCancelModal}
-                    />
-
                     <AppointmentViewModal
                         visible={appointmentsPageUI.selectedAppointment !== null}
                         onCancel={appointmentsPageUI.handleCancelViewModal}
                     />
-
                     <ScheduledAppointmentFormModal />
                     <ScheduledAppointmentsViewModal />
+                    <AppointmentsListModal />
                 </>
             )}
         </>

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

@@ -3,6 +3,7 @@ import 'dayjs/locale/ru';
 import CalendarCell from "../../../../Widgets/CalendarCell.jsx";
 import useAppointments from "../../useAppointments.js";
 import useAppointmentCalendarUI from "./useAppointmentCalendarUI.js";
+import AppointmentsListModal from "../AppointmentsListModal/AppointmentsListModal.jsx";
 
 const AppointmentsCalendarTab = () => {
     const appointmentsData = useAppointments();
@@ -40,6 +41,7 @@ const AppointmentsCalendarTab = () => {
                 onSelect={appointmentsCalendarUI.onSelect}
                 cellRender={dateCellRender}
             />
+            <AppointmentsListModal />
         </div>
     );
 };

web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/useAppointmentCalendarUI.js

@@ -4,8 +4,8 @@ import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import { Grid } from "antd";
 import {
-    openModal, setSelectedAppointment,
+    openAppointmentsListModal,
-    setSelectedAppointments,
+    setSelectedAppointment,
     setSelectedScheduledAppointment,
 } from "../../../../../Redux/Slices/appointmentsSlice.js";
 
@@ -17,7 +17,7 @@ const {useBreakpoint} = Grid;
 
 const useAppointmentCalendarUI = (appointments, scheduledAppointments) => {
     const dispatch = useDispatch();
-    const selectedDate = dayjs.tz(useSelector(state => state.appointmentsUI.selectedDate), 'Europe/Moscow');
+    const selectedDate = dayjs.tz(useSelector((state) => state.appointmentsUI.selectedDate), 'Europe/Moscow');
 
     const screens = useBreakpoint();
     const fullScreenCalendar = !screens.xs;
@@ -26,18 +26,13 @@ const useAppointmentCalendarUI = (appointments, scheduledAppointments) => {
 
     const onSelect = (date) => {
         const selectedDateStr = date.format('YYYY-MM-DD');
-        // dispatch(setSelectedDate(selectedDateStr));
+        const appointmentsForDate = appointments.filter((app) =>
-
-        const appointmentsForDate = appointments.filter(app =>
             dayjs(app.appointment_datetime).format('YYYY-MM-DD') === selectedDateStr
         );
-
+        const scheduledForDate = scheduledAppointments.filter((app) =>
-        const scheduledForDate = scheduledAppointments.filter(app =>
             dayjs(app.scheduled_datetime).format('YYYY-MM-DD') === selectedDateStr
         );
-
+        dispatch(openAppointmentsListModal([...appointmentsForDate, ...scheduledForDate]));
-        dispatch(setSelectedAppointments([...appointmentsForDate, ...scheduledForDate]));
-        dispatch(openModal());
     };
 
     const onOpenAppointmentModal = (appointment) => {
@@ -50,9 +45,8 @@ const useAppointmentCalendarUI = (appointments, scheduledAppointments) => {
 
     const getAppointmentsByListAndDate = (list, value, isScheduled = false) => {
         const date = value.format('YYYY-MM-DD');
-        return list.filter(app =>
+        return list.filter((app) =>
-            dayjs(isScheduled ? app.scheduled_datetime : app.appointment_datetime)
+            dayjs(isScheduled ? app.scheduled_datetime : app.appointment_datetime).format('YYYY-MM-DD') === date
-                .format('YYYY-MM-DD') === date
         );
     };
 

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

@@ -0,0 +1,78 @@
+import { Button, List, Modal, Typography } from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import dayjs from "dayjs";
+import {
+    closeAppointmentsListModal,
+    setSelectedAppointment,
+    setSelectedScheduledAppointment
+} from "../../../../../Redux/Slices/appointmentsSlice.js";
+
+const AppointmentsListModal = () => {
+    const dispatch = useDispatch();
+    const { appointmentsListModalVisible, selectedDateAppointments } = useSelector(
+        (state) => state.appointmentsUI
+    );
+
+    const handleCancel = () => {
+        dispatch(closeAppointmentsListModal());
+    };
+
+    const handleItemClick = (appointment) => {
+        if (appointment.appointment_datetime) {
+            dispatch(setSelectedAppointment(appointment));
+        } else {
+            dispatch(setSelectedScheduledAppointment(appointment));
+        }
+    };
+
+    return (
+        <Modal
+            title="Приемы на выбранную дату"
+            open={appointmentsListModalVisible}
+            onCancel={handleCancel}
+            footer={null}
+            width={600}
+        >
+            <Typography.Title level={4}>Список приемов</Typography.Title>
+            {selectedDateAppointments.length ? (
+                <List
+                    dataSource={selectedDateAppointments}
+                    renderItem={(item) => (
+                        <List.Item
+                            onClick={() => handleItemClick(item)}
+                            style={{ cursor: "pointer", padding: "8px 0" }}
+                        >
+                            <div>
+                                <p>
+                                    <b>Время:</b>{" "}
+                                    {item.appointment_datetime
+                                        ? dayjs(item.appointment_datetime).format("DD.MM.YYYY HH:mm")
+                                        : item.scheduled_datetime
+                                            ? dayjs(item.scheduled_datetime).format("DD.MM.YYYY HH:mm")
+                                            : "Не указано"}
+                                </p>
+                                <p>
+                                    <b>Тип:</b>{" "}
+                                    {item.appointment_datetime ? "Прием" : "Запланированный прием"}
+                                </p>
+                                <p>
+                                    <b>Пациент:</b>{" "}
+                                    {item.patient
+                                        ? `${item.patient.last_name} ${item.patient.first_name}`
+                                        : "Не указан"}
+                                </p>
+                            </div>
+                        </List.Item>
+                    )}
+                />
+            ) : (
+                <p>Нет приемов на эту дату</p>
+            )}
+            <Button onClick={handleCancel} style={{ marginTop: 16 }}>
+                Закрыть
+            </Button>
+        </Modal>
+    );
+};
+
+export default AppointmentsListModal;

web-app/src/Redux/Slices/appointmentsSlice.js

@@ -2,14 +2,15 @@ import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
     modalVisible: false,
-    collapsed: true,
+    collapsed: false,
     siderWidth: 300,
     hovered: false,
     selectedAppointment: null,
     selectedScheduledAppointment: null,
     scheduledModalVisible: false,
     scheduledData: null,
-    selectedAppointments: [], // Новое поле для хранения массива выбранных приемов
+    appointmentsListModalVisible: false,
+    selectedDateAppointments: [],
 };
 
 const appointmentsSlice = createSlice({
@@ -47,8 +48,13 @@ const appointmentsSlice = createSlice({
             state.modalVisible = true;
             state.scheduledData = action.payload;
         },
-        setSelectedAppointments(state, action) {
+        openAppointmentsListModal(state, action) {
-            state.selectedAppointments = action.payload;
+            state.appointmentsListModalVisible = true;
+            state.selectedDateAppointments = action.payload;
+        },
+        closeAppointmentsListModal(state) {
+            state.appointmentsListModalVisible = false;
+            state.selectedDateAppointments = [];
         },
     },
 });
@@ -57,13 +63,15 @@ export const {
     openModal,
     closeModal,
     toggleSider,
+    setSiderWidth,
     setHovered,
     setSelectedAppointment,
     setSelectedScheduledAppointment,
     openScheduledModal,
     closeScheduledModal,
     openModalWithScheduledData,
-    setSelectedAppointments,
+    openAppointmentsListModal,
+    closeAppointmentsListModal,
 } = appointmentsSlice.actions;
 
 export default appointmentsSlice.reducer;