contests

src/components/button/PrimaryButton.tsx

@@ -5,7 +5,7 @@ interface ButtonProps {
     disabled?: boolean;
     text?: string;
     className?: string;
-    onClick: () => void;
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     children?: React.ReactNode;
     color?: 'primary' | 'secondary' | 'error' | 'warning' | 'success';
 }
@@ -60,8 +60,10 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
                         '[&:focus-visible+*]:outline-liquid-brightmain',
                     )}
                     disabled={disabled}
-                    onClick={() => {
+                    onClick={(
-                        onClick();
+                        e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+                    ) => {
+                        onClick(e);
                     }}
                 />
 

src/components/button/ReverseButton.tsx

@@ -5,7 +5,7 @@ interface ButtonProps {
     disabled?: boolean;
     text?: string;
     className?: string;
-    onClick: () => void;
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     children?: React.ReactNode;
 }
 
@@ -42,8 +42,10 @@ export const ReverseButton: React.FC<ButtonProps> = ({
                         '[&:focus-visible+*]:outline-liquid-brightmain',
                     )}
                     disabled={disabled}
-                    onClick={() => {
+                    onClick={(
-                        onClick();
+                        e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+                    ) => {
+                        onClick(e);
                     }}
                 />
 

src/components/button/SecondaryButton.tsx

@@ -5,7 +5,7 @@ interface ButtonProps {
     disabled?: boolean;
     text?: string;
     className?: string;
-    onClick: () => void;
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     children?: React.ReactNode;
 }
 
@@ -41,8 +41,8 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
                         '[&:focus-visible+*]:outline-liquid-brightmain',
                     )}
                     disabled={disabled}
-                    onClick={() => {
+                    onClick={(e) => {
-                        onClick();
+                        onClick(e);
                     }}
                 />
 

src/components/input/DateRangeInput.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface DateRangeInputProps {
+    startLabel?: string;
+    endLabel?: string;
+    startValue?: string;
+    endValue?: string;
+    onChange: (field: 'startsAt' | 'endsAt', value: string) => void;
+    className?: string;
+}
+
+const DateRangeInput: React.FC<DateRangeInputProps> = ({
+    startLabel = 'Дата начала',
+    endLabel = 'Дата окончания',
+    startValue,
+    endValue,
+    onChange,
+    className = '',
+}) => {
+    return (
+        <div className={`flex flex-col gap-2 ${className}`}>
+            <div>
+                <label className="block text-sm font-medium text-gray-700">
+                    {startLabel}
+                </label>
+                <input
+                    type="datetime-local"
+                    value={startValue}
+                    onChange={(e) => onChange('startsAt', e.target.value)}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                />
+            </div>
+            <div>
+                <label className="block text-sm font-medium text-gray-700">
+                    {endLabel}
+                </label>
+                <input
+                    type="datetime-local"
+                    value={endValue}
+                    onChange={(e) => onChange('endsAt', e.target.value)}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                />
+            </div>
+        </div>
+    );
+};
+
+export default DateRangeInput;

src/pages/Home.tsx

@@ -12,6 +12,7 @@ import Groups from '../views/home/groups/Groups';
 import Contests from '../views/home/contests/Contests';
 import { PrimaryButton } from '../components/button/PrimaryButton';
 import Group from '../views/home/groups/Group';
+import Contest from '../views/home/contest/Contest';
 
 const Home = () => {
     const name = useAppSelector((state) => state.auth.username);
@@ -37,6 +38,7 @@ const Home = () => {
                     <Route path="group/:groupId" element={<Group />} />
                     <Route path="groups/*" element={<Groups />} />
                     <Route path="contests/*" element={<Contests />} />
+                    <Route path="contest/:contestId/*" element={<Contest />} />
                     <Route
                         path="*"
                         element={

src/redux/slices/contests.ts

@@ -24,9 +24,9 @@ export interface Contest {
     scheduleType: string;
     startsAt: string;
     endsAt: string;
-    availableFrom: string | null;
-    availableUntil: string | null;
     attemptDurationMinutes: number | null;
+    maxAttempts: number | null;
+    allowEarlyFinish: boolean | null;
     groupId: number | null;
     groupName: string | null;
     missions: Mission[];
@@ -40,30 +40,37 @@ interface ContestsResponse {
 }
 
 export interface CreateContestBody {
-    name: string;
+    name?: string | null;
-    description: string;
+    description?: string | null;
-    scheduleType: 'FixedWindow' | 'Flexible';
+    scheduleType: 'AlwaysOpen' | 'FixedWindow' | 'RollingWindow';
-    startsAt: string;
+    visibility: 'Public' | 'GroupPrivate';
-    endsAt: string;
+    startsAt?: string | null;
-    availableFrom: string | null;
+    endsAt?: string | null;
-    availableUntil: string | null;
+    attemptDurationMinutes?: number | null;
-    attemptDurationMinutes: number | null;
+    maxAttempts?: number | null;
-    groupId: number | null;
+    allowEarlyFinish?: boolean | null;
-    missionIds: number[];
+    groupId?: number | null;
-    articleIds: number[];
+    missionIds?: number[] | null;
-    participantIds: number[];
+    articleIds?: number[] | null;
-    organizerIds: number[];
+    participantIds?: number[] | null;
+    organizerIds?: number[] | null;
 }
 
 // =====================
 // Состояние
 // =====================
 
+type Status = 'idle' | 'loading' | 'successful' | 'failed';
+
 interface ContestsState {
     contests: Contest[];
     selectedContest: Contest | null;
     hasNextPage: boolean;
-    status: 'idle' | 'loading' | 'successful' | 'failed';
+    statuses: {
+        fetchList: Status;
+        fetchById: Status;
+        create: Status;
+    };
     error: string | null;
 }
 
@@ -71,7 +78,11 @@ const initialState: ContestsState = {
     contests: [],
     selectedContest: null,
     hasNextPage: false,
-    status: 'idle',
+    statuses: {
+        fetchList: 'idle',
+        fetchById: 'idle',
+        create: 'idle',
+    },
     error: null,
 };
 
@@ -79,7 +90,6 @@ const initialState: ContestsState = {
 // Async Thunks
 // =====================
 
-// Получение списка контестов
 export const fetchContests = createAsyncThunk(
     'contests/fetchAll',
     async (
@@ -104,7 +114,6 @@ export const fetchContests = createAsyncThunk(
     },
 );
 
-// Получение одного контеста по ID
 export const fetchContestById = createAsyncThunk(
     'contests/fetchById',
     async (id: number, { rejectWithValue }) => {
@@ -119,7 +128,6 @@ export const fetchContestById = createAsyncThunk(
     },
 );
 
-// Создание нового контеста
 export const createContest = createAsyncThunk(
     'contests/create',
     async (contestData: CreateContestBody, { rejectWithValue }) => {
@@ -148,17 +156,26 @@ const contestsSlice = createSlice({
         clearSelectedContest: (state) => {
             state.selectedContest = null;
         },
+        setContestStatus: (
+            state,
+            action: PayloadAction<{
+                key: keyof ContestsState['statuses'];
+                status: Status;
+            }>,
+        ) => {
+            state.statuses[action.payload.key] = action.payload.status;
+        },
     },
     extraReducers: (builder) => {
         // fetchContests
         builder.addCase(fetchContests.pending, (state) => {
-            state.status = 'loading';
+            state.statuses.fetchList = 'loading';
             state.error = null;
         });
         builder.addCase(
             fetchContests.fulfilled,
             (state, action: PayloadAction<ContestsResponse>) => {
-                state.status = 'successful';
+                state.statuses.fetchList = 'successful';
                 state.contests = action.payload.contests;
                 state.hasNextPage = action.payload.hasNextPage;
             },
@@ -166,47 +183,47 @@ const contestsSlice = createSlice({
         builder.addCase(
             fetchContests.rejected,
             (state, action: PayloadAction<any>) => {
-                state.status = 'failed';
+                state.statuses.fetchList = 'failed';
                 state.error = action.payload;
             },
         );
 
         // fetchContestById
         builder.addCase(fetchContestById.pending, (state) => {
-            state.status = 'loading';
+            state.statuses.fetchById = 'loading';
             state.error = null;
         });
         builder.addCase(
             fetchContestById.fulfilled,
             (state, action: PayloadAction<Contest>) => {
-                state.status = 'successful';
+                state.statuses.fetchById = 'successful';
                 state.selectedContest = action.payload;
             },
         );
         builder.addCase(
             fetchContestById.rejected,
             (state, action: PayloadAction<any>) => {
-                state.status = 'failed';
+                state.statuses.fetchById = 'failed';
                 state.error = action.payload;
             },
         );
 
         // createContest
         builder.addCase(createContest.pending, (state) => {
-            state.status = 'loading';
+            state.statuses.create = 'loading';
             state.error = null;
         });
         builder.addCase(
             createContest.fulfilled,
             (state, action: PayloadAction<Contest>) => {
-                state.status = 'successful';
+                state.statuses.create = 'successful';
                 state.contests.unshift(action.payload);
             },
         );
         builder.addCase(
             createContest.rejected,
             (state, action: PayloadAction<any>) => {
-                state.status = 'failed';
+                state.statuses.create = 'failed';
                 state.error = action.payload;
             },
         );
@@ -216,5 +233,6 @@ const contestsSlice = createSlice({
 // =====================
 // Экспорты
 // =====================
-export const { clearSelectedContest } = contestsSlice.actions;
+
+export const { clearSelectedContest, setContestStatus } = contestsSlice.actions;
 export const contestsReducer = contestsSlice.reducer;

src/views/home/contest/Contest.tsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
+import { setMenuActivePage } from '../../../redux/slices/store';
+import { Navigate, Route, Routes, useParams } from 'react-router-dom';
+import { fetchContestById } from '../../../redux/slices/contests';
+import ContestMissions from './Missions';
+
+export interface Article {
+    id: number;
+    name: string;
+    tags: string[];
+}
+
+const Contest = () => {
+    const { contestId } = useParams<{ contestId: string }>();
+    const contestIdNumber =
+        contestId && /^\d+$/.test(contestId) ? parseInt(contestId, 10) : null;
+    if (contestIdNumber === null) {
+        return <Navigate to="/home/contests" replace />;
+    }
+
+    const dispatch = useAppDispatch();
+    const contest = useAppSelector((state) => state.contests.selectedContest);
+
+    useEffect(() => {
+        dispatch(setMenuActivePage('contest'));
+    }, []);
+
+    useEffect(() => {
+        dispatch(fetchContestById(contestIdNumber));
+    }, [contestIdNumber]);
+
+    return (
+        <div>
+            <Routes>
+                <Route
+                    path="*"
+                    element={<ContestMissions contest={contest} />}
+                />
+            </Routes>
+        </div>
+    );
+};
+
+export default Contest;

src/views/home/contest/MissionItem.tsx

@@ -0,0 +1,65 @@
+import { cn } from '../../../lib/cn';
+import { IconError, IconSuccess } from '../../../assets/icons/missions';
+import { useNavigate } from 'react-router-dom';
+
+export interface MissionItemProps {
+    id: number;
+    name: string;
+    timeLimit?: number;
+    memoryLimit?: number;
+    type?: 'first' | 'second';
+    status?: 'empty' | 'success' | 'error';
+}
+
+export function formatMilliseconds(ms: number): string {
+    const rounded = Math.round(ms) / 1000;
+    const formatted = rounded.toString().replace(/\.?0+$/, '');
+    return `${formatted} c`;
+}
+
+export function formatBytesToMB(bytes: number): string {
+    const megabytes = Math.floor(bytes / (1024 * 1024));
+    return `${megabytes} МБ`;
+}
+
+const MissionItem: React.FC<MissionItemProps> = ({
+    id,
+    name,
+    timeLimit = 1000,
+    memoryLimit = 256 * 1024 * 1024,
+    type,
+    status,
+}) => {
+    const navigate = useNavigate();
+
+    return (
+        <div
+            className={cn(
+                'min-h-[44px] w-full relative rounded-[10px] text-liquid-white',
+                type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
+                'grid grid-cols-[80px,2fr,300px,24px] grid-flow-col gap-[20px] px-[20px] box-border items-center',
+                status == 'error' &&
+                    'border-l-[11px] border-l-liquid-red pl-[9px]',
+                status == 'success' &&
+                    'border-l-[11px] border-l-liquid-green pl-[9px]',
+                'cursor-pointer brightness-100 hover:brightness-125 transition-all duration-300',
+            )}
+            onClick={() => {
+                navigate(`/mission/${id}`);
+            }}
+        >
+            <div className="text-[18px] font-bold">#{id}</div>
+            <div className="text-[18px] font-bold">{name}</div>
+            <div className="text-[12px] text-right">
+                стандартный ввод/вывод {formatMilliseconds(timeLimit)},{' '}
+                {formatBytesToMB(memoryLimit)}
+            </div>
+            <div className="h-[24px] w-[24px]">
+                {status == 'error' && <img src={IconError} />}
+                {status == 'success' && <img src={IconSuccess} />}
+            </div>
+        </div>
+    );
+};
+
+export default MissionItem;

src/views/home/contest/Missions.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+import { useAppDispatch } from '../../../redux/hooks';
+import MissionItem, { MissionItemProps } from './MissionItem';
+import { Contest } from '../../../redux/slices/contests';
+
+export interface Article {
+    id: number;
+    name: string;
+    tags: string[];
+}
+
+interface ContestMissionsProps {
+    contest: Contest | null;
+}
+
+const ContestMissions: FC<ContestMissionsProps> = ({ contest }) => {
+    if (!contest) {
+        return <></>;
+    }
+
+    return (
+        <div className=" h-screen grid grid-rows-[74px,1fr] p-[20px] gap-[20px]">
+            <div className=""></div>
+            <div className="h-full min-h-0 overflow-y-scroll medium-scrollbar flex flex-col gap-[20px]">
+                <div className="h-[40px] w-ufll ">
+                    {contest?.name} {contest.id}
+                </div>
+                <div className="w-full">
+                    {contest.missions.map((v, i) => (
+                        <MissionItem
+                            id={v.missionId}
+                            name={v.name}
+                            type={i % 2 ? 'second' : 'first'}
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ContestMissions;

src/views/home/contests/ContestItem.tsx

@@ -2,8 +2,10 @@ import { cn } from '../../../lib/cn';
 import { Account } from '../../../assets/icons/auth';
 import { PrimaryButton } from '../../../components/button/PrimaryButton';
 import { ReverseButton } from '../../../components/button/ReverseButton';
+import { useNavigate } from 'react-router-dom';
 
 export interface ContestItemProps {
+    id: number;
     name: string;
     startAt: string;
     duration: number;
@@ -46,6 +48,7 @@ function formatWaitTime(ms: number): string {
 }
 
 const ContestItem: React.FC<ContestItemProps> = ({
+    id,
     name,
     startAt,
     duration,
@@ -53,6 +56,8 @@ const ContestItem: React.FC<ContestItemProps> = ({
     statusRegister,
     type,
 }) => {
+    const navigate = useNavigate();
+
     const now = new Date();
 
     const waitTime = new Date(startAt).getTime() - now.getTime();
@@ -60,13 +65,16 @@ const ContestItem: React.FC<ContestItemProps> = ({
     return (
         <div
             className={cn(
-                'w-full box-border relative rounded-[10px] px-[20px] py-[10px] text-liquid-white  text-[16px] leading-[20px]',
+                'w-full box-border relative rounded-[10px] px-[20px] py-[10px] text-liquid-white  text-[16px] leading-[20px] cursor-pointer',
                 waitTime <= 0 ? 'grid grid-cols-6' : 'grid grid-cols-7',
                 'items-center font-bold text-liquid-white',
                 type == 'first'
                     ? ' bg-liquid-lighter'
                     : ' bg-liquid-background',
             )}
+            onClick={() => {
+                navigate(`/contest/${id}`);
+            }}
         >
             <div className="text-left font-bold text-[18px]">{name}</div>
             <div className="text-center text-liquid-brightmain font-normal ">
@@ -90,12 +98,22 @@ const ContestItem: React.FC<ContestItemProps> = ({
                 {statusRegister == 'reg' ? (
                     <>
                         {' '}
-                        <PrimaryButton onClick={() => {}} text="Регистрация" />
+                        <PrimaryButton
+                            onClick={(e) => {
+                                e.stopPropagation();
+                            }}
+                            text="Регистрация"
+                        />
                     </>
                 ) : (
                     <>
                         {' '}
-                        <ReverseButton onClick={() => {}} text="Вы записаны" />
+                        <ReverseButton
+                            onClick={(e) => {
+                                e.stopPropagation();
+                            }}
+                            text="Вы записаны"
+                        />
                     </>
                 )}
             </div>

src/views/home/contests/Contests.tsx

@@ -1,18 +1,21 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { SecondaryButton } from '../../../components/button/SecondaryButton';
 import { cn } from '../../../lib/cn';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import ContestsBlock from './ContestsBlock';
 import { setMenuActivePage } from '../../../redux/slices/store';
 import { fetchContests } from '../../../redux/slices/contests';
+import ModalCreateContest from './ModalCreate';
 
 const Contests = () => {
     const dispatch = useAppDispatch();
     const now = new Date();
 
+    const [modalActive, setModalActive] = useState<boolean>(false);
+
     // Берём данные из Redux
     const contests = useAppSelector((state) => state.contests.contests);
-    const loading = useAppSelector((state) => state.contests.status);
+    const status = useAppSelector((state) => state.contests.statuses.create);
     const error = useAppSelector((state) => state.contests.error);
 
     // При загрузке страницы — выставляем активную вкладку и подгружаем контесты
@@ -21,7 +24,7 @@ const Contests = () => {
         dispatch(fetchContests({}));
     }, []);
 
-    if (loading == 'loading') {
+    if (status == 'loading') {
         return (
             <div className="text-liquid-white p-4">Загрузка контестов...</div>
         );
@@ -43,8 +46,10 @@ const Contests = () => {
                         Контесты
                     </div>
                     <SecondaryButton
-                        onClick={() => {}}
+                        onClick={() => {
-                        text="Создать группу"
+                            setModalActive(true);
+                        }}
+                        text="Создать контест"
                         className="absolute right-0"
                     />
                 </div>
@@ -69,6 +74,11 @@ const Contests = () => {
                     })}
                 />
             </div>
+
+            <ModalCreateContest
+                active={modalActive}
+                setActive={setModalActive}
+            />
         </div>
     );
 };

src/views/home/contests/ContestsBlock.tsx

@@ -53,6 +53,7 @@ const ContestsBlock: FC<ContestsBlockProps> = ({
                         {contests.map((v, i) => (
                             <ContestItem
                                 key={i}
+                                id={v.id}
                                 name={v.name}
                                 startAt={v.startsAt}
                                 statusRegister={'reg'}

src/views/home/contests/ModalCreate.tsx

@@ -0,0 +1,191 @@
+import { FC, useEffect, useState } from 'react';
+import { Modal } from '../../../components/modal/Modal';
+import { PrimaryButton } from '../../../components/button/PrimaryButton';
+import { SecondaryButton } from '../../../components/button/SecondaryButton';
+import { Input } from '../../../components/input/Input';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
+import { createContest } from '../../../redux/slices/contests';
+import { CreateContestBody } from '../../../redux/slices/contests';
+import DateRangeInput from '../../../components/input/DateRangeInput';
+
+interface ModalCreateContestProps {
+    active: boolean;
+    setActive: (value: boolean) => void;
+}
+
+const ModalCreateContest: FC<ModalCreateContestProps> = ({
+    active,
+    setActive,
+}) => {
+    const dispatch = useAppDispatch();
+    const status = useAppSelector((state) => state.contests.statuses.create);
+
+    const [form, setForm] = useState<CreateContestBody>({
+        name: '',
+        description: '',
+        scheduleType: 'AlwaysOpen',
+        visibility: 'Public',
+        startsAt: null,
+        endsAt: null,
+        attemptDurationMinutes: null,
+        maxAttempts: null,
+        allowEarlyFinish: false,
+        groupId: null,
+        missionIds: null,
+        articleIds: null,
+        participantIds: null,
+        organizerIds: null,
+    });
+
+    useEffect(() => {
+        if (status === 'successful') {
+            setActive(false);
+        }
+    }, [status]);
+
+    const handleChange = (key: keyof CreateContestBody, value: any) => {
+        setForm((prev) => ({ ...prev, [key]: value }));
+    };
+
+    const handleSubmit = () => {
+        dispatch(createContest(form));
+    };
+
+    return (
+        <Modal
+            className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
+            onOpenChange={setActive}
+            open={active}
+            backdrop="blur"
+        >
+            <div className="w-[550px]">
+                <div className="font-bold text-[30px] mb-[10px]">
+                    Создать контест
+                </div>
+
+                <Input
+                    name="name"
+                    type="text"
+                    label="Название"
+                    className="mt-[10px]"
+                    placeholder="Введите название"
+                    onChange={(v) => handleChange('name', v)}
+                />
+
+                <Input
+                    name="description"
+                    type="text"
+                    label="Описание"
+                    className="mt-[10px]"
+                    placeholder="Введите описание"
+                    onChange={(v) => handleChange('description', v)}
+                />
+
+                <div className="grid grid-cols-2 gap-[10px] mt-[10px]">
+                    <div>
+                        <label className="block text-sm mb-1">
+                            Тип расписания
+                        </label>
+                        <select
+                            className="w-full p-2 rounded-md bg-liquid-darker border border-liquid-lighter"
+                            value={form.scheduleType}
+                            onChange={(e) =>
+                                handleChange(
+                                    'scheduleType',
+                                    e.target
+                                        .value as CreateContestBody['scheduleType'],
+                                )
+                            }
+                        >
+                            <option value="AlwaysOpen">Всегда открыт</option>
+                            <option value="FixedWindow">
+                                Фиксированные даты
+                            </option>
+                            <option value="RollingWindow">
+                                Скользящее окно
+                            </option>
+                        </select>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm mb-1">Видимость</label>
+                        <select
+                            className="w-full p-2 rounded-md bg-liquid-darker border border-liquid-lighter"
+                            value={form.visibility}
+                            onChange={(e) =>
+                                handleChange(
+                                    'visibility',
+                                    e.target
+                                        .value as CreateContestBody['visibility'],
+                                )
+                            }
+                        >
+                            <option value="Public">Публичный</option>
+                            <option value="GroupPrivate">Групповой</option>
+                        </select>
+                    </div>
+                </div>
+
+                {/* Даты начала и конца */}
+                <div className="grid grid-cols-2 gap-[10px] mt-[10px]">
+                    <DateRangeInput
+                        startValue={form.startsAt || ''}
+                        endValue={form.endsAt || ''}
+                        onChange={handleChange}
+                        className="mt-[10px]"
+                    />
+                </div>
+
+                {/* Продолжительность и лимиты */}
+                <div className="grid grid-cols-2 gap-[10px] mt-[10px]">
+                    <Input
+                        name="attemptDurationMinutes"
+                        type="number"
+                        label="Длительность попытки (мин)"
+                        placeholder="Например: 60"
+                        onChange={(v) =>
+                            handleChange('attemptDurationMinutes', Number(v))
+                        }
+                    />
+                    <Input
+                        name="maxAttempts"
+                        type="number"
+                        label="Макс. попыток"
+                        placeholder="Например: 3"
+                        onChange={(v) => handleChange('maxAttempts', Number(v))}
+                    />
+                </div>
+
+                {/* Разрешить раннее завершение */}
+                <div className="flex items-center gap-[10px] mt-[15px]">
+                    <input
+                        id="allowEarlyFinish"
+                        type="checkbox"
+                        checked={!!form.allowEarlyFinish}
+                        onChange={(e) =>
+                            handleChange('allowEarlyFinish', e.target.checked)
+                        }
+                    />
+                    <label htmlFor="allowEarlyFinish">
+                        Разрешить раннее завершение
+                    </label>
+                </div>
+
+                {/* Кнопки */}
+                <div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
+                    <PrimaryButton
+                        onClick={handleSubmit}
+                        text="Создать"
+                        disabled={status === 'loading'}
+                    />
+                    <SecondaryButton
+                        onClick={() => setActive(false)}
+                        text="Отмена"
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default ModalCreateContest;

src/views/home/missions/MissionItem.tsx

@@ -4,16 +4,16 @@ import { useNavigate } from 'react-router-dom';
 
 export interface MissionItemProps {
     id: number;
-    authorId: number;
+    authorId?: number;
     name: string;
     difficulty: 'Easy' | 'Medium' | 'Hard';
-    tags: string[];
+    tags?: string[];
-    timeLimit: number;
+    timeLimit?: number;
-    memoryLimit: number;
+    memoryLimit?: number;
-    createdAt: string;
+    createdAt?: string;
-    updatedAt: string;
+    updatedAt?: string;
-    type: 'first' | 'second';
+    type?: 'first' | 'second';
-    status: 'empty' | 'success' | 'error';
+    status?: 'empty' | 'success' | 'error';
 }
 
 export function formatMilliseconds(ms: number): string {
@@ -31,8 +31,8 @@ const MissionItem: React.FC<MissionItemProps> = ({
     id,
     name,
     difficulty,
-    timeLimit,
+    timeLimit = 1000,
-    memoryLimit,
+    memoryLimit = 256 * 1024 * 1024,
     type,
     status,
 }) => {
@@ -41,7 +41,7 @@ const MissionItem: React.FC<MissionItemProps> = ({
     return (
         <div
             className={cn(
-                'h-[44px] w-full relative rounded-[10px] text-liquid-white',
+                'min-h-[44px] w-full relative rounded-[10px] text-liquid-white',
                 type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
                 'grid grid-cols-[80px,1fr,1fr,60px,24px] grid-flow-col gap-[20px] px-[20px] box-border items-center',
                 status == 'error' &&

src/views/home/missions/Missions.tsx

@@ -3,7 +3,6 @@ import { SecondaryButton } from '../../../components/button/SecondaryButton';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { useEffect, useState } from 'react';
 import { setMenuActivePage } from '../../../redux/slices/store';
-import { useNavigate } from 'react-router-dom';
 import { fetchMissions } from '../../../redux/slices/missions';
 import ModalCreate from './ModalCreate';
 

src/views/home/missions/ModalCreate.tsx

@@ -97,12 +97,15 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
 
                 <div className="mt-4">
                     <label className="block mb-2">Файл задачи</label>
+                    <label className="cursor-pointer inline-flex items-center justify-center px-4 py-2 bg-liquid-lighter hover:bg-liquid-dark transition-colors rounded-[10px] text-liquid-white font-medium shadow-md">
+                        {file ? file.name : 'Выбрать файл'}
                         <input
                             type="file"
                             onChange={handleFileChange}
                             accept=".zip"
-                        required
+                            className="hidden"
                         />
+                    </label>
                 </div>
 
                 {/* Теги */}