0.2.0

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "bbuddy-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bbuddy-ui",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
         "@ant-design/cssinjs": "^1.18.1",
         "@ant-design/icons": "^5.2.6",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bbuddy-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev -p 4200",

src/actions/hooks/useRoomDetails.ts

@@ -0,0 +1,42 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { AUTH_TOKEN_KEY } from '../../constants/common';
+import { Room } from '../../types/rooms';
+import { getRoomDetails } from '../rooms';
+
+export const useRoomDetails = (locale: string, roomId: number) => {
+    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
+    const [room, setRoom] = useState<Room>();
+    const [errorData, setErrorData] = useState<any>();
+    const [loading, setLoading] = useState<boolean>(false);
+
+    const fetchData = useCallback(() => {
+        setLoading(true);
+        setErrorData(undefined);
+        setRoom(undefined);
+
+        getRoomDetails(locale, jwt, roomId)
+            .then((room) => {
+                setRoom(room);
+            })
+            .catch((err) => {
+                setErrorData(err);
+            })
+            .finally(() => {
+                setLoading(false);
+            })
+    }, []);
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    return {
+        fetchData,
+        loading,
+        room,
+        errorData
+    };
+};

src/actions/rooms.ts

@@ -0,0 +1,109 @@
+import { apiRequest } from './helpers';
+import {GetUsersForRooms, Room, RoomEdit, RoomEditDTO} from '../types/rooms';
+
+export const getUpcomingRooms = (locale: string, token: string): Promise<Room[]> => apiRequest({
+    url: '/home/upcomingsessionsall',
+    method: 'post',
+    data: {
+        sessionType: 'room'
+    },
+    locale,
+    token
+});
+
+export const getRecentRooms = (locale: string, token: string): Promise<Room[]> => apiRequest({
+    url: '/home/historicalmeetings',
+    method: 'post',
+    data: {
+        sessionType: 'room'
+    },
+    locale,
+    token
+});
+
+export const getRoomDetails = (locale: string, token: string, id: number): Promise<Room> => apiRequest({
+    url: '/home/room',
+    method: 'post',
+    data: { id },
+    locale,
+    token
+});
+
+export const deleteRoomClient = (locale: string, token: string, data: { sessionId: number, clientUserId: number }): Promise<any> => apiRequest({
+    url: '/home/deleteclientfromroom',
+    method: 'post',
+    data,
+    locale,
+    token
+});
+
+export const deleteRoomSupervisor = (locale: string, token: string, data: { sessionId: number, supervisorUserId: number }): Promise<any> => apiRequest({
+    url: '/home/deletesupervisorfromroom',
+    method: 'post',
+    data,
+    locale,
+    token
+});
+
+export const becomeRoomClient = (locale: string, token: string, data: { sessionId: number, clientUserId: number }): Promise<any> => apiRequest({
+    url: '/home/becomeroomclient',
+    method: 'post',
+    data,
+    locale,
+    token
+});
+
+export const becomeRoomSupervisor = (locale: string, token: string, data: { sessionId: number, supervisorUserId: number }): Promise<any> => apiRequest({
+    url: '/home/becomeroomsupervisor',
+    method: 'post',
+    data,
+    locale,
+    token
+});
+
+export const getUsersList = (locale: string, token: string, data: { template: string }): Promise<GetUsersForRooms> => apiRequest({
+    url: '/home/findusersforroom',
+    method: 'post',
+    data,
+    locale,
+    token
+});
+
+export const addClient = (locale: string, token: string, data: { sessionId: number, clientUserId: number }): Promise<any> => apiRequest({
+    url: '/home/addclienttoroom',
+    method: 'post',
+    data,
+    locale,
+    token
+});
+
+export const addSupervisor = (locale: string, token: string, data: { sessionId: number, supervisorUserId: number }): Promise<any> => apiRequest({
+    url: '/home/addsupervisortoroom',
+    method: 'post',
+    data,
+    locale,
+    token
+});
+
+export const createRoom = (locale: string, token: string): Promise<any> => apiRequest({
+    url: '/home/createroom',
+    method: 'post',
+    locale,
+    token
+});
+
+export const updateRoom = (locale: string, token: string, data: RoomEdit): Promise<any> => apiRequest({
+    url: '/home/updateroom',
+    method: 'post',
+    data,
+    locale,
+    token
+});
+
+export const getRoomById = (locale: string, token: string, id: number): Promise<RoomEditDTO> => apiRequest({
+    url: '/home/getroomforedit',
+    method: 'post',
+    data: { id },
+    locale,
+    token
+});

src/app/[locale]/account/(simple)/rooms/[...slug]/page.tsx

@@ -0,0 +1,57 @@
+import React, { Suspense } from 'react';
+import { unstable_setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { AccountMenu, RoomDetails, RoomsTabs } from '../../../../../../components/Account';
+import { RoomsType } from '../../../../../../types/rooms';
+
+const ROOMS_ROUTES = [RoomsType.UPCOMING, RoomsType.RECENT, RoomsType.NEW];
+
+export async function generateStaticParams({
+   params: { locale },
+}: { params: { locale: string } }) {
+    return [{ locale, slug: [RoomsType.UPCOMING] }];
+}
+
+export default function RoomsDetailItem({ params: { locale, slug } }: { params: { locale: string, slug?: string[] } }) {
+    unstable_setRequestLocale(locale);
+    const roomType: string = slug?.length > 0 && slug[0] || '';
+    const roomId: number | null = slug?.length > 1 && Number(slug[1]) || null;
+
+    if (!slug?.length || slug?.length > 2) {
+        notFound();
+    }
+
+    if (ROOMS_ROUTES.includes(roomType as RoomsType) && Number.isInteger(roomId)) {
+        return (
+            <Suspense fallback={<p>Loading...</p>}>
+                <RoomDetails
+                    locale={locale}
+                    roomId={roomId || 0}
+                    activeType={roomType as RoomsType}
+                />
+            </Suspense>
+        );
+    }
+
+    if (ROOMS_ROUTES.includes(roomType as RoomsType)  && !Number.isInteger(roomId)) {
+        return (
+            <>
+                <div className="col-xl-3 col-lg-4 d-none d-lg-block">
+                    <AccountMenu locale={locale}/>
+                </div>
+                <div className="col-xl-9 col-lg-8 ">
+                    <div className="page-account__inner">
+                        <Suspense fallback={<p>Loading...</p>}>
+                            <RoomsTabs
+                                locale={locale}
+                                activeTab={roomType as RoomsType}
+                            />
+                        </Suspense>
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    return notFound();
+};

src/app/[locale]/account/(simple)/rooms/page.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { redirect } from 'next/navigation';
+import { useLocalStorage } from '../../../../../hooks/useLocalStorage';
+import { AUTH_TOKEN_KEY } from '../../../../../constants/common';
+import { RoomsType } from '../../../../../types/rooms';
+
+export default function RoomsMainPage() {
+    const [token] = useLocalStorage(AUTH_TOKEN_KEY, '');
+
+    return token ? redirect(`rooms/${RoomsType.UPCOMING}`) : null;
+};

src/components/Account/agora/Agora.tsx

@@ -37,7 +37,7 @@ export const Agora = ({ sessionId, secret, stopCalling, remoteUser }: AgoraProps
     };
 
     return (
-        <div className="b-agora__wrap">
+        <div className="b-agora__wrap b-agora__wrap__single">
             <RemoteUserPanel calling={calling} user={remoteUser} />
             <div className="b-agora__panel">
                 <MediaControl

src/components/Account/agora/AgoraGroup.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useJoin } from 'agora-rtc-react';
+import { useEffect, useState } from 'react';
+import { MediaControl } from './view';
+import { UsersGroupPanel } from './components';
+
+type AgoraProps = {
+    roomId: number;
+    secret?: string;
+    stopCalling: () => void;
+};
+
+export const AgoraGroup = ({ roomId, secret, stopCalling }: AgoraProps) => {
+    const [calling, setCalling] = useState(false);
+    const [micOn, setMic] = useState(false);
+    const [cameraOn, setCamera] = useState(false);
+
+    useEffect(() => {
+        setCalling(true);
+    }, []);
+
+    useJoin(
+        {
+            appid: process.env.NEXT_PUBLIC_AGORA_APPID,
+            channel: `${roomId}-${secret}`,
+            token: null,
+        },
+        calling,
+    );
+
+    const stop = () => {
+        stopCalling();
+        setCalling(false);
+    };
+
+    return (
+        <>
+            <div className="b-agora__wrap">
+                <UsersGroupPanel calling={calling} micOn={micOn} cameraOn={cameraOn}/>
+            </div>
+            <div className="b-agora__panel_group">
+                <MediaControl
+                    calling={calling}
+                    cameraOn={cameraOn}
+                    micOn={micOn}
+                    setCalling={stop}
+                    setCamera={() => setCamera(a => !a)}
+                    setMic={() => setMic(a => !a)}
+                />
+            </div>
+        </>
+    );
+};

src/components/Account/agora/components/UsersGroupPanel.tsx

@@ -0,0 +1,44 @@
+import {
+    type IRemoteVideoTrack,
+    useIsConnected, useLocalCameraTrack, useLocalMicrophoneTrack, usePublish,
+    useRemoteAudioTracks,
+    useRemoteUsers,
+    useRemoteVideoTracks
+} from 'agora-rtc-react';
+import { LocalUser } from './LocalUser';
+import { RemoteVideoPlayer } from './RemoteVideoPlayer';
+
+type UsersGroupPanelProps = {
+    calling: boolean;
+    micOn: boolean;
+    cameraOn: boolean;
+};
+
+export const UsersGroupPanel = ({ calling, micOn, cameraOn }: UsersGroupPanelProps) => {
+    const isConnected = useIsConnected();
+    const remoteUsers = useRemoteUsers();
+    const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn);
+    const { localCameraTrack } = useLocalCameraTrack(cameraOn);
+    const { audioTracks } = useRemoteAudioTracks(remoteUsers);
+
+    usePublish([localMicrophoneTrack, localCameraTrack]);
+    audioTracks.map(track => track.play());
+
+    return calling && isConnected && remoteUsers ? (
+        <div className={`b-agora__remote_groups gr-${remoteUsers.length + 1}`}>
+            <div>
+                <LocalUser
+                    audioTrack={localMicrophoneTrack}
+                    cameraOn={cameraOn}
+                    micOn={micOn}
+                    videoTrack={localCameraTrack}
+                />
+            </div>
+            {remoteUsers.length > 0 && remoteUsers.map(({ uid, videoTrack }) => (
+                <div key={uid}>
+                    <RemoteVideoPlayer track={videoTrack} />
+                </div>
+            ))}
+        </div>
+    ) : null;
+}

src/components/Account/agora/components/index.ts

@@ -3,3 +3,4 @@ export * from './UserCover';
 export * from './RemoteUsers';
 export * from './LocalUserPanel';
 export * from './RemoteUserPanel';
+export * from './UsersGroupPanel';

src/components/Account/agora/index.tsx

@@ -2,7 +2,9 @@
 
 import AgoraRTC, { AgoraRTCProvider } from 'agora-rtc-react';
 import { Session } from '../../../types/sessions';
+import { Room } from '../../../types/rooms';
 import { Agora } from './Agora';
+import { AgoraGroup } from './AgoraGroup';
 
 export const AgoraClient = ({ session, stopCalling, isCoach }: { session?: Session, stopCalling: () => void, isCoach: boolean }) => {
     const remoteUser = isCoach ? (session?.clients?.length ? session?.clients[0] : undefined) : session?.coach;
@@ -20,3 +22,17 @@ export const AgoraClient = ({ session, stopCalling, isCoach }: { session?: Sessi
         </AgoraRTCProvider>
     ) : null;
 };
+
+export const AgoraClientGroup = ({ room, stopCalling }: { room?: Room, stopCalling: () => void }) => {
+    return room ? (
+        <AgoraRTCProvider client={AgoraRTC.createClient({ mode: "rtc", codec: "vp8" })}>
+            {room && (
+                <AgoraGroup
+                    roomId={room.id}
+                    secret={room.secret}
+                    stopCalling={stopCalling}
+                />
+            )}
+        </AgoraRTCProvider>
+    ) : null;
+};

src/components/Account/index.ts

@@ -3,3 +3,4 @@
 export { AccountMenu } from './AccountMenu';
 export { ProfileSettings } from './ProfileSettings';
 export * from './sessions';
+export * from './rooms';

src/components/Account/rooms/CreateRoom.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import React, { useEffect, useState } from 'react';
+import { EditRoomForm } from './EditRoomForm';
+import debounce from 'lodash/debounce';
+import { createRoom } from '../../../actions/rooms';
+import { Loader } from '../../view/Loader';
+import { useRouter } from '../../../navigation';
+import { RoomsType } from '../../../types/rooms';
+
+
+export const CreateRoom = ({ locale, jwt }: { locale: string, jwt: string }) => {
+    const [roomId, setRoomId] = useState<number>();
+    const [loading, setLoading] = useState<boolean>(false);
+    const router = useRouter();
+
+    const getRoom = debounce(() => {
+        setRoomId(2556);
+        // createRoom(locale, jwt)
+        //     .then((data) => {
+        //         setRoomId(data);
+        //     })
+        //     .finally(() => {
+        //         setLoading(false);
+        //     })
+    }, 500);
+
+    useEffect(() => {
+        // setLoading(true);
+        getRoom();
+    }, []);
+
+    return (
+        <Loader isLoading={loading}>
+            {roomId && (
+                <EditRoomForm
+                    roomId={roomId}
+                    locale={locale}
+                    jwt={jwt}
+                    mode="create"
+                    afterSubmit={() => router.push(`/account/rooms/${RoomsType.UPCOMING}`)}
+                />
+            )}
+        </Loader>
+    )
+};

src/components/Account/rooms/EditRoomForm.tsx

@@ -0,0 +1,220 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button, Form, Input, notification } from 'antd';
+import dayjs, { Dayjs } from 'dayjs';
+import { i18nText } from '../../../i18nKeys';
+import { Tag } from '../../../types/tags';
+import { Slot } from '../../../types/experts';
+import { RoomEdit, RoomEditDTO } from '../../../types/rooms';
+import { getRoomById, updateRoom } from '../../../actions/rooms';
+import { Loader } from '../../view/Loader';
+import { CustomInput } from '../../view/CustomInput';
+import { CustomSelect } from '../../view/CustomSelect';
+import { CustomSwitch } from '../../view/CustomSwitch';
+import { CustomMultiSelect } from '../../view/CustomMultiSelect';
+import { CustomDatePicker } from '../../view/CustomDatePicker';
+
+type EditRoomFormProps = {
+    roomId: number,
+    locale: string,
+    jwt: string,
+    mode: 'create' | 'edit';
+    afterSubmit?: () => void;
+}
+
+type RoomFormState = {
+    title?: string;
+    description?: string;
+    date?: Dayjs;
+    maxCount?: number;
+    startAt?: string;
+    supervisor?: boolean;
+    tags?: number[];
+};
+
+export const EditRoomForm = ({ roomId, locale, jwt, mode, afterSubmit }: EditRoomFormProps) => {
+    const [form] = Form.useForm<RoomFormState>();
+    const [editingRoom, setEditingRoom] = useState<RoomEditDTO>();
+    const dateValue = Form.useWatch('date', form);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [fetchLoading, setFetchLoading] = useState<boolean>(false);
+
+    useEffect(() => {
+        setFetchLoading(true);
+        getRoomById(locale, jwt, roomId)
+            .then((data) => {
+                setEditingRoom(data);
+                const { item } = data || {};
+
+                if (mode === 'edit' && item) {
+                    form.setFieldsValue({
+                        title: item.title,
+                        description: item.description,
+                        date: item?.scheduledStartAtUtc ? dayjs(item.scheduledStartAtUtc) : undefined,
+                        maxCount: item.maxClients,
+                        startAt: item?.scheduledStartAtUtc,
+                        supervisor: item.isNeedSupervisor,
+                        tags: item.tagIds || undefined
+                    })
+                }
+            })
+            .finally(() => {
+                setFetchLoading(false);
+            })
+    }, []);
+
+    const getAvailableSlots = useCallback((): string[] => {
+        const dateList = new Set<string>();
+        if (editingRoom?.availableSlots) {
+            editingRoom.availableSlots.forEach(({ startTime }) => {
+                const [date] = startTime.split('T');
+                dateList.add(date);
+            });
+
+            return Array.from(dateList);
+        }
+
+        return [];
+    }, [editingRoom?.availableSlots]);
+
+    const getTimeOptions = (slots?: Slot[], curDate?: Dayjs) => {
+        const date = curDate ? curDate.utc().format('YYYY-MM-DD') : '';
+        if (slots && slots?.length && date) {
+            return slots.filter(({ startTime }) => startTime.indexOf(date) > -1)
+                .map(({ startTime, endTime }) => ({ value: startTime, label: `${dayjs(startTime).format('HH:mm')} - ${dayjs(endTime).format('HH:mm')}` }));
+        }
+
+        return [];
+    }
+
+    const getTagsOptions = (tags?: Tag[]) => {
+        if (tags) {
+            return tags.map(({ id, name }) => ({ value: id, label: <span>{name}</span> })) || [];
+        }
+
+        return [];
+    }
+
+    const onSubmit = () => {
+        setLoading(true);
+        const { title, description, startAt, maxCount, tags, supervisor } = form.getFieldsValue();
+        const result: RoomEdit = {
+            ...editingRoom,
+            id: roomId,
+            title,
+            scheduledStartAtUtc: startAt,
+            maxClients: maxCount,
+            isNeedSupervisor: supervisor,
+            tagIds: tags || []
+        };
+
+        if (description) {
+            result.description = description;
+        }
+
+        updateRoom(locale, jwt, result)
+            .then(() => {
+                afterSubmit && afterSubmit();
+            })
+            .catch((err) => {
+                notification.error({
+                    message: 'Error',
+                    description: err?.response?.data?.errMessage
+                });
+            })
+            .finally(() => {
+                setLoading(false)
+            });
+    }
+
+    const disabledDate = (current: Dayjs) => current && !getAvailableSlots().includes(current.format('YYYY-MM-DD'));
+
+    return (
+        <Loader isLoading={fetchLoading}>
+            <Form
+                form={form}
+                autoComplete="off"
+                style={{ display: 'flex', gap: 16, flexDirection: 'column' }}
+                onFinish={onSubmit}
+                className="b-room-form"
+            >
+                <Form.Item
+                    name="title"
+                    rules={[{ required: true }]}
+                    noStyle
+                >
+                    <CustomInput
+                        size="small"
+                        placeholder={i18nText('title', locale)}
+                    />
+                </Form.Item>
+                <Form.Item name="description">
+                    <Input.TextArea
+                        className="b-textarea"
+                        rows={4}
+                        maxLength={1000}
+                        placeholder={i18nText('description', locale)}
+                    />
+                </Form.Item>
+                <div className="b-room-form__grid">
+                    <Form.Item
+                        name="date"
+                        rules={[{ required: true }]}
+                        noStyle
+                    >
+                        <CustomDatePicker
+                            locale={locale}
+                            label={i18nText('room.date', locale)}
+                            disabledDate={disabledDate}
+                        />
+                    </Form.Item>
+                    <Form.Item
+                        name="startAt"
+                        rules={[{ required: true }]}
+                        noStyle
+                    >
+                        <CustomSelect
+                            label={i18nText('room.time', locale)}
+                            options={getTimeOptions(editingRoom?.availableSlots, dateValue)}
+                            disabled={!dateValue}
+                        />
+                    </Form.Item>
+                    <Form.Item
+                        name="maxCount"
+                        rules={[{ required: true }]}
+                        noStyle
+                    >
+                        <CustomSelect
+                            label={i18nText('room.maxParticipants', locale)}
+                            options={Array.from({ length: 16 }).map((_, i) => ({ value: i+1, label: i+1 }))}
+                        />
+                    </Form.Item>
+                    <Form.Item
+                        name="supervisor"
+                        valuePropName="checked"
+                        label={i18nText('room.presenceOfSupervisor', locale)}
+                        className="b-room-switch"
+                    >
+                        <CustomSwitch />
+                    </Form.Item>
+                </div>
+                <Form.Item
+                    name="tags"
+                    noStyle
+                >
+                    <CustomMultiSelect
+                        label={i18nText('topics', locale)}
+                        options={getTagsOptions(editingRoom?.tags)}
+                    />
+                </Form.Item>
+                <Button
+                    className="card-detail__apply"
+                    htmlType="submit"
+                    loading={loading}
+                    disabled={loading}
+                >
+                    {i18nText('room.save', locale)}
+                </Button>
+            </Form>
+        </Loader>
+    );
+};

src/components/Account/rooms/RoomDetails.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import React, { useState, useEffect } from 'react';
+import { RoomsType } from '../../../types/rooms';
+import { useSessionTracking } from '../../../actions/hooks/useSessionTracking';
+import { AccountMenu } from '../AccountMenu';
+import { Loader } from '../../view/Loader';
+import { RoomDetailsContent } from './RoomDetailsContent';
+import { useRoomDetails } from '../../../actions/hooks/useRoomDetails';
+import { AgoraClientGroup } from '../agora';
+
+type RoomDetailsProps = {
+    locale: string;
+    roomId: number;
+    activeType: RoomsType;
+};
+
+export const RoomDetails = ({ roomId, locale, activeType }: RoomDetailsProps) => {
+    const { room, errorData, loading, fetchData } = useRoomDetails(locale, roomId);
+    const tracking = useSessionTracking(locale, roomId);
+    const [isCalling, setIsCalling] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (isCalling) {
+            tracking.start();
+        } else {
+            tracking.stop();
+        }
+    }, [isCalling]);
+
+    const stopCalling = () => {
+        setIsCalling(false);
+        fetchData();
+    }
+
+    return isCalling
+        ? (
+            <AgoraClientGroup
+                room={room}
+                stopCalling={stopCalling}
+            />
+        ) : (
+            <>
+                <div className="col-xl-3 col-lg-4 d-none d-lg-block">
+                    <AccountMenu locale={locale} />
+                </div>
+                <div className="col-xl-9 col-lg-8 ">
+                    <div className="page-account__inner">
+                        <Loader
+                            isLoading={loading}
+                            errorData={errorData}
+                            refresh={fetchData}
+                        >
+                            <RoomDetailsContent
+                                locale={locale}
+                                room={room}
+                                activeType={activeType}
+                                startRoom={() => setIsCalling(true)}
+                                refresh={fetchData}
+                            />
+                        </Loader>
+                    </div>
+                </div>
+            </>
+        );
+};

src/components/Account/rooms/RoomDetailsContent.tsx

@@ -0,0 +1,355 @@
+'use client'
+
+import React, { useState } from 'react';
+import { Button, notification, Tag } from 'antd';
+import { DeleteOutlined, LeftOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import Image from 'next/image';
+import { useRouter } from '../../../navigation';
+import { Room, RoomsType } from '../../../types/rooms';
+import { i18nText } from '../../../i18nKeys';
+import { LinkButton } from '../../view/LinkButton';
+import { 
+    addClient,
+    addSupervisor,
+    becomeRoomClient,
+    becomeRoomSupervisor,
+    deleteRoomClient,
+    deleteRoomSupervisor
+ } from '../../../actions/rooms';
+import { AUTH_TOKEN_KEY, AUTH_USER } from '../../../constants/common';
+import { useLocalStorage } from '../../../hooks/useLocalStorage';
+import { UserListModal } from '../../Modals/UsersListModal';
+import { SessionState } from '../../../types/sessions';
+import { EditRoomForm } from './EditRoomForm';
+
+type RoomDetailsContentProps = {
+    locale: string;
+    activeType: RoomsType;
+    room?: Room;
+    startRoom: () => void;
+    refresh: () => void;
+};
+
+export const RoomDetailsContent = ({ room, startRoom, locale, activeType, refresh }: RoomDetailsContentProps) => {
+    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
+    const [userData] = useLocalStorage(AUTH_USER, '');
+    const { id: userId = 0 } = userData ? JSON.parse(userData) : {};
+    const router = useRouter();
+    const [showModal, setShowModal] = useState<boolean>(false);
+    const [forSupervisor, setForSupervisor] = useState<boolean>(false);
+    const startDate = room?.scheduledStartAtUtc ? dayjs(room?.scheduledStartAtUtc).locale(locale) : null;
+    const endDate = room?.scheduledEndAtUtc ? dayjs(room?.scheduledEndAtUtc).locale(locale) : null;
+    const today = startDate ? dayjs().format('YYYY-MM-DD') === startDate.format('YYYY-MM-DD') : false;
+    const isCreator = room?.coach && room.coach.id === +userId || false;
+    const isSupervisor = room?.supervisor && room.supervisor.id === +userId || false;
+    const isClient = room?.clients && room.clients.length > 0 && room.clients.map(({ id }) => id).includes(+userId) || false;
+    const isTimeBeforeStart = room?.scheduledStartAtUtc ? dayjs() < dayjs(room.scheduledStartAtUtc) : false;
+    const [isEdit, setIsEdit] = useState<boolean>(false);
+
+    const goBack = () => router.push(`/account/rooms/${activeType}`);
+
+    const checkUserApply = (): boolean => (!room?.supervisor || !isSupervisor) && (!room?.clients || room?.clients && room?.clients.length === 0 || !isClient);
+
+    const deleteClient = (clientUserId: number) => {
+        if (room?.id) {
+            deleteRoomClient(locale, jwt, { sessionId: room.id, clientUserId })
+                .then(() => {
+                    refresh();
+                })
+                .catch((err) => {
+                    notification.error({
+                        message: 'Error',
+                        description: err?.response?.data?.errMessage
+                    });
+                });
+        }
+    };
+
+    const deleteSupervisor = (supervisorUserId?: number) => {
+        if (room?.id && supervisorUserId) {
+            deleteRoomSupervisor(locale, jwt, { sessionId: room.id, supervisorUserId })
+                .then(() => {
+                    refresh();
+                })
+                .catch((err) => {
+                    notification.error({
+                        message: 'Error',
+                        description: err?.response?.data?.errMessage
+                    });
+                })
+        }
+    };
+
+    const becomeClient = () => {
+        if (room?.id && userId) {
+            becomeRoomClient(locale, jwt, { sessionId: room.id, clientUserId: +userId })
+                .then(() => {
+                    refresh();
+                })
+                .catch((err) => {
+                    notification.error({
+                        message: 'Error',
+                        description: err?.response?.data?.errMessage
+                    });
+                });
+        }
+    };
+
+    const becomeSupervisor = () => {
+        if (room?.id && userId) {
+            becomeRoomSupervisor(locale, jwt, { sessionId: room.id, supervisorUserId: +userId })
+                .then(() => {
+                    refresh();
+                })
+                .catch((err) => {
+                    notification.error({
+                        message: 'Error',
+                        description: err?.response?.data?.errMessage
+                    });
+                });
+        }
+    };
+
+    const onInviteSupervisor = () => {
+        setForSupervisor(true)
+        setShowModal(true);
+    };
+
+    const onAddUser = (id: number) => {
+        if (room?.id) {
+            setShowModal(false);
+
+            if (forSupervisor) {
+                addSupervisor(locale, jwt, { sessionId: room.id, supervisorUserId: id })
+                    .then(() => {
+                        refresh();
+                    })
+                    .catch((err) => {
+                        notification.error({
+                            message: 'Error',
+                            description: err?.response?.data?.errMessage
+                        });
+                    });
+            } else {
+                addClient(locale, jwt, { sessionId: room.id, clientUserId: id })
+                    .then(() => {
+                        refresh();
+                    })
+                    .catch((err) => {
+                        notification.error({
+                            message: 'Error',
+                            description: err?.response?.data?.errMessage
+                        });
+                    });
+            }
+        }
+    };
+
+    const afterEditing = () => {
+        setIsEdit(false);
+        refresh();
+    }
+
+    return !isEdit ? (
+        <div className="card-detail">
+            <div>
+                <Button
+                    className="card-detail__back"
+                    type="link"
+                    icon={<LeftOutlined/>}
+                    onClick={goBack}
+                >
+                    {i18nText('back', locale)}
+                </Button>
+            </div>
+            <div className="card-detail__name">{room?.title || ''}</div>
+            <div
+                className={`card-detail__date${today ? ' chosen' : ''}${activeType === RoomsType.RECENT ? ' history' : ''}`}>
+                {today
+                    ? `${i18nText('today', locale)} ${startDate?.format('HH:mm')} - ${endDate?.format('HH:mm')}`
+                    : `${startDate?.format('D MMMM')} ${startDate?.format('HH:mm')} - ${endDate?.format('HH:mm')}`}
+            </div>
+            {room?.themesTags && room.themesTags.length > 0 && (
+                <div className="card-detail__skills">
+                    <div className="skills__list">
+                        {room.themesTags.map((skill) => <Tag key={skill?.id}
+                                                               className="skills__list__item">{skill?.name}</Tag>)}
+                    </div>
+                </div>
+            )}
+            {room?.description && <div className="card-profile__desc">{room.description}</div>}
+            {activeType === RoomsType.UPCOMING && (isCreator || isSupervisor || isClient) && (
+                <div className="card-detail__actions">
+                    {(isCreator || isClient || isSupervisor) && (
+                        <Button
+                            className="card-detail__apply"
+                            onClick={startRoom}
+                        >
+                            {isCreator ? i18nText('session.start', locale) : i18nText('session.join', locale)}
+                        </Button>
+                    )}
+                    {isCreator && isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && (
+                        <Button
+                            className="card-detail__filled"
+                            onClick={() => setIsEdit(true)}
+                        >
+                            {i18nText('room.editRoom', locale)}
+                        </Button>
+                    )}
+                </div>
+            )}
+            <div className="card-detail__profile">
+                <div className="card-detail__profile_title">
+                    <div>{i18nText('room.roomCreator', locale)}</div>
+                </div>
+                <div className="card-detail__profile_list">
+                    <div className="card-detail__profile_item">
+                        <div className="card-detail__portrait card-detail__portrait_small">
+                            <Image src={room?.coach?.faceImageUrl || '/images/user-avatar.png'} width={86} height={86} alt=""/>
+                        </div>
+                        <div className="card-detail__inner">
+                            <div className="card-detail__name">{`${room?.coach?.name} ${room?.coach?.surname || ''}`}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {room?.isNeedSupervisor && (
+                <div className="card-detail__profile">
+                    <div className="card-detail__profile_title">
+                        <div>{i18nText('room.supervisor', locale)}</div>
+                    </div>
+                    {room?.supervisor && (
+                        <div className="card-detail__profile_list">
+                            <div className="card-detail__profile_item">
+                                <div className="card-detail__portrait card-detail__portrait_small">
+                                    <Image src={room?.supervisor?.faceImageUrl || '/images/user-avatar.png'} width={86}
+                                           height={86}
+                                           alt=""/>
+                                </div>
+                                <div className="card-detail__inner">
+                                    <div
+                                        className="card-detail__name">{`${room?.supervisor?.name} ${room?.supervisor?.surname || ''}`}</div>
+                                </div>
+                                {isCreator && activeType === RoomsType.UPCOMING && isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && (
+                                    <LinkButton
+                                        type="link"
+                                        style={{alignSelf: 'flex-start'}}
+                                        danger
+                                        icon={<DeleteOutlined/>}
+                                        onClick={() => deleteSupervisor(room?.supervisor?.id)}
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    )}
+                    {room?.supervisor && activeType === RoomsType.RECENT && (
+                        <>
+                            {room?.supervisorComment && (
+                                <div className="card-detail__supervisor-comment">{room.supervisorComment}</div>
+                            )}
+                        </>
+                    )}
+                    {isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && !room?.supervisor && isCreator && activeType === RoomsType.UPCOMING && (
+                        <Button
+                            className="card-detail__filled"
+                            onClick={onInviteSupervisor}
+                        >
+                            {i18nText('room.inviteSupervisor', locale)}
+                        </Button>
+                    )}
+                    {isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && !room?.supervisor && !isCreator && activeType === RoomsType.UPCOMING && checkUserApply() && (
+                        <Button
+                            className="card-detail__apply"
+                            onClick={becomeSupervisor}
+                        >
+                            {i18nText('room.joinSupervisor', locale)}
+                        </Button>
+                    )}
+                    {!room?.supervisor && !isCreator && !checkUserApply() && (
+                        <div className="card-profile__desc">{i18nText('noData', locale)}</div>
+                    )}
+                </div>
+            )}
+            <div className="card-detail__profile">
+                <div className="card-detail__profile_title">
+                    <div>{i18nText('room.participants', locale)}</div>
+                    <div>{`${room?.clients?.length || 0}/${room?.maxClients}`}</div>
+                </div>
+                {room?.clients && room?.clients?.length > 0 && (
+                    <div className="card-detail__profile_list">
+                        {room.clients.map(({id, faceImageUrl, name, surname}) => (
+                            <div key={id} className="card-detail__profile_item">
+                                <div className="card-detail__portrait card-detail__portrait_small">
+                                    <Image src={faceImageUrl || '/images/user-avatar.png'} width={86}
+                                           height={86}
+                                           alt=""/>
+                                </div>
+                                <div className="card-detail__inner">
+                                    <div
+                                        className="card-detail__name">{`${name} ${surname || ''}`}</div>
+                                </div>
+                                {isCreator && room?.state === SessionState.COACH_APPROVED && activeType === RoomsType.UPCOMING && isTimeBeforeStart && (
+                                    <LinkButton
+                                        type="link"
+                                        style={{alignSelf: 'flex-start'}}
+                                        danger
+                                        icon={<DeleteOutlined/>}
+                                        onClick={() => deleteClient(id)}
+                                    />
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                )}
+                {isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && isCreator && activeType === RoomsType.UPCOMING && (!room?.clients || (room?.clients && room?.clients?.length < room.maxClients)) && (
+                    <Button
+                        className="card-detail__filled"
+                        onClick={() => setShowModal(true)}
+                    >
+                        {i18nText('room.inviteParticipant', locale)}
+                    </Button>
+                )}
+                {isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && !isCreator && activeType === RoomsType.UPCOMING && (!room?.clients || (room?.clients && room?.clients?.length < room.maxClients)) && checkUserApply() && (
+                    <Button
+                        className="card-detail__apply"
+                        onClick={becomeClient}
+                    >
+                        {i18nText('room.joinParticipant', locale)}
+                    </Button>
+                )}
+            </div>
+            {room && (
+                <UserListModal
+                    locale={locale}
+                    jwt={jwt}
+                    isOpen={showModal}
+                    handleCancel={() => setShowModal(false)}
+                    submit={onAddUser}
+                    afterCloseModal={() => setForSupervisor(false)}
+                    room={room}
+                />
+            )}
+        </div>
+    ) : (
+        <div className="card-detail">
+            <div>
+                <Button
+                    className="card-detail__back"
+                    type="link"
+                    icon={<LeftOutlined/>}
+                    onClick={() => setIsEdit(false)}
+                >
+                    {i18nText('back', locale)}
+                </Button>
+            </div>
+            <EditRoomForm
+                roomId={room?.id || 0}
+                locale={locale}
+                jwt={jwt}
+                mode="edit"
+                afterSubmit={afterEditing}
+            />
+        </div>
+    );
+};

src/components/Account/rooms/RoomsTabs.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import React, { MouseEvent, useCallback, useEffect, useState } from 'react';
+import { Empty, Space } from 'antd';
+import dayjs from 'dayjs';
+import 'dayjs/locale/ru';
+import 'dayjs/locale/en';
+import 'dayjs/locale/de';
+import 'dayjs/locale/it';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/es';
+import { RoomsType } from '../../../types/rooms';
+import { getRecentRooms, getUpcomingRooms } from '../../../actions/rooms';
+import { Loader } from '../../view/Loader';
+import { useLocalStorage } from '../../../hooks/useLocalStorage';
+import { AUTH_TOKEN_KEY } from '../../../constants/common';
+import { usePathname, useRouter } from '../../../navigation';
+import { i18nText } from '../../../i18nKeys';
+import { CreateRoom } from './CreateRoom';
+
+type RoomsTabsProps = {
+    locale: string;
+    activeTab: RoomsType;
+};
+
+export const RoomsTabs = ({ locale, activeTab }: RoomsTabsProps) => {
+    const [sort, setSort] = useState<string>();
+    const [rooms, setRooms] = useState<any>();
+    const [loading, setLoading] = useState<boolean>(true);
+    const [errorData, setErrorData] = useState<any>();
+    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const fetchData = () => {
+        setErrorData(undefined);
+        setLoading(true);
+        Promise.all([
+            getUpcomingRooms(locale, jwt),
+            getRecentRooms(locale, jwt)
+        ])
+            .then(([upcoming, recent]) => {
+                setRooms({
+                    [RoomsType.UPCOMING]: upcoming || [],
+                    [RoomsType.RECENT]: recent || []
+                });
+            })
+            .catch((err) => {
+                setErrorData(err);
+            })
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    const onChangeSort = useCallback((value: string) => {
+        setSort(value);
+    }, [sort]);
+
+    const onClickSession = (event: MouseEvent<HTMLDivElement>, id: number) => {
+        event.stopPropagation();
+        event.preventDefault();
+        router.push(`${pathname}/${id}`);
+    };
+
+    const getChildren = (list?: any[]) => (
+        <>
+            {/* <div className="filter-session">
+                <div className="filter-session__item">
+                    <CustomSelect
+                        label="Topic"
+                        value={sort}
+                        onChange={onChangeSort}
+                        options={[
+                            { value: 'topic1', label: 'Topic 1' },
+                            { value: 'topic2', label: 'Topic 2' },
+                            { value: 'topic3', label: 'Topic 3' },
+                            { value: 'topic4', label: 'Topic 4' }
+                        ]}
+                    />
+                </div>
+            </div> */}
+            <div className="list-session">
+                {list && list?.length > 0 ? list?.map(({ id, scheduledStartAtUtc, scheduledEndAtUtc, title, coach, clients, supervisor, maxClients }) => {
+                    const startDate = dayjs(scheduledStartAtUtc).locale(locale);
+                    const endDate = dayjs(scheduledEndAtUtc).locale(locale);
+                    const today = dayjs().format('YYYY-MM-DD') === startDate.format('YYYY-MM-DD');
+
+                    return (
+                        <div key={id} className="card-profile session__item" onClick={(e: MouseEvent<HTMLDivElement>) => onClickSession(e, id)}>
+                            <div className="card-profile__header">
+                                <div className="card-profile__header__portrait">
+                                    <img src={coach?.faceImageUrl || '/images/person.png'} className="" alt="" />
+                                </div>
+                                <div className="card-profile__header__inner">
+                                    <div>
+                                        <div className="card-profile__header__name">{`${coach?.name} ${coach?.surname || ''}`}</div>
+                                        <div className="card-profile__header__title">{title}</div>
+                                        <div className={`card-profile__header__date${activeTab === RoomsType.RECENT ? ' history' : (today ? ' chosen' : '')}`}>
+                                            {today
+                                                ? `${i18nText('today', locale)} ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}`
+                                                : `${startDate.format('D MMMM')} ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}`}
+                                        </div>
+                                        <div className="card-room__details">
+                                            {supervisor && (
+                                                <>
+                                                    <div>{i18nText('room.supervisor', locale)}</div>
+                                                    <div>{`${supervisor?.name} ${supervisor?.surname || ''}`}</div>
+                                                </>
+                                            )}
+                                            <div>{i18nText('room.members', locale)}</div>
+                                            <div>{`${clients.length}/${maxClients}`}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )
+                }) : (
+                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={i18nText('noData', locale)} />
+                )}
+            </div>
+        </>
+    );
+
+    const tabs = [
+        {
+            key: RoomsType.UPCOMING,
+            label: (
+                <>
+                    {i18nText('room.upcoming', locale)}
+                    {rooms?.upcoming && rooms?.upcoming?.length > 0 ? (<span className="count">{rooms?.upcoming.length}</span>) : null}
+                </>
+            ),
+            children: getChildren(rooms?.upcoming)
+        },
+        {
+            key: RoomsType.RECENT,
+            label: i18nText('room.recent', locale),
+            children: getChildren(rooms?.recent)
+        },
+        {
+            key: RoomsType.NEW,
+            label: i18nText('room.newRoom', locale),
+            children: <CreateRoom locale={locale} jwt={jwt} />
+        }
+    ];
+
+    return (
+        <Loader
+            isLoading={loading}
+            errorData={errorData}
+            refresh={fetchData}
+        >
+            <div className="tabs-session">
+                {tabs.map(({ key, label }) => (
+                    <Space
+                        key={key}
+                        className={`tabs-session__item ${key === activeTab ? 'active' : ''}`}
+                        onClick={() => router.push(`/account/rooms/${key}`)}
+                    >
+                        {label}
+                    </Space>
+                ))}
+            </div>
+            {tabs.filter(({ key }) => key === activeTab)[0].children}
+        </Loader>
+    );
+};

src/components/Account/rooms/index.tsx

@@ -0,0 +1,6 @@
+'use client'
+
+export * from './RoomDetails';
+export * from './RoomsTabs';
+export * from './RoomDetailsContent';
+export * from './CreateRoom';

src/components/Account/sessions/SessionDetailsContent.tsx

@@ -81,7 +81,7 @@ export const SessionDetailsContent = ({ session, locale, activeType, startSessio
     const CoachCard = (coach?: PublicUser) => coach ? (
         <div className="card-detail__expert">
             <div className="card-detail__portrait">
-                <Image src={coach?.faceImageUrl || '/images/person.png'} width={140} height={140} alt="" />
+                <Image src={coach?.faceImageUrl || '/images/user-avatar.png'} width={140} height={140} alt="" />
             </div>
             <div className="card-detail__inner">
                 <Link href={`/experts/${coach?.id}` as any} target="_blank">
@@ -106,7 +106,7 @@ export const SessionDetailsContent = ({ session, locale, activeType, startSessio
                 <div className="card-detail__skills">
                     <div className="skills__list">
                         {session?.themesTags?.slice(0, 2).map((skill) => <Tag key={skill?.id} className="skills__list__item">{skill?.name}</Tag>)}
-                        {session?.themesTags?.length > 2
+                        {session?.themesTags && session?.themesTags?.length > 2
                             ? (
                                 <Tag className="skills__list__more">
                                     <Link href={`/experts/${coach?.id}` as any} target="_blank">
@@ -128,7 +128,7 @@ export const SessionDetailsContent = ({ session, locale, activeType, startSessio
     const StudentCard = (student?: PublicUser | null) => student ? (
         <div className="card-detail__expert">
             <div className="card-detail__portrait">
-                <Image src={student?.faceImageUrl || '/images/person.png'} width={140} height={140} alt="" />
+                <Image src={student?.faceImageUrl || '/images/user-avatar.png'} width={140} height={140} alt="" />
             </div>
             <div className="card-detail__inner">
                 <div className="card-detail__name">{`${student?.name} ${student?.surname || ''}`}</div>

src/components/Experts/AdditionalFilter.tsx

@@ -55,8 +55,6 @@ export const ExpertsAdditionalFilter = ({
         };
         const search = getSearchParamsString(newFilter);
 
-        console.log('here1');
-
         router.push(search ? `${basePath}?${search}#filter` : `${basePath}#filter`);
 
         // router.push({

src/components/Modals/EditExpertEducationModal.tsx

@@ -1,20 +1,20 @@
 'use client';
 
-import React, { FC, useEffect, useState } from 'react';
-import {Modal, Button, message, Form, Collapse, GetProp, UploadProps} from 'antd';
+import React, { FC, useState } from 'react';
+import { Modal, Button, message, Form, Collapse } from 'antd';
 import type { CollapseProps } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import { i18nText } from '../../i18nKeys';
-import { PracticePersonData, PracticeDTO, PracticeData, PracticeCase } from '../../types/practice';
+import { PracticePersonData } from '../../types/practice';
 import { AUTH_TOKEN_KEY } from '../../constants/common';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
-import {setEducation} from '../../actions/profile';
-import {Certificate, Details, EducationData, EducationDTO, Experience} from "../../types/education";
-import {CertificatesContent} from "./educationModalContent/Certificates";
-import {EducationsContent} from "./educationModalContent/Educations";
-import {TrainingsContent} from "./educationModalContent/Trainings";
-import {MbasContent} from "./educationModalContent/Mbas";
-import {ExperiencesContent} from "./educationModalContent/Experiences";
+import { setEducation } from '../../actions/profile';
+import { EducationData, EducationDTO } from '../../types/education';
+import { CertificatesContent } from './educationModalContent/Certificates';
+import { EducationsContent } from './educationModalContent/Educations';
+import { TrainingsContent } from './educationModalContent/Trainings';
+import { MbasContent } from './educationModalContent/Mbas';
+import { ExperiencesContent } from './educationModalContent/Experiences';
 
 type EditExpertEducationModalProps = {
     open: boolean;

src/components/Modals/ScheduleModal.tsx

@@ -6,12 +6,6 @@ import { Modal, Menu, Calendar, Radio, Button, Input, message, Form } from 'antd
 import type { CalendarProps, MenuProps } from 'antd';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import { CloseOutlined } from '@ant-design/icons';
-import locale_ru from 'antd/lib/calendar/locale/ru_RU';
-import locale_en from 'antd/lib/calendar/locale/en_GB';
-import locale_de from 'antd/lib/calendar/locale/de_DE';
-import locale_it from 'antd/lib/calendar/locale/it_IT';
-import locale_es from 'antd/lib/calendar/locale/es_ES';
-import locale_fr from 'antd/lib/calendar/locale/fr_FR';
 import dayjs, { Dayjs } from 'dayjs';
 import 'dayjs/locale/ru';
 import 'dayjs/locale/en';
@@ -19,6 +13,7 @@ import 'dayjs/locale/de';
 import 'dayjs/locale/it';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/es';
+import { getLocale } from '../../utils/locale';
 import { AUTH_TOKEN_KEY, SESSION_DATA } from '../../constants/common';
 import { ExpertScheduler, SignupSessionData } from '../../types/experts';
 import { Tag } from '../../types/tags';
@@ -42,27 +37,6 @@ type ScheduleModalProps = {
 
 type MenuItem = Required<MenuProps>['items'][number];
 
-const getLocale = (locale: string) => {
-    if (locale) {
-        switch (locale) {
-            case 'ru':
-                return locale_ru;
-            case 'de':
-                return locale_de;
-            case 'fr':
-                return locale_fr;
-            case 'it':
-                return locale_it;
-            case 'es':
-                return locale_es;
-            default:
-                return locale_en;
-        }
-    }
-
-    return locale_en;
-};
-
 const getCalendarMenu = (start: Dayjs): MenuItem[] => Array.from({ length: 3 })
     .map((_: unknown, index: number) => {
         const date = index ? start.add(index, 'M') : start.clone();

src/components/Modals/UsersListModal.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import React, { useCallback, useState } from 'react';
+import { Button, Modal, notification } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import debounce from 'lodash/debounce';
+import Image from 'next/image';
+import { i18nText } from '../../i18nKeys';
+import { getUsersList } from '../../actions/rooms';
+import { PublicUser } from '../../types/sessions';
+import { Room } from '../../types/rooms';
+import { CustomInput } from '../view/CustomInput';
+import { Loader } from '../view/Loader';
+
+type UserListModalProps = {
+    room: Room;
+    isOpen: boolean;
+    locale: string;
+    handleCancel: () => void;
+    jwt: string;
+    submit: (id: number) => void;
+    afterCloseModal?: () => void;
+};
+
+export const UserListModal = ({ room, isOpen, locale, handleCancel, jwt, submit, afterCloseModal }: UserListModalProps) => {
+    const [users, setUsers] = useState<PublicUser[] | undefined>();
+    const [loading, seLoading] = useState<boolean>(false);
+
+    const onSearch = useCallback(debounce((e: any) => {
+        if (e?.target?.value) {
+            seLoading(true);
+            getUsersList(locale, jwt, { template: e.target.value })
+                .then(({ items }) => {
+                    const clients = room?.clients?.map(({ id }) => id);
+                    setUsers(items
+                        ? items.filter(({ id }) => !(clients?.length && clients.includes(id) || id === room?.supervisor?.id || id === room?.coach?.id))
+                        : undefined);
+                })
+                .catch((err: any) => {
+                    notification.error({
+                        message: 'Error',
+                        description: err?.response?.data?.errMessage
+                    });
+                })
+                .finally(() => {
+                    seLoading(false);
+                });
+        } else {
+            setUsers(undefined);
+        }
+
+    }, 300), []);
+
+    const onAfterClose = () => {
+        setUsers(undefined);
+        if (afterCloseModal) afterCloseModal();
+    }
+
+    return (
+        <Modal
+            className="b-modal"
+            open={isOpen}
+            title={undefined}
+            onOk={undefined}
+            onCancel={handleCancel}
+            footer={false}
+            width={498}
+            closeIcon={<CloseOutlined style={{ fontSize: 20, color: '#000' }}/>}
+            afterClose={onAfterClose}
+        >
+            <div className="b-modal__users-list__content">
+                <CustomInput
+                    placeholder={i18nText('search', locale)}
+                    onChange={onSearch}
+                    allowClear
+                />
+                {users && (
+                    <div className="b-users-list__wrapper">
+                        <Loader isLoading={loading}>
+                            {users.length > 0 ? (
+                                <div className="b-users-list">
+                                    {users.map(({ id, name, surname, faceImageUrl }) => (
+                                        <div className="b-users-list-item" key={id}>
+                                            <div>
+                                                <div className="card-detail__portrait card-detail__portrait_small">
+                                                    <Image src={faceImageUrl || '/images/user-avatar.png'} width={86}
+                                                           height={86}
+                                                           alt=""/>
+                                                </div>
+                                                <div className="card-detail__inner">
+                                                    <div
+                                                        className="card-detail__name">{`${name} ${surname || ''}`}</div>
+                                                </div>
+                                            </div>
+                                            <Button
+                                                className="card-detail__filled"
+                                                onClick={() => submit(id)}
+                                            >
+                                                {i18nText('room.invite', locale)}
+                                            </Button>
+                                        </div>
+                                    ))}
+                                </div>
+                            ) : (
+                                <div className="b-users-list__empty">{i18nText('noData', locale)}</div>
+                            )}
+                        </Loader>
+                    </div>
+                )}
+            </div>
+        </Modal>
+    )
+}

src/components/view/CustomDatePicker.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import React, { useEffect, useState } from 'react';
+import { DatePicker } from 'antd';
+import { CalendarOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import 'dayjs/locale/ru';
+import 'dayjs/locale/en';
+import 'dayjs/locale/de';
+import 'dayjs/locale/it';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/es';
+import { getLocale } from '../../utils/locale';
+
+export const CustomDatePicker = (props: any) => {
+    const { label, value, locale, ...other } = props;
+    const [isActiveLabel, setIsActiveLabel] = useState<boolean>(false);
+
+    dayjs.locale(locale);
+
+    useEffect(() => {
+        if (label) {
+            setIsActiveLabel(!!value);
+        } else {
+            setIsActiveLabel(false);
+        }
+    }, [value]);
+
+    const onOpenChange = (open: boolean) => {
+        if (open) {
+            if (!isActiveLabel) setIsActiveLabel(true)
+        } else {
+            setIsActiveLabel(!!value)
+        }
+    };
+
+    return (
+        <div className={`b-datepicker-wrap ${isActiveLabel ? 'b-datepicker__active' : ''}`}>
+            <div className="b-datepicker-label">
+                <span>{label}</span>
+            </div>
+            <DatePicker
+                className="b-datepicker"
+                format="YYYY-MM-DD"
+                locale={getLocale(locale)}
+                value={value}
+                showNow={false}
+                onOpenChange={onOpenChange}
+                needConfirm={false}
+                placeholder=""
+                variant="filled"
+                allowClear={false}
+                popupClassName="b-datepicker-popup"
+                minDate={dayjs().startOf('month')}
+                suffixIcon={<CalendarOutlined style={{ color: '#2c7873', fontSize: 20 }} />}
+                {...other}
+            />
+        </div>
+    );
+};

src/i18nKeys/de.ts

@@ -1,6 +1,7 @@
 export default {
     accountMenu: {
         sessions: 'Kommende & letzte Sitzungen',
+        rooms: 'Zimmer',
         notifications: 'Benachrichtigung',
         support: 'Hilfe & Support',
         information: 'Rechtliche Informationen',
@@ -48,7 +49,23 @@ export default {
         upcoming: 'Zukünftige Räume',
         requested: 'Angeforderte Räume',
         recent: 'Kürzliche Räume',
-        newRoom: 'Neuer Raum'
+        newRoom: 'Neuer Raum',
+        editRoom: 'Raum bearbeiten',
+        date: 'Datum',
+        time: 'Zeit',
+        maxParticipants: 'Max. erlaubte Teilnehmer',
+        presenceOfSupervisor: 'Anwesenheit eines Supervisors',
+        supervisor: 'Supervisor',
+        members: 'Mitglieder',
+        participants: 'Teilnehmer',
+        roomCreator: 'Raum-Ersteller',
+        inviteSupervisor: 'Supervisor einladen',
+        joinSupervisor: 'Als Supervisor beitreten',
+        inviteParticipant: 'Teilnehmer einladen',
+        joinParticipant: 'Als Teilnehmer beitreten',
+        rapport: 'Rapport',
+        invite: 'Invite',
+        save: 'Raum speichern'
     },
     agreementText: 'Folgendes habe ich gelesen und erkläre mich damit einverstanden: Benutzervereinbarung,',
     userAgreement: 'Benutzervereinbarung',

src/i18nKeys/en.ts

@@ -1,6 +1,7 @@
 export default {
     accountMenu: {
         sessions: 'Upcoming & Recent Sessions',
+        rooms: 'Rooms',
         notifications: 'Notification',
         support: 'Help & Support',
         information: 'Legal Information',
@@ -48,7 +49,23 @@ export default {
         upcoming: 'Upcoming Rooms',
         requested: 'Rooms Requested',
         recent: 'Recent Rooms',
-        newRoom: 'New Room'
+        newRoom: 'New Room',
+        editRoom: 'Edit Room',
+        date: 'Date',
+        time: 'Time',
+        maxParticipants: 'Max Participants Allowed',
+        presenceOfSupervisor: 'Presence of a Supervisor',
+        supervisor: 'Supervisor',
+        members: 'Members',
+        participants: 'Participants',
+        roomCreator: 'Room Creator',
+        inviteSupervisor: 'Invite Supervisor',
+        joinSupervisor: 'Join As A Supervisor',
+        inviteParticipant: 'Invite Participant',
+        joinParticipant: 'Join as a participant',
+        rapport: 'Rapport',
+        invite: 'Invite',
+        save: 'Save room'
     },
     agreementText: 'I have read and agree with the terms of the User Agreement,',
     userAgreement: 'User Agreement',

src/i18nKeys/es.ts

@@ -1,6 +1,7 @@
 export default {
     accountMenu: {
         sessions: 'Próximas y recientes sesiones',
+        rooms: 'Habitaciones',
         notifications: 'Notificación',
         support: 'Ayuda y asistencia',
         information: 'Información jurídica',
@@ -48,7 +49,23 @@ export default {
         upcoming: 'Próximas salas',
         requested: 'Salas solicitadas',
         recent: 'Salas recientes',
-        newRoom: 'Nueva sala'
+        newRoom: 'Nueva sala',
+        editRoom: 'Editar la sala',
+        date: 'Fecha',
+        time: 'Tiempo',
+        maxParticipants: 'Máximo de participantes permitidos',
+        presenceOfSupervisor: 'Presencia de un supervisor',
+        supervisor: 'Supervisor',
+        members: 'Miembros',
+        participants: 'Participantes',
+        roomCreator: 'Creador de salas',
+        inviteSupervisor: 'Invitar al supervisor',
+        joinSupervisor: 'Unirse como supervisor',
+        inviteParticipant: 'Invitar a un participante',
+        joinParticipant: 'Unirse como participante',
+        rapport: 'Buena relación',
+        invite: 'Invitar',
+        save: 'Guardar sala'
     },
     agreementText: 'He leído y acepto las condiciones del Acuerdo de usuario,',
     userAgreement: 'Acuerdo de usuario',

src/i18nKeys/fr.ts

@@ -1,6 +1,7 @@
 export default {
     accountMenu: {
         sessions: 'Sessions futures et récentes',
+        rooms: 'Chambres',
         notifications: 'Notification',
         support: 'Aide et support',
         information: 'Informations légales',
@@ -48,7 +49,23 @@ export default {
         upcoming: 'Salles futures',
         requested: 'Salles demandées',
         recent: 'Salles récentes',
-        newRoom: 'Nouvelle salle'
+        newRoom: 'Nouvelle salle',
+        editRoom: 'Modifier la salle',
+        date: 'Date',
+        time: 'Temps',
+        maxParticipants: 'Max de participants autorisés',
+        presenceOfSupervisor: 'Présence d\'un superviseur',
+        supervisor: 'Superviseur',
+        members: 'Membres',
+        participants: 'Participants',
+        roomCreator: 'Créateur de la salle',
+        inviteSupervisor: 'Inviter un superviseur',
+        joinSupervisor: 'Rejoindre en tant que superviseur',
+        inviteParticipant: 'Inviter un participant',
+        joinParticipant: 'Rejoindre en tant que participant',
+        rapport: 'Rapport',
+        invite: 'Inviter',
+        save: 'Sauvegarder la salle'
     },
     agreementText: 'J\'ai lu et j\'accepte les dispositions de l\'Accord Utilisateur et de la',
     userAgreement: '',

src/i18nKeys/it.ts

@@ -1,6 +1,7 @@
 export default {
     accountMenu: {
         sessions: 'Prossime e recenti sessioni',
+        rooms: 'Stanze',
         notifications: 'Notifica',
         support: 'Assistenza e supporto',
         information: 'Informazioni legali',
@@ -48,7 +49,23 @@ export default {
         upcoming: 'Prossime sale',
         requested: 'Sale richieste',
         recent: 'Sale recenti',
-        newRoom: 'Nuova sala'
+        newRoom: 'Nuova sala',
+        editRoom: 'Modifica sala',
+        date: 'Data',
+        time: 'Tempo',
+        maxParticipants: 'Numero massimo di partecipanti consentiti',
+        presenceOfSupervisor: 'Presenza di un relatore',
+        supervisor: 'Relatore',
+        members: 'Iscritti',
+        participants: 'Partecipanti',
+        roomCreator: 'Creatore sala',
+        inviteSupervisor: 'Invita relatore',
+        joinSupervisor: 'Partecipa come relatore',
+        inviteParticipant: 'Invita partecipante',
+        joinParticipant: 'Partecipa come partecipante',
+        rapport: 'Rapporto',
+        invite: 'Invita',
+        save: 'Salva sala'
     },
     agreementText: 'Ho letto e accetto i termini dell\'Accordo con l\'utente,',
     userAgreement: '',

src/i18nKeys/ru.ts

@@ -1,6 +1,7 @@
 export default {
     accountMenu: {
         sessions: 'Предстоящие и недавние сессии',
+        rooms: 'Комнаты',
         notifications: 'Уведомления',
         support: 'Служба поддержки',
         information: 'Юридическая информация',
@@ -48,7 +49,23 @@ export default {
         upcoming: 'Предстоящие комнаты',
         requested: 'Запрошенные комнаты',
         recent: 'Недавние комнаты',
-        newRoom: 'Новая комната'
+        newRoom: 'Новая комната',
+        editRoom: 'Изменить комнату',
+        date: 'Дата',
+        time: 'Время',
+        maxParticipants: 'Макс. кол-во участников',
+        presenceOfSupervisor: 'Присутствие супервизора',
+        supervisor: 'Супервайзер',
+        members: 'Участники',
+        participants: 'Участники',
+        roomCreator: 'Создатель комнаты',
+        inviteSupervisor: 'Пригласить супервизора',
+        joinSupervisor: 'Присоединиться как супервизор',
+        inviteParticipant: 'Пригласить участника',
+        joinParticipant: 'Присоединиться как участник',
+        rapport: 'Раппорт',
+        invite: 'Пригласить',
+        save: 'Сохранить комнату'
     },
     agreementText: 'Я прочитал и согласен с условиями Пользовательского соглашения,',
     userAgreement: 'Пользовательского соглашения',

src/styles/_default.scss

@@ -668,6 +668,7 @@ a {
       & > div {
         display: flex;
         gap: 4px;
+        padding-left: 1px;
 
         &:first-child {
           flex-direction: column;

src/styles/_modal.scss

@@ -82,6 +82,13 @@
       }
     }
   }
+
+  &__users-list__content {
+    display: flex;
+    flex-direction: column;
+    padding: 40px;
+    gap: 24px;
+  }
 }
 
 .ant-modal-mask {

src/styles/_pages.scss

@@ -931,6 +931,10 @@
         &.chosen {
           color: #D93E5C;
         }
+
+        &.history {
+          color: #c4c4c4;
+        }
       }
     }
   }

src/styles/sessions/_agora.scss

@@ -2,9 +2,12 @@
   &__wrap {
     width: 100%;
     height: 716px;
-    border-radius: 16px;
     position: relative;
     overflow: hidden;
+
+    &__single {
+      border-radius: 16px;
+    }
   }
 
   &__container {
@@ -25,6 +28,16 @@
     justify-content: space-between;
     align-items: flex-end;
     z-index: 2;
+
+    &_group {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      background: rgba(0, 59, 70, 0.4);
+      padding: 16px;
+      border-radius: 16px;
+      margin-top: 24px;
+    }
   }
 
   &__controls {
@@ -126,6 +139,44 @@
       position: absolute;
       display: flex;
     }
+
+    &_groups {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      justify-content: center;
+
+      & > div {
+        border-radius: 16px;
+        overflow: hidden;
+
+        video {
+          object-fit: contain !important;
+        }
+      }
+
+      &.gr-1 {
+        & > div {
+          width: 100%;
+        }
+      }
+
+      &.gr-2, &.gr-3, &.gr-4 {
+        & > div {
+          flex: calc((100% - 16px) / 2) 0;
+        }
+      }
+
+      &.gr-5, &.gr-6, &.gr-7, &.gr-8, &.gr-9 {
+        flex: calc((100% - 16px) / 3) 0;
+      }
+
+      &.gr-10, &.gr-11, &.gr-12, &.gr-13, &.gr-14, &.gr-15, &.gr-16 {
+        flex: calc((100% - 16px) / 4) 0;
+      }
+    }
   }
 
   &__video {

src/styles/sessions/_details.scss

@@ -18,6 +18,11 @@
     background: lightgray 50%;
     box-shadow: 0 8px 16px 0 rgba(102, 165, 173, 0.32);
     overflow: hidden;
+
+    &_small {
+      width: 86px;
+      height: 86px;
+    }
   }
 
   &__inner {
@@ -41,6 +46,17 @@
     line-height: 120%;
   }
 
+  &__supervisor-comment {
+    width: 100%;
+    background: #E4F5FA;
+    padding: 8px;
+    border-radius: 0 8px 8px 8px;
+    color: #66A5AD;
+    @include rem(13);
+    font-weight: 500;
+    line-height: 120%;
+  }
+
   &__comments {
     display: flex;
     flex-direction: column;
@@ -200,6 +216,31 @@
     }
   }
 
+  &__filled {
+    user-select: none;
+    outline: none !important;
+    border: none !important;
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: 8px !important;
+    background: #66A5AD !important;
+    box-shadow: none !important;
+    display: flex;
+    height: 54px !important;
+    padding: 15px 24px;
+    justify-content: center;
+    align-items: center;
+    color: #fff !important;
+    @include rem(15);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%;
+
+    &:hover, &:active {
+      color: #fff !important;
+    }
+  }
+
   &__header {
     display: flex;
     padding-bottom: 8px;
@@ -268,6 +309,54 @@
     overflow: hidden;
   }
 
+  &__profile {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding-top: 16px;
+    align-items: flex-start;
+    border-top: 1px solid #C4DFE6;
+
+    &_title {
+      width: 100%;
+      gap: 16px;
+      display: flex;
+      justify-content: space-between;
+
+      div {
+        @include rem(18);
+        font-weight: 600;
+        line-height: 150%;
+        color: #6FB98F;
+
+        &:first-child {
+          color: #003B46;
+        }
+      }
+    }
+
+    &_list {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    &_item {
+      display: flex;
+      gap: 16px;
+      justify-content: space-between;
+
+      .card-detail__inner {
+        justify-content: center;
+      }
+
+      .card-detail__name {
+        color: #2C7873;
+      }
+    }
+  }
+
   &__footer {
     display: flex;
     justify-content: flex-end;

src/styles/view/_calendar.scss

@@ -48,7 +48,6 @@
       opacity: 1 !important;
       background: transparent !important;
     }
-    
   }
 
   th, td {

src/styles/view/_datepicker.scss

@@ -0,0 +1,128 @@
+.b-datepicker {
+  width: 100% !important;
+  height: 54px !important;
+
+  &.ant-picker-filled {
+    background: transparent !important;
+    z-index: 1;
+    padding-top: 22px !important;
+    padding-left: 16px !important;
+
+    &:hover {
+      border-color: #2c7873 !important;
+    }
+
+    .ant-picker-input {
+      input {
+        font-size: 14px !important;
+      }
+    }
+  }
+
+  .ant-picker-suffix {
+    margin-top: -20px;
+  }
+
+  &-wrap {
+    position: relative;
+    width: 100%;
+    background-color: #F8F8F7;
+    border-radius: 8px;
+
+    &.b-datepicker__active .b-datepicker-label {
+      font-size: 12px;
+      font-weight: 300;
+      line-height: 14px;
+      top: 8px;
+    }
+  }
+
+  &-label {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    color: #000;
+    opacity: .3;
+    position: absolute;
+    left: 16px;
+    top: 15px;
+    right: 22px;
+    z-index: 0;
+    transition: all .1s ease;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    span {
+      white-space: nowrap;
+    }
+  }
+
+  &-popup {
+    padding: 16px !important;
+
+    .ant-picker-date-panel {
+      padding: 16px 8px !important;
+    }
+
+    .ant-picker-header-view {
+      color: #2c7873 !important;
+    }
+
+    .ant-picker-header {
+      border: none !important;
+
+      .ant-picker-header-super-prev-btn, .ant-picker-header-super-next-btn {
+        display: none !important;
+      }
+    }
+
+    .ant-picker-cell {
+      opacity: 0 !important;
+      padding: 0 !important;
+
+      &:not(.ant-picker-cell-disabled) {
+        color: #66A5AD !important;
+
+        &:hover {
+          .ant-picker-cell-inner {
+            color: #6FB98F !important;
+            background: transparent !important;
+          }
+        }
+      }
+
+      &-selected:not(.ant-picker-cell-disabled) .ant-picker-cell-inner {
+        color: #6FB98F !important;
+        background: transparent !important;
+      }
+
+      &-disabled {
+        color: rgba(0, 0, 0, 0.25) !important;
+
+        &::before {
+          background: transparent !important;
+        }
+      }
+
+      &.ant-picker-cell-in-view {
+        opacity: 1 !important;
+        background: transparent !important;
+      }
+
+    }
+
+    .ant-picker-cell-inner::before {
+      border: none !important;
+    }
+
+    th, td {
+      vertical-align: middle !important;
+      height: 36px !important;
+    }
+
+    th {
+      color: #66A5AD !important;
+    }
+  }
+}

src/styles/view/_room.scss

@@ -0,0 +1,86 @@
+.card-room {
+  &__details {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 120px auto;
+    gap: 4px 8px;
+
+    div {
+      @include rem(13);
+      font-weight: 500;
+      line-height: 120%;
+      color: #2C7873;
+
+      &:nth-child(2n) {
+        color: #6FB98F;
+      }
+    }
+  }
+}
+
+.b-users-list {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 0 16px;
+
+  &__empty {
+    color: gray;
+  }
+
+  &-item {
+    padding: 0 0 16px;
+    border-bottom: 1px solid #C4DFE6;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    &:last-child {
+      border-bottom: none;
+      padding: 0;
+    }
+
+    & > div {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+    }
+  }
+}
+
+.b-room-form {
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+    align-items: center;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0 !important;
+  }
+
+  .card-detail__apply {
+    align-self: flex-start;
+  }
+
+  .b-room-switch {
+    label {
+      margin-right: 24px;
+      &:after {
+        display: none !important;
+      }
+    }
+
+    & > div {
+      justify-content: space-between;
+    }
+  }
+}
+
+.ant-select-item-option-content {
+  span {
+    text-transform: capitalize;
+  }
+}

src/styles/view/_select.scss

@@ -8,6 +8,7 @@
     border-radius: 8px !important;
     padding: 22px 16px 8px !important;
     box-shadow: none !important;
+    z-index: 1;
 
     .ant-select-selection-item {
       font-size: 15px !important;
@@ -53,7 +54,7 @@
   }
 
   &-label {
-    font-size: 15px;
+    font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;

src/styles/view/_timepicker.scss

@@ -13,7 +13,7 @@
 
     .ant-picker-input {
       input {
-        font-size: 15px !important;
+        font-size: 14px !important;
       }
     }
   }

src/styles/view/style.scss

@@ -9,6 +9,8 @@
 @import "_practice.scss";
 @import "_collapse.scss";
 @import "_timepicker.scss";
+@import "_datepicker.scss";
 @import "_calendar.scss";
 @import "_schedule.scss";
 @import "_radio.scss";
+@import "_room.scss";

src/types/author.ts

@@ -1,5 +1,4 @@
 import type { ChainModifiers, Entry, EntryFieldTypes, EntrySkeletonType, LocaleCode } from 'contentful'
-import {BlogPostFields} from "./blogPost";
 import {ContentImage} from "../lib/contentful/contentImage";
 
 export interface AuthorFields {

src/types/rooms.ts

@@ -0,0 +1,44 @@
+import { PublicUser, Session, SessionState } from './sessions';
+import { Tag } from './tags';
+import { Slot } from './experts';
+
+export enum RoomsType {
+    UPCOMING = 'upcoming',
+    RECENT = 'recent',
+    NEW = 'new',
+}
+
+export type Record = {
+    id: number;
+    sessionId: number;
+    sid?: string;
+    resourceId?: string;
+    readyForLoad?: boolean;
+    cname?: string;
+}
+
+export type Room = Session & { recordings?: Record[] };
+
+export type GetUsersForRooms = {
+    items?: PublicUser[],
+    isTooManyResults?: boolean;
+}
+
+export type RoomEdit = {
+    id: number,
+    scheduledStartAtUtc?: string,
+    scheduledEndAtUtc?: string,
+    state?: SessionState,
+    cost?: number,
+    maxClients?: number,
+    title?: string,
+    description?: string,
+    isNeedSupervisor?: boolean,
+    tagIds?: number[]
+};
+
+export type RoomEditDTO = {
+    item: RoomEdit;
+    tags?: Tag[];
+    availableSlots: Slot[];
+};

src/types/sessions.ts

@@ -6,6 +6,8 @@ export type PublicUser = {
     name?: string;
     surname?: string;
     faceImageUrl?: string;
+    coachBotId?: number;
+    parentId?: number;
 };
 
 // type User = {
@@ -148,6 +150,7 @@ export type Session = {
     themesTags?: SessionTag[];
     coachComments?: SessionComment[];
     clientComments?: SessionComment[];
+    creatorId?: number;
 };
 
 export enum SessionType {

src/utils/account.ts

@@ -2,7 +2,7 @@ import { message } from 'antd';
 import type { UploadFile } from 'antd';
 import { i18nText } from '../i18nKeys';
 
-const ROUTES = ['sessions', 'notifications', 'support', 'information', 'settings', 'messages', 'expert-profile'];
+const ROUTES = ['sessions', 'rooms', 'notifications', 'support', 'information', 'settings', 'messages', 'expert-profile'];
 const COUNTS: Record<string, number> = {
     sessions: 12,
     notifications: 5,

src/utils/locale.ts

@@ -0,0 +1,28 @@
+import locale_ru from 'antd/lib/calendar/locale/ru_RU';
+import locale_en from 'antd/lib/calendar/locale/en_GB';
+import locale_de from 'antd/lib/calendar/locale/de_DE';
+import locale_it from 'antd/lib/calendar/locale/it_IT';
+import locale_es from 'antd/lib/calendar/locale/es_ES';
+import locale_fr from 'antd/lib/calendar/locale/fr_FR';
+
+// for calendars
+export const getLocale = (locale: string) => {
+    if (locale) {
+        switch (locale) {
+            case 'ru':
+                return locale_ru;
+            case 'de':
+                return locale_de;
+            case 'fr':
+                return locale_fr;
+            case 'it':
+                return locale_it;
+            case 'es':
+                return locale_es;
+            default:
+                return locale_en;
+        }
+    }
+
+    return locale_en;
+};