1.2.0

Implement final answer management in submission hook and storage utilities. Add functions to save, load, and clear final answers in localStorage. Update useSubmission hook to prioritize final answers over drafts, enhancing user experience during task submissions.
Update LoginPage layout for improved spacing and enhance storage utility with new clearAllChainProgress function. Adjust clearAll method to retain workplace number while ensuring all chain progress data is removed upon logout.
2025-12-14 14:17:40 +03:00 · 2025-12-14 14:17:30 +03:00 · 2025-12-14 14:12:32 +03:00 · 2025-12-14 14:08:04 +03:00 · 2025-12-14 14:06:18 +03:00 · 2025-12-14 13:58:24 +03:00
24 changed files with 1073 additions and 431 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
    "name": "challenge",
-    "version": "1.1.0",
+    "version": "1.2.0",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
            "name": "challenge",
-            "version": "1.1.0",
+            "version": "1.2.0",
            "license": "ISC",
            "dependencies": {
                "@brojs/cli": "^1.9.4",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "challenge",
-    "version": "1.1.0",
+    "version": "1.2.0",
    "description": "",
    "main": "./src/index.tsx",
    "scripts": {
--- a/src/data/urls.ts
+++ b/src/data/urls.ts
@@ -17,6 +17,14 @@ const getNavPath = (key: string, fallback: string) => {

 export const URLs = {
  baseUrl,
+  // Основные маршруты
+  workplace: makeUrl('/workplace'),
+  login: makeUrl('/login'),
+  chains: makeUrl('/chains'),
+  chain: (chainId: string) => makeUrl(`/chain/${chainId}`),
+  task: (chainId: string, taskId: string) => makeUrl(`/chain/${chainId}/task/${taskId}`),
+  completed: (chainId: string) => makeUrl(`/completed/${chainId}`),
+  // Старые маршруты
  auth: {
    url: makeUrl(navs[`link.${pkg.name}.auth`]),
    isOn: Boolean(navs[`link.${pkg.name}.auth`]),
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import { Box, Button, Flex, Heading, Text } from '@chakra-ui/react'

 import { useChallenge } from '../context/ChallengeContext'
+import { URLs } from '../__data__/urls'

 interface HeaderProps {
  chainName?: string
@@ -9,8 +11,14 @@ interface HeaderProps {
 }

 export const Header = ({ chainName, taskProgress }: HeaderProps) => {
+  const navigate = useNavigate()
  const { nickname, workplaceNumber, logout } = useChallenge()

+  const handleLogout = () => {
+    logout()
+    navigate(URLs.workplace)
+  }
+
  if (!nickname) return null

  return (
@@ -42,7 +50,7 @@ export const Header = ({ chainName, taskProgress }: HeaderProps) => {
            )}
          </Flex>
        </Box>
-        <Button onClick={logout} variant="ghost" size="sm">
+        <Button onClick={handleLogout} variant="ghost" size="sm">
          Выйти
        </Button>
      </Flex>
--- a/src/components/LoginForm.tsx
+++ b/src/components/LoginForm.tsx
@@ -1,205 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import {
-  Box,
-  Button,
-  Heading,
-  Input,
-  Text,
-  VStack,
-} from '@chakra-ui/react'
-
-import { useChallenge } from '../context/ChallengeContext'
-
-const WORKPLACE_NUMBER_KEY = 'challengeWorkplaceNumber'
-
-export const LoginForm = () => {
-  const [step, setStep] = useState<'workplace' | 'fio'>('workplace')
-  const [workplaceNumber, setWorkplaceNumber] = useState('')
-  const [fullName, setFullName] = useState('')
-  const [error, setError] = useState('')
-  const { login, isAuthLoading } = useChallenge()
-
-  // Проверяем, есть ли сохранённый номер рабочего места
-  useEffect(() => {
-    const savedWorkplace = localStorage.getItem(WORKPLACE_NUMBER_KEY)
-    if (savedWorkplace) {
-      setWorkplaceNumber(savedWorkplace)
-      setStep('fio')
-    }
-  }, [])
-
-  const handleWorkplaceSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    
-    const trimmedWorkplace = workplaceNumber.trim()
-    if (!trimmedWorkplace) {
-      setError('Пожалуйста, введите номер рабочего места')
-      return
-    }
-
-    // Сохраняем номер рабочего места сразу
-    localStorage.setItem(WORKPLACE_NUMBER_KEY, trimmedWorkplace)
-    setWorkplaceNumber(trimmedWorkplace)
-    setError('')
-    setStep('fio')
-  }
-
-  const handleFioSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    
-    const trimmedName = fullName.trim()
-    if (!trimmedName) {
-      setError('Пожалуйста, введите ваше ФИО')
-      return
-    }
-
-    if (trimmedName.length < 3) {
-      setError('ФИО должно содержать минимум 3 символа')
-      return
-    }
-
-    try {
-      setError('')
-      await login(trimmedName, workplaceNumber.trim())
-    } catch (err) {
-      setError('Произошла ошибка при входе. Попробуйте снова.')
-      console.error('Login error:', err)
-    }
-  }
-
-  if (step === 'workplace') {
-    return (
-      <Box bg="gray.50" minH="100vh" display="flex" alignItems="center" justifyContent="center" px={4}>
-        <Box
-          bg="white"
-          borderWidth="1px"
-          borderRadius="lg"
-          borderColor="gray.200"
-          p={8}
-          maxW="480px"
-          w="full"
-        >
-          {/* @ts-expect-error Chakra UI v2 uses spacing */}
-          <VStack spacing={6} align="stretch">
-            <Box textAlign="center">
-              <Heading size="lg" color="teal.600" mb={2}>
-                Challenge Platform
-              </Heading>
-              <Text color="gray.600">
-                Добро пожаловать! Введите номер рабочего места
-              </Text>
-            </Box>
-
-            <form onSubmit={handleWorkplaceSubmit}>
-              {/* @ts-expect-error Chakra UI v2 uses spacing */}
-              <VStack spacing={4} align="stretch">
-                <Box>
-                  <Text fontWeight="medium" mb={2}>
-                    Номер рабочего места
-                  </Text>
-                  <Input
-                    value={workplaceNumber}
-                    onChange={(e) => setWorkplaceNumber(e.target.value)}
-                    placeholder="Например: 1"
-                    size="lg"
-                    autoFocus
-                    // @ts-expect-error Chakra UI v2 uses isInvalid
-                    isInvalid={!!error}
-                  />
-                  {error && (
-                    <Text color="red.500" fontSize="sm" mt={2}>
-                      {error}
-                    </Text>
-                  )}
-                </Box>
-
-                <Button
-                  type="submit"
-                  colorScheme="teal"
-                  size="lg"
-                  // @ts-expect-error Chakra UI v2 uses isDisabled
-                  isDisabled={!workplaceNumber.trim()}
-                >
-                  Продолжить
-                </Button>
-              </VStack>
-            </form>
-          </VStack>
-        </Box>
-      </Box>
-    )
-  }
-
-  return (
-    <Box bg="gray.50" minH="100vh" display="flex" alignItems="center" justifyContent="center" px={4}>
-      <Box
-        bg="white"
-        borderWidth="1px"
-        borderRadius="lg"
-        borderColor="gray.200"
-        p={8}
-        maxW="480px"
-        w="full"
-      >
-        {/* @ts-expect-error Chakra UI v2 uses spacing */}
-        <VStack spacing={6} align="stretch">
-          <Box textAlign="center">
-            <Heading size="lg" color="teal.600" mb={2}>
-              Challenge Platform
-            </Heading>
-            <Text color="gray.600" fontWeight="medium">
-              Рабочее место: №{workplaceNumber}
-            </Text>
-            <Text color="gray.500" fontSize="sm" mt={1}>
-              (номер сохранён)
-            </Text>
-            <Text color="gray.600" mt={3}>
-              Введите ваше ФИО для начала работы
-            </Text>
-          </Box>
-
-          <form onSubmit={handleFioSubmit}>
-            {/* @ts-expect-error Chakra UI v2 uses spacing */}
-            <VStack spacing={4} align="stretch">
-              <Box>
-                <Text fontWeight="medium" mb={2}>
-                  Ваше ФИО
-                </Text>
-                <Input
-                  value={fullName}
-                  onChange={(e) => setFullName(e.target.value)}
-                  placeholder="Иванов Иван Иванович"
-                  size="lg"
-                  autoFocus
-                  // @ts-expect-error Chakra UI v2 uses isInvalid
-                  isInvalid={!!error}
-                />
-                {error && (
-                  <Text color="red.500" fontSize="sm" mt={2}>
-                    {error}
-                  </Text>
-                )}
-              </Box>
-
-              {/* @ts-expect-error Chakra UI v2 uses isLoading/isDisabled */}
-              <Button type="submit" colorScheme="teal" size="lg" isLoading={isAuthLoading} isDisabled={!fullName.trim()}>
-                Войти
-              </Button>
-              
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => {
-                  setStep('workplace')
-                  setError('')
-                }}
-              >
-                Изменить рабочее место
-              </Button>
-            </VStack>
-          </form>
-        </VStack>
-      </Box>
-    </Box>
-  )
-}
--- a/src/components/personal/TaskWorkspace.tsx
+++ b/src/components/personal/TaskWorkspace.tsx
@@ -21,7 +21,7 @@ interface TaskWorkspaceProps {

 export const TaskWorkspace = ({ task, onTaskComplete }: TaskWorkspaceProps) => {
  const { refreshStats } = useChallenge()
-  const { result, setResult, submit, reset, queueStatus, finalSubmission, isSubmitting } = useSubmission({
+  const { result, setResult, submit, queueStatus, finalSubmission, isSubmitting } = useSubmission({
    taskId: task.id,
  })

@@ -364,12 +364,18 @@ export const TaskWorkspace = ({ task, onTaskComplete }: TaskWorkspaceProps) => {
        />
      </Box>

-      <HStack justify="flex-end" gap={2}>
+      <HStack justify="space-between" gap={2}>
        {!isAccepted && (
          <>
-            {/* @ts-expect-error Chakra UI v2 uses isDisabled */}
-            <Button onClick={reset} variant="ghost" size="sm" isDisabled={isChecking}>
-              Сбросить
+            <Button
+              onClick={onTaskComplete}
+              variant="outline"
+              size="sm"
+              colorScheme="gray"
+              // @ts-expect-error Chakra UI v2 uses isDisabled
+              isDisabled={isChecking}
+            >
+              Пропустить
            </Button>
            {/* @ts-expect-error Chakra UI v2 uses isLoading/isDisabled */}
            <Button onClick={submit} colorScheme="teal" size="sm" isLoading={isChecking} isDisabled={!result.trim() || isChecking}>
--- a/src/context/ChallengeContext.tsx
+++ b/src/context/ChallengeContext.tsx
@@ -19,8 +19,7 @@ import { BehaviorTracker, MetricsCollector, buildPersonalDashboard } from '../ut
 import { ChallengeEventEmitter } from '../utils/events'
 import { clearDraft, loadDraft, saveDraft } from '../utils/drafts'
 import { PollingManager } from '../utils/polling'
-
-const isBrowser = () => typeof window !== 'undefined'
+import { storage } from '../utils/storage'

 class ChallengeCache {
  private cache = new Map<string, { data: unknown; expires: number }>()
@@ -77,10 +76,6 @@ interface ChallengeContextValue {

 const ChallengeContext = createContext<ChallengeContextValue | undefined>(undefined)

-const USER_ID_KEY = 'challengeUserId'
-const USER_NICKNAME_KEY = 'challengeNickname'
-const WORKPLACE_NUMBER_KEY = 'challengeWorkplaceNumber'
-
 export const ChallengeProvider = ({ children }: PropsWithChildren) => {
  const cacheRef = useRef(new ChallengeCache())
  const metricsCollector = useMemo(() => new MetricsCollector(), [])
@@ -88,15 +83,9 @@ export const ChallengeProvider = ({ children }: PropsWithChildren) => {
  const eventEmitter = useMemo(() => new ChallengeEventEmitter(), [])
  const pollingManager = useMemo(() => new PollingManager({ initialDelay: 800, maxDelay: 5000, multiplier: 1.15 }), [])

-  const [userId, setUserId] = useState<string | null>(() =>
-    isBrowser() ? window.localStorage.getItem(USER_ID_KEY) : null,
-  )
-  const [nickname, setNickname] = useState<string | null>(() =>
-    isBrowser() ? window.localStorage.getItem(USER_NICKNAME_KEY) : null,
-  )
-  const [workplaceNumber, setWorkplaceNumber] = useState<string | null>(() =>
-    isBrowser() ? window.localStorage.getItem(WORKPLACE_NUMBER_KEY) : null,
-  )
+  const [userId, setUserId] = useState<string | null>(() => storage.getUserId())
+  const [nickname, setNickname] = useState<string | null>(() => storage.getNickname())
+  const [workplaceNumber, setWorkplaceNumber] = useState<string | null>(() => storage.getWorkplaceNumber())
  const [stats, setStats] = useState<UserStats | null>(null)
  const [personalDashboard, setPersonalDashboard] = useState<PersonalDashboard | null>(null)
  const [chains, setChains] = useState<ChallengeChain[]>(() => {
@@ -162,11 +151,9 @@ export const ChallengeProvider = ({ children }: PropsWithChildren) => {
      setNickname(nicknameValue)
      setWorkplaceNumber(workplaceNumberValue)

-      if (isBrowser()) {
-        window.localStorage.setItem(USER_ID_KEY, response.userId)
-        window.localStorage.setItem(USER_NICKNAME_KEY, nicknameValue)
-        window.localStorage.setItem(WORKPLACE_NUMBER_KEY, workplaceNumberValue)
-      }
+      storage.setUserId(response.userId)
+      storage.setNickname(nicknameValue)
+      storage.setWorkplaceNumber(workplaceNumberValue)

      cacheRef.current.clear('chains')
      await refreshStatsById(response.userId)
@@ -182,13 +169,8 @@ export const ChallengeProvider = ({ children }: PropsWithChildren) => {
    setPersonalDashboard(null)
    cacheRef.current.clear()

-    if (isBrowser()) {
-      window.localStorage.removeItem(USER_ID_KEY)
-      window.localStorage.removeItem(USER_NICKNAME_KEY)
-      window.localStorage.removeItem(WORKPLACE_NUMBER_KEY)
-      window.localStorage.removeItem('challengeSelectedChainId')
-      window.localStorage.removeItem('challengeSelectedTaskId')
-    }
+    // Очищаем всё из localStorage
+    storage.clearAll()
  }, [])

  const isStatsLoading = statsResult.isLoading || statsResult.isFetching || isChainsLoading
--- a/src/dashboard.tsx
+++ b/src/dashboard.tsx
@@ -1,24 +1,107 @@
 import React, { Suspense } from 'react'
-import { Route, Routes } from 'react-router-dom'
+import { Navigate, Route, Routes } from 'react-router-dom'

 import { URLs } from './__data__/urls'
-import { MainPage } from './pages'
+import { 
+  WorkplacePage, 
+  LoginPage, 
+  ChainsPage, 
+  TaskPage, 
+  CompletedPage 
+} from './pages'
+import { storage } from './utils/storage'

 const PageWrapper = ({ children }: React.PropsWithChildren) => (
  <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
 )

+// Компонент для редиректа на нужную страницу
+const IndexRedirect = () => {
+  const workplaceNumber = storage.getWorkplaceNumber()
+  const nickname = storage.getNickname()
+  const chainId = storage.getSelectedChainId()
+  const taskId = storage.getSelectedTaskId()
+
+  // Если есть сохранённое задание - туда
+  if (nickname && chainId && taskId) {
+    return <Navigate to={URLs.task(chainId, taskId)} replace />
+  }
+  // Если авторизован - к цепочкам
+  if (nickname) {
+    return <Navigate to={URLs.chains} replace />
+  }
+  // Если есть номер места - к логину
+  if (workplaceNumber) {
+    return <Navigate to={URLs.login} replace />
+  }
+  // Иначе - к вводу места
+  return <Navigate to={URLs.workplace} replace />
+}
+
 export const Dashboard = () => {
  return (
    <Routes>
+      {/* Главная - редирект */}
      <Route
        path={URLs.baseUrl}
+        element={<IndexRedirect />}
+      />
+      
+      {/* Ввод номера рабочего места */}
+      <Route
+        path={URLs.workplace}
        element={
          <PageWrapper>
-            <MainPage />
+            <WorkplacePage />
          </PageWrapper>
        }
      />
+      
+      {/* Ввод ФИО */}
+      <Route
+        path={URLs.login}
+        element={
+          <PageWrapper>
+            <LoginPage />
+          </PageWrapper>
+        }
+      />
+      
+      {/* Выбор цепочки */}
+      <Route
+        path={URLs.chains}
+        element={
+          <PageWrapper>
+            <ChainsPage />
+          </PageWrapper>
+        }
+      />
+      
+      {/* Задание */}
+      <Route
+        path={`${URLs.baseUrl}/chain/:chainId/task/:taskId`}
+        element={
+          <PageWrapper>
+            <TaskPage />
+          </PageWrapper>
+        }
+      />
+      
+      {/* Завершение цепочки */}
+      <Route
+        path={`${URLs.baseUrl}/completed/:chainId`}
+        element={
+          <PageWrapper>
+            <CompletedPage />
+          </PageWrapper>
+        }
+      />
+      
+      {/* Fallback */}
+      <Route
+        path="*"
+        element={<IndexRedirect />}
+      />
    </Routes>
  )
 }
--- a/src/hooks/useSubmission.ts
+++ b/src/hooks/useSubmission.ts
@@ -6,6 +6,7 @@ import {
 } from '../__data__/api/api'
 import type { ChallengeSubmission, QueueStatus } from '../__data__/types'
 import { useChallenge } from '../context/ChallengeContext'
+import { loadFinalAnswer, saveFinalAnswer } from '../utils/drafts'

 interface UseSubmissionArgs {
  taskId: string
@@ -43,13 +44,24 @@ export const useSubmission = ({ taskId }: UseSubmissionArgs): SubmissionResult =

  useEffect(() => {
    behaviorTracker.reset()
-    const draft = loadDraft(taskId)
-    if (draft) {
-      setResultState(draft)
+    
+    // Сначала проверяем финальный ответ (если задание уже решалось)
+    const finalAnswer = loadFinalAnswer(taskId)
+    if (finalAnswer) {
+      setResultState(finalAnswer)
      behaviorTracker.markDraftUsed()
    } else {
-      setResultState('')
+      // Если финального ответа нет, проверяем черновик
+      const draft = loadDraft(taskId)
+      if (draft) {
+        setResultState(draft)
+        behaviorTracker.markDraftUsed()
+      } else {
+        // Если ничего нет - пустое поле
+        setResultState('')
+      }
    }
+    
    pollingManager.stop()
    setQueueId(null)
    setQueueStatus(null)
@@ -114,6 +126,9 @@ export const useSubmission = ({ taskId }: UseSubmissionArgs): SubmissionResult =
        })

        setFinalSubmission(status.submission)
+        // Сохраняем финальный ответ для восстановления при возврате
+        saveFinalAnswer(taskId, result)
+        // Очищаем черновик, так как теперь есть финальный ответ
        clearDraft(taskId)
        pollingManager.stop()
        return false
--- a/src/pages/chains/ChainsPage.tsx
+++ b/src/pages/chains/ChainsPage.tsx
@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { URLs } from '../../__data__/urls'
+import { useChallenge } from '../../context/ChallengeContext'
+import { Header } from '../../components/Header'
+import { ChainSelector } from '../../components/ChainSelector'
+import { storage } from '../../utils/storage'
+import type { ChallengeChain } from '../../__data__/types'
+
+export const ChainsPage = () => {
+  const navigate = useNavigate()
+  const { nickname } = useChallenge()
+
+  // Проверяем авторизацию
+  useEffect(() => {
+    const workplaceNumber = storage.getWorkplaceNumber()
+    if (!workplaceNumber) {
+      navigate(URLs.workplace, { replace: true })
+      return
+    }
+    if (!nickname) {
+      navigate(URLs.login, { replace: true })
+    }
+  }, [navigate, nickname])
+
+  const handleSelectChain = (chain: ChallengeChain) => {
+    storage.setSelectedChainId(chain.id)
+    
+    if (chain.tasks.length > 0) {
+      // Получаем самый дальний достигнутый индекс
+      const furthestIndex = storage.getFurthestTaskIndex(chain.id)
+      
+      // Если нет прогресса, инициализируем с первого задания
+      const targetIndex = furthestIndex >= 0 ? furthestIndex : 0
+      const targetTask = chain.tasks[targetIndex] || chain.tasks[0]
+      
+      storage.setSelectedTaskId(targetTask.id)
+      // Убеждаемся, что прогресс установлен
+      storage.setFurthestTaskIndex(chain.id, targetIndex)
+      
+      navigate(URLs.task(chain.id, targetTask.id))
+    }
+  }
+
+  if (!nickname) {
+    return null
+  }
+
+  return (
+    <>
+      <Header />
+      <ChainSelector onSelectChain={handleSelectChain} />
+    </>
+  )
+}
+
--- a/src/pages/chains/index.ts
+++ b/src/pages/chains/index.ts
@@ -0,0 +1,4 @@
+import { ChainsPage } from './ChainsPage'
+
+export default ChainsPage
+
--- a/src/pages/completed/CompletedPage.tsx
+++ b/src/pages/completed/CompletedPage.tsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useMemo } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import {
+  Box,
+  Button,
+  Heading,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+
+import { URLs } from '../../__data__/urls'
+import { useChallenge } from '../../context/ChallengeContext'
+import { Header } from '../../components/Header'
+import { storage } from '../../utils/storage'
+
+export const CompletedPage = () => {
+  const navigate = useNavigate()
+  const { chainId } = useParams<{ chainId: string }>()
+  const { nickname, chains } = useChallenge()
+
+  // Проверяем авторизацию
+  useEffect(() => {
+    const workplaceNumber = storage.getWorkplaceNumber()
+    if (!workplaceNumber) {
+      navigate(URLs.workplace, { replace: true })
+      return
+    }
+    if (!nickname) {
+      navigate(URLs.login, { replace: true })
+    }
+  }, [navigate, nickname])
+
+  const chain = useMemo(() => {
+    return chains.find(c => c.id === chainId) || null
+  }, [chains, chainId])
+
+  const handleContinue = () => {
+    navigate(URLs.chains)
+  }
+
+  if (!nickname) {
+    return null
+  }
+
+  return (
+    <>
+      <Header />
+      <Box bg="gray.50" minH="100vh" display="flex" alignItems="center" justifyContent="center" px={4}>
+        <Box
+          bg="white"
+          borderWidth="2px"
+          borderRadius="xl"
+          borderColor="green.300"
+          p={10}
+          maxW="600px"
+          w="full"
+          textAlign="center"
+          shadow="lg"
+        >
+          <VStack gap={6}>
+            <Text fontSize="6xl">🎉</Text>
+            <Heading size="xl" color="green.600">
+              Поздравляем!
+            </Heading>
+            <Text fontSize="lg" color="gray.700">
+              Вы успешно выполнили все задания
+            </Text>
+            {chain && (
+              <Box 
+                bg="green.50" 
+                borderRadius="lg" 
+                px={6} 
+                py={3}
+                borderWidth="1px"
+                borderColor="green.200"
+              >
+                <Text fontSize="xl" fontWeight="bold" color="green.700">
+                  {chain.name}
+                </Text>
+              </Box>
+            )}
+            <Text fontSize="md" color="gray.600">
+              Отличная работа! Вы можете продолжить обучение, выбрав другую цепочку заданий.
+            </Text>
+            <Button
+              colorScheme="green"
+              size="lg"
+              onClick={handleContinue}
+              mt={4}
+            >
+              Продолжить
+            </Button>
+          </VStack>
+        </Box>
+      </Box>
+    </>
+  )
+}
+
--- a/src/pages/completed/index.ts
+++ b/src/pages/completed/index.ts
@@ -0,0 +1,4 @@
+import { CompletedPage } from './CompletedPage'
+
+export default CompletedPage
+
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -1,3 +1,8 @@
 import { lazy } from 'react'

 export const MainPage = lazy(() => import(/* webpackChunkName: 'main' */'./main'))
+export const WorkplacePage = lazy(() => import(/* webpackChunkName: 'workplace' */'./workplace'))
+export const LoginPage = lazy(() => import(/* webpackChunkName: 'login' */'./login'))
+export const ChainsPage = lazy(() => import(/* webpackChunkName: 'chains' */'./chains'))
+export const TaskPage = lazy(() => import(/* webpackChunkName: 'task' */'./task'))
+export const CompletedPage = lazy(() => import(/* webpackChunkName: 'completed' */'./completed'))
--- a/src/pages/login/LoginPage.tsx
+++ b/src/pages/login/LoginPage.tsx
@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  Box,
+  Button,
+  Heading,
+  Input,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+
+import { URLs } from '../../__data__/urls'
+import { useChallenge } from '../../context/ChallengeContext'
+import { storage } from '../../utils/storage'
+
+export const LoginPage = () => {
+  const navigate = useNavigate()
+  const { login, isAuthLoading, nickname } = useChallenge()
+  const [fullName, setFullName] = useState('')
+  const [error, setError] = useState('')
+  const workplaceNumber = storage.getWorkplaceNumber()
+
+  // Если нет номера рабочего места, возвращаемся
+  useEffect(() => {
+    if (!workplaceNumber) {
+      navigate(URLs.workplace, { replace: true })
+      return
+    }
+    // Если уже авторизован, переходим к цепочкам
+    if (nickname) {
+      navigate(URLs.chains, { replace: true })
+    }
+  }, [navigate, workplaceNumber, nickname])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    const trimmedName = fullName.trim()
+    if (!trimmedName) {
+      setError('Пожалуйста, введите ваше ФИО')
+      return
+    }
+
+    if (trimmedName.length < 3) {
+      setError('ФИО должно содержать минимум 3 символа')
+      return
+    }
+
+    try {
+      setError('')
+      await login(trimmedName, workplaceNumber || '')
+      navigate(URLs.chains)
+    } catch (err) {
+      setError('Произошла ошибка при входе. Попробуйте снова.')
+      console.error('Login error:', err)
+    }
+  }
+
+  const handleChangeWorkplace = () => {
+    storage.removeWorkplaceNumber()
+    navigate(URLs.workplace)
+  }
+
+  if (!workplaceNumber) {
+    return null
+  }
+
+  return (
+    <Box bg="gray.50" minH="100vh" display="flex" alignItems="center" justifyContent="center" px={4}>
+      <Box
+        bg="white"
+        borderWidth="1px"
+        borderRadius="lg"
+        borderColor="gray.200"
+        p={8}
+        maxW="480px"
+        w="full"
+      >
+        {/* @ts-expect-error Chakra UI v2 uses spacing */}
+        <VStack spacing={6} align="stretch">
+          <Box textAlign="center">
+            <Heading size="lg" color="teal.600" mb={2}>
+              Challenge Platform
+            </Heading>
+            <Text color="gray.600" fontWeight="medium">
+              Рабочее место: №{workplaceNumber}
+            </Text>
+            <Text color="gray.600" mt={3}>
+              Введите ваше ФИО для начала работы
+            </Text>
+          </Box>
+
+          <form onSubmit={handleSubmit}>
+            {/* @ts-expect-error Chakra UI v2 uses spacing */}
+            <VStack spacing={4} align="stretch">
+              <Box>
+                <Text fontWeight="medium" mb={2}>
+                  Ваше ФИО
+                </Text>
+                <Input
+                  value={fullName}
+                  onChange={(e) => setFullName(e.target.value)}
+                  placeholder="Иванов Иван Иванович"
+                  size="lg"
+                  autoFocus
+                  // @ts-expect-error Chakra UI v2 uses isInvalid
+                  isInvalid={!!error}
+                />
+                {error && (
+                  <Text color="red.500" fontSize="sm" mt={2}>
+                    {error}
+                  </Text>
+                )}
+              </Box>
+
+              {/* @ts-expect-error Chakra UI v2 uses isLoading/isDisabled */}
+              <Button type="submit" colorScheme="teal" size="lg" isLoading={isAuthLoading} isDisabled={!fullName.trim()}>
+                Войти
+              </Button>
+            </VStack>
+          </form>
+          
+          <Box textAlign="center" mt={120}>
+            <Text
+              as="button"
+              type="button"
+              color="gray.500"
+              fontSize="sm"
+              cursor="pointer"
+              _hover={{ color: 'teal.600', textDecoration: 'underline' }}
+              onClick={handleChangeWorkplace}
+            >
+              Изменить рабочее место
+            </Text>
+          </Box>
+        </VStack>
+      </Box>
+    </Box>
+  )
+}
+
--- a/src/pages/login/index.ts
+++ b/src/pages/login/index.ts
@@ -0,0 +1,4 @@
+import { LoginPage } from './LoginPage'
+
+export default LoginPage
+
--- a/src/pages/main/main.tsx
+++ b/src/pages/main/main.tsx
@@ -1,190 +1,36 @@
-import React, { useEffect, useRef, useState } from 'react'
-import {
-  Box,
-  Button,
-  Heading,
-  Text,
-  VStack,
-} from '@chakra-ui/react'
-import { Alert } from '@chakra-ui/react/alert'
+import React from 'react'
+import { Navigate } from 'react-router-dom'

-import type { ChallengeChain, ChallengeTask } from '../../__data__/types'
-import { useChallenge } from '../../context/ChallengeContext'
-import { TaskWorkspace } from '../../components/personal'
-import { Header } from '../../components/Header'
-import { LoginForm } from '../../components/LoginForm'
-import { ChainSelector } from '../../components/ChainSelector'
-
-const SELECTED_CHAIN_KEY = 'challengeSelectedChainId'
-const SELECTED_TASK_KEY = 'challengeSelectedTaskId'
+import { URLs } from '../../__data__/urls'
+import { storage } from '../../utils/storage'

+/**
+ * MainPage теперь просто редиректит на нужную страницу
+ * Вся логика навигации находится в отдельных страницах:
+ * - /workplace - ввод номера рабочего места
+ * - /login - ввод ФИО  
+ * - /chains - выбор цепочки
+ * - /chain/:chainId/task/:taskId - задание
+ * - /completed/:chainId - завершение цепочки
+ */
 export const MainPage = () => {
-  const { nickname, chains } = useChallenge()
-  const [selectedChain, setSelectedChain] = useState<ChallengeChain | null>(null)
-  const [selectedTask, setSelectedTask] = useState<ChallengeTask | null>(null)
-  const [completedChainName, setCompletedChainName] = useState<string | null>(null)
-  const [isOffline, setIsOffline] = useState(() =>
-    typeof navigator !== 'undefined' ? !navigator.onLine : false,
-  )
-  const hasRestoredState = useRef(false)
+  const workplaceNumber = storage.getWorkplaceNumber()
+  const nickname = storage.getNickname()
+  const chainId = storage.getSelectedChainId()
+  const taskId = storage.getSelectedTaskId()

-  // Восстановление состояния при загрузке
-  useEffect(() => {
-    if (hasRestoredState.current || !chains.length || !nickname) return
-    
-    const savedChainId = localStorage.getItem(SELECTED_CHAIN_KEY)
-    const savedTaskId = localStorage.getItem(SELECTED_TASK_KEY)
-    
-    if (savedChainId) {
-      const chain = chains.find(c => c.id === savedChainId)
-      if (chain) {
-        setSelectedChain(chain)
-        
-        if (savedTaskId) {
-          const task = chain.tasks.find(t => t.id === savedTaskId)
-          setSelectedTask(task || chain.tasks[0])
-        } else {
-          setSelectedTask(chain.tasks[0])
-        }
-      }
-    }
-    
-    hasRestoredState.current = true
-  }, [chains, nickname])
-
-  const handleSelectChain = (chain: ChallengeChain) => {
-    setSelectedChain(chain)
-    setSelectedTask(chain.tasks[0])
-    localStorage.setItem(SELECTED_CHAIN_KEY, chain.id)
-    localStorage.setItem(SELECTED_TASK_KEY, chain.tasks[0].id)
+  // Если есть сохранённое задание - туда
+  if (nickname && chainId && taskId) {
+    return <Navigate to={URLs.task(chainId, taskId)} replace />
  }
-
-  const handleTaskComplete = () => {
-    if (!selectedChain) return
-    const currentIndex = selectedChain.tasks.findIndex((item) => item.id === selectedTask?.id)
-    const nextTask = currentIndex >= 0 ? selectedChain.tasks[currentIndex + 1] : null
-
-    if (nextTask) {
-      setSelectedTask(nextTask)
-      localStorage.setItem(SELECTED_TASK_KEY, nextTask.id)
-    } else {
-      // Цепочка завершена - показываем экран поздравления
-      setCompletedChainName(selectedChain.name)
-      setSelectedChain(null)
-      setSelectedTask(null)
-      localStorage.removeItem(SELECTED_CHAIN_KEY)
-      localStorage.removeItem(SELECTED_TASK_KEY)
-    }
+  // Если авторизован - к цепочкам
+  if (nickname) {
+    return <Navigate to={URLs.chains} replace />
  }
-
-  const handleContinueAfterCompletion = () => {
-    setCompletedChainName(null)
+  // Если есть номер места - к логину
+  if (workplaceNumber) {
+    return <Navigate to={URLs.login} replace />
  }
-
-
-  useEffect(() => {
-    const handleOnline = () => setIsOffline(false)
-    const handleOffline = () => setIsOffline(true)
-
-    window.addEventListener('online', handleOnline)
-    window.addEventListener('offline', handleOffline)
-
-    return () => {
-      window.removeEventListener('online', handleOnline)
-      window.removeEventListener('offline', handleOffline)
-    }
-  }, [])
-
-  // Если пользователь не авторизован, показываем форму входа
-  if (!nickname) {
-    return <LoginForm />
-  }
-
-  // Если цепочка завершена, показываем экран поздравления
-  if (completedChainName) {
-    return (
-      <>
-        <Header />
-        <Box bg="gray.50" minH="100vh" display="flex" alignItems="center" justifyContent="center" px={4}>
-          <Box
-            bg="white"
-            borderWidth="2px"
-            borderRadius="xl"
-            borderColor="green.300"
-            p={10}
-            maxW="600px"
-            w="full"
-            textAlign="center"
-            shadow="lg"
-          >
-            <VStack gap={6}>
-              <Text fontSize="6xl">🎉</Text>
-              <Heading size="xl" color="green.600">
-                Поздравляем!
-              </Heading>
-              <Text fontSize="lg" color="gray.700">
-                Вы успешно выполнили все задания
-              </Text>
-              <Box 
-                bg="green.50" 
-                borderRadius="lg" 
-                px={6} 
-                py={3}
-                borderWidth="1px"
-                borderColor="green.200"
-              >
-                <Text fontSize="xl" fontWeight="bold" color="green.700">
-                  {completedChainName}
-                </Text>
-              </Box>
-              <Text fontSize="md" color="gray.600">
-                Отличная работа! Вы можете продолжить обучение, выбрав другую цепочку заданий.
-              </Text>
-              <Button
-                colorScheme="green"
-                size="lg"
-                onClick={handleContinueAfterCompletion}
-                mt={4}
-              >
-                Продолжить
-              </Button>
-            </VStack>
-          </Box>
-        </Box>
-      </>
-    )
-  }
-
-  // Если цепочка не выбрана, показываем селектор цепочек
-  if (!selectedChain) {
-    return (
-      <>
-        <Header />
-        <ChainSelector onSelectChain={handleSelectChain} />
-      </>
-    )
-  }
-
-  const taskProgress = `Задание ${selectedChain.tasks.findIndex(t => t.id === selectedTask?.id) + 1}` // из ${selectedChain.tasks.length}`
-
-  // Показываем выбранную цепочку и задания
-  return (
-    <>
-      <Header chainName={selectedChain.name} taskProgress={taskProgress} />
-      <Box bg="gray.50" minH="100vh" py={4} px={{ base: 4, md: 8 }}>
-        <Box maxW="1200px" mx="auto">
-          {isOffline && (
-            <Alert.Root status="warning" borderRadius="md" mb={4}>
-              <Alert.Indicator />
-              Вы находитесь офлайн. Черновики сохраняются локально и будут отправлены после восстановления связи.
-            </Alert.Root>
-          )}
-
-          {selectedTask && (
-            <TaskWorkspace task={selectedTask} onTaskComplete={handleTaskComplete} />
-          )}
-        </Box>
-      </Box>
-    </>
-  )
+  // Иначе - к вводу места
+  return <Navigate to={URLs.workplace} replace />
 }
--- a/src/pages/task/TaskPage.tsx
+++ b/src/pages/task/TaskPage.tsx
@@ -0,0 +1,203 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Text,
+} from '@chakra-ui/react'
+
+import { URLs } from '../../__data__/urls'
+import { useChallenge } from '../../context/ChallengeContext'
+import { TaskWorkspace } from '../../components/personal'
+import { Header } from '../../components/Header'
+import { storage } from '../../utils/storage'
+
+export const TaskPage = () => {
+  const navigate = useNavigate()
+  const { chainId, taskId } = useParams<{ chainId: string; taskId: string }>()
+  const { nickname, chains } = useChallenge()
+
+  // Проверяем авторизацию
+  useEffect(() => {
+    const workplaceNumber = storage.getWorkplaceNumber()
+    if (!workplaceNumber) {
+      navigate(URLs.workplace, { replace: true })
+      return
+    }
+    if (!nickname) {
+      navigate(URLs.login, { replace: true })
+    }
+  }, [navigate, nickname])
+
+  // Находим цепочку и задание
+  const chain = useMemo(() => {
+    return chains.find(c => c.id === chainId) || null
+  }, [chains, chainId])
+
+  const task = useMemo(() => {
+    return chain?.tasks.find(t => t.id === taskId) || null
+  }, [chain, taskId])
+
+  const currentTaskIndex = useMemo(() => {
+    if (!chain || !taskId) return -1
+    return chain.tasks.findIndex(t => t.id === taskId)
+  }, [chain, taskId])
+
+  // Получаем самый дальний достигнутый индекс задания (используем state для реактивности)
+  const [furthestTaskIndex, setFurthestTaskIndex] = useState(() => {
+    if (!chainId) return 0
+    return storage.getFurthestTaskIndex(chainId)
+  })
+
+  // Обновляем furthestTaskIndex при изменении chainId или currentTaskIndex
+  useEffect(() => {
+    if (!chainId) return
+    const currentFurthest = storage.getFurthestTaskIndex(chainId)
+    setFurthestTaskIndex(currentFurthest)
+  }, [chainId, currentTaskIndex])
+
+  // Сохраняем текущее состояние в storage и обновляем прогресс
+  useEffect(() => {
+    if (chainId && taskId && currentTaskIndex >= 0) {
+      storage.setSelectedChainId(chainId)
+      storage.setSelectedTaskId(taskId)
+      // Обновляем прогресс, если текущее задание дальше предыдущего
+      const newFurthest = Math.max(furthestTaskIndex, currentTaskIndex)
+      if (newFurthest > furthestTaskIndex) {
+        storage.setFurthestTaskIndex(chainId, newFurthest)
+        setFurthestTaskIndex(newFurthest)
+      }
+    }
+  }, [chainId, taskId, currentTaskIndex, furthestTaskIndex])
+
+  // Проверка доступности задания
+  const isTaskAccessible = (taskIndex: number): boolean => {
+    return taskIndex <= furthestTaskIndex
+  }
+
+  const handleTaskComplete = () => {
+    if (!chain || currentTaskIndex === -1) return
+    
+    const nextTaskIndex = currentTaskIndex + 1
+    const nextTask = chain.tasks[nextTaskIndex]
+    
+    if (nextTask) {
+      // Обновляем прогресс перед переходом
+      storage.setFurthestTaskIndex(chain.id, nextTaskIndex)
+      setFurthestTaskIndex(nextTaskIndex) // Обновляем state сразу
+      navigate(URLs.task(chain.id, nextTask.id))
+    } else {
+      // Цепочка завершена
+      storage.clearSessionData()
+      navigate(URLs.completed(chain.id))
+    }
+  }
+
+  const handleNavigateToTask = (newTaskId: string) => {
+    if (!chain) return
+    
+    const newTaskIndex = chain.tasks.findIndex(t => t.id === newTaskId)
+    if (newTaskIndex === -1) return
+    
+    // Проверяем доступность
+    if (!isTaskAccessible(newTaskIndex)) {
+      return // Не переходим к заблокированному заданию
+    }
+    
+    // Обновляем прогресс при переходе
+    const newFurthest = Math.max(furthestTaskIndex, newTaskIndex)
+    if (newFurthest > furthestTaskIndex) {
+      storage.setFurthestTaskIndex(chain.id, newFurthest)
+      setFurthestTaskIndex(newFurthest)
+    }
+    navigate(URLs.task(chain.id, newTaskId))
+  }
+
+  // Проверяем доступность текущего задания при загрузке
+  useEffect(() => {
+    if (chain && currentTaskIndex >= 0 && !isTaskAccessible(currentTaskIndex)) {
+      // Если пытаемся открыть недоступное задание, перенаправляем на последнее доступное
+      const lastAccessibleIndex = furthestTaskIndex
+      if (lastAccessibleIndex >= 0 && chain.tasks[lastAccessibleIndex]) {
+        navigate(URLs.task(chain.id, chain.tasks[lastAccessibleIndex].id), { replace: true })
+      } else if (chain.tasks[0]) {
+        // Если нет прогресса, идём к первому заданию
+        navigate(URLs.task(chain.id, chain.tasks[0].id), { replace: true })
+      }
+    }
+  }, [chain, currentTaskIndex, furthestTaskIndex, navigate])
+
+  const handleBackToChains = () => {
+    storage.clearSessionData()
+    navigate(URLs.chains)
+  }
+
+  if (!nickname || !chain || !task) {
+    return null
+  }
+
+  const taskProgress = `Задание ${currentTaskIndex + 1}`
+
+  return (
+    <>
+      <Header chainName={chain.name} taskProgress={taskProgress} />
+      <Box bg="gray.50" minH="100vh" py={4} px={{ base: 4, md: 8 }}>
+        <Box maxW="1200px" mx="auto">
+          {/* Навигация по заданиям */}
+          <Box 
+            bg="white" 
+            borderWidth="1px" 
+            borderColor="gray.200" 
+            borderRadius="md" 
+            p={3} 
+            mb={4}
+            shadow="sm"
+          >
+            <Flex justify="space-between" align="center" flexWrap="wrap" gap={3}>
+              <HStack gap={2} flexWrap="wrap">
+                <Text fontSize="sm" fontWeight="medium" color="gray.600" mr={2}>
+                  Задания:
+                </Text>
+                {chain.tasks.map((t, index) => {
+                  const isAccessible = isTaskAccessible(index)
+                  const isCurrent = t.id === taskId
+                  
+                  return (
+                    <Button
+                      key={t.id}
+                      size="sm"
+                      variant={isCurrent ? 'solid' : isAccessible ? 'outline' : 'ghost'}
+                      colorScheme={isCurrent ? 'teal' : 'gray'}
+                      // @ts-expect-error Chakra UI v2 uses isDisabled
+                      isDisabled={!isAccessible}
+                      onClick={() => isAccessible && handleNavigateToTask(t.id)}
+                      minW="40px"
+                      opacity={isAccessible ? 1 : 0.5}
+                      cursor={isAccessible ? 'pointer' : 'not-allowed'}
+                    >
+                      {isAccessible ? index + 1 : `🔒${index + 1}`}
+                    </Button>
+                  )
+                })}
+              </HStack>
+              
+              <Button
+                size="sm"
+                variant="ghost"
+                colorScheme="gray"
+                onClick={handleBackToChains}
+              >
+                ← К выбору цепочки
+              </Button>
+            </Flex>
+          </Box>
+
+          <TaskWorkspace task={task} onTaskComplete={handleTaskComplete} />
+        </Box>
+      </Box>
+    </>
+  )
+}
+
--- a/src/pages/task/index.ts
+++ b/src/pages/task/index.ts
@@ -0,0 +1,4 @@
+import { TaskPage } from './TaskPage'
+
+export default TaskPage
+
--- a/src/pages/workplace/WorkplacePage.tsx
+++ b/src/pages/workplace/WorkplacePage.tsx
@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  Box,
+  Button,
+  Heading,
+  Input,
+  Link,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+
+import { URLs } from '../../__data__/urls'
+import { storage } from '../../utils/storage'
+
+// Список полезных ссылок
+const USEFUL_LINKS = [
+  { url: 'https://ya.ru', label: 'Яндекс' },
+  { url: 'https://giga.chat', label: 'GigaChat' },
+]
+
+export const WorkplacePage = () => {
+  const navigate = useNavigate()
+  const [workplaceNumber, setWorkplaceNumber] = useState('')
+  const [error, setError] = useState('')
+
+  // Если номер уже есть, переходим дальше
+  useEffect(() => {
+    const saved = storage.getWorkplaceNumber()
+    if (saved) {
+      // Проверяем, авторизован ли пользователь
+      const nickname = storage.getNickname()
+      if (nickname) {
+        navigate(URLs.chains, { replace: true })
+      } else {
+        navigate(URLs.login, { replace: true })
+      }
+    }
+  }, [navigate])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    const trimmed = workplaceNumber.trim()
+    if (!trimmed) {
+      setError('Пожалуйста, введите номер рабочего места')
+      return
+    }
+
+    storage.setWorkplaceNumber(trimmed)
+    navigate(URLs.login)
+  }
+
+  return (
+    <Box bg="gray.50" minH="100vh" display="flex" alignItems="center" justifyContent="center" px={4}>
+      <Box
+        bg="white"
+        borderWidth="1px"
+        borderRadius="lg"
+        borderColor="gray.200"
+        p={8}
+        maxW="480px"
+        w="full"
+      >
+        {/* @ts-expect-error Chakra UI v2 uses spacing */}
+        <VStack spacing={6} align="stretch">
+          <Box textAlign="center">
+            <Heading size="lg" color="teal.600" mb={2}>
+              Challenge Platform
+            </Heading>
+            <Text color="gray.600">
+              Добро пожаловать! Введите номер рабочего места
+            </Text>
+          </Box>
+
+          <form onSubmit={handleSubmit}>
+            {/* @ts-expect-error Chakra UI v2 uses spacing */}
+            <VStack spacing={4} align="stretch">
+              <Box>
+                <Text fontWeight="medium" mb={2}>
+                  Номер рабочего места
+                </Text>
+                <Input
+                  value={workplaceNumber}
+                  onChange={(e) => setWorkplaceNumber(e.target.value)}
+                  placeholder="Например: 1"
+                  size="lg"
+                  autoFocus
+                  // @ts-expect-error Chakra UI v2 uses isInvalid
+                  isInvalid={!!error}
+                />
+                {error && (
+                  <Text color="red.500" fontSize="sm" mt={2}>
+                    {error}
+                  </Text>
+                )}
+              </Box>
+
+              {/* Полезные ссылки */}
+              <Box 
+                borderWidth="1px" 
+                borderRadius="md" 
+                borderColor="gray.200" 
+                p={4}
+                bg="gray.50"
+              >
+                <Text fontWeight="medium" mb={3} fontSize="sm">
+                  Полезные ссылки:
+                </Text>
+                
+                {/* @ts-expect-error Chakra UI v2 uses spacing */}
+                <VStack spacing={2} align="stretch">
+                  {USEFUL_LINKS.map(link => (
+                    <Link 
+                      key={link.url}
+                      href={link.url} 
+                      target="_blank"
+                      color="teal.600"
+                      fontSize="sm"
+                      fontWeight="medium"
+                      _hover={{ color: 'teal.800', textDecoration: 'underline' }}
+                    >
+                      🔗 {link.label}
+                    </Link>
+                  ))}
+                </VStack>
+              </Box>
+
+              <Button
+                type="submit"
+                colorScheme="teal"
+                size="lg"
+                // @ts-expect-error Chakra UI v2 uses isDisabled
+                isDisabled={!workplaceNumber.trim()}
+              >
+                Продолжить
+              </Button>
+            </VStack>
+          </form>
+        </VStack>
+      </Box>
+    </Box>
+  )
+}
+
--- a/src/pages/workplace/index.ts
+++ b/src/pages/workplace/index.ts
@@ -0,0 +1,4 @@
+import { WorkplacePage } from './WorkplacePage'
+
+export default WorkplacePage
+
--- a/src/utils/drafts.ts
+++ b/src/utils/drafts.ts
@@ -1,4 +1,5 @@
 const STORAGE_PREFIX = 'challenge_draft_'
+const FINAL_ANSWER_PREFIX = 'challenge_final_answer_'

 const isBrowser = () => typeof window !== 'undefined' && typeof window.localStorage !== 'undefined'

@@ -17,6 +18,24 @@ export function clearDraft(taskId: string) {
  window.localStorage.removeItem(`${STORAGE_PREFIX}${taskId}`)
 }

+// Сохранение финального ответа (после успешной отправки)
+export function saveFinalAnswer(taskId: string, result: string) {
+  if (!isBrowser()) return
+  window.localStorage.setItem(`${FINAL_ANSWER_PREFIX}${taskId}`, result)
+}
+
+// Загрузка финального ответа
+export function loadFinalAnswer(taskId: string): string | null {
+  if (!isBrowser()) return null
+  return window.localStorage.getItem(`${FINAL_ANSWER_PREFIX}${taskId}`)
+}
+
+// Очистка финального ответа
+export function clearFinalAnswer(taskId: string) {
+  if (!isBrowser()) return
+  window.localStorage.removeItem(`${FINAL_ANSWER_PREFIX}${taskId}`)
+}
+
 export function listDrafts() {
  if (!isBrowser()) return [] as string[]

@@ -30,3 +49,16 @@ export function listDrafts() {
  return keys
 }

+// Очистка всех финальных ответов (при выходе)
+export function clearAllFinalAnswers() {
+  if (!isBrowser()) return
+  const keysToRemove: string[] = []
+  for (let i = 0; i < window.localStorage.length; i += 1) {
+    const key = window.localStorage.key(i)
+    if (key?.startsWith(FINAL_ANSWER_PREFIX)) {
+      keysToRemove.push(key)
+    }
+  }
+  keysToRemove.forEach(key => window.localStorage.removeItem(key))
+}
+
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -0,0 +1,165 @@
+/**
+ * Централизованная работа с localStorage
+ * Все ключи и операции в одном месте
+ */
+
+import { clearAllFinalAnswers, listDrafts, clearDraft } from './drafts'
+
+const isBrowser = () => typeof window !== 'undefined'
+
+// Ключи localStorage
+export const STORAGE_KEYS = {
+  USER_ID: 'challengeUserId',
+  NICKNAME: 'challengeNickname',
+  WORKPLACE_NUMBER: 'challengeWorkplaceNumber',
+  SELECTED_CHAIN_ID: 'challengeSelectedChainId',
+  SELECTED_TASK_ID: 'challengeSelectedTaskId',
+} as const
+
+// Вспомогательная функция для ключа прогресса цепочки
+const getFurthestTaskKey = (chainId: string) => `challengeFurthestTask_${chainId}`
+
+// Получение значений
+export const storage = {
+  getUserId: (): string | null => {
+    if (!isBrowser()) return null
+    return localStorage.getItem(STORAGE_KEYS.USER_ID)
+  },
+
+  getNickname: (): string | null => {
+    if (!isBrowser()) return null
+    return localStorage.getItem(STORAGE_KEYS.NICKNAME)
+  },
+
+  getWorkplaceNumber: (): string | null => {
+    if (!isBrowser()) return null
+    return localStorage.getItem(STORAGE_KEYS.WORKPLACE_NUMBER)
+  },
+
+  getSelectedChainId: (): string | null => {
+    if (!isBrowser()) return null
+    return localStorage.getItem(STORAGE_KEYS.SELECTED_CHAIN_ID)
+  },
+
+  getSelectedTaskId: (): string | null => {
+    if (!isBrowser()) return null
+    return localStorage.getItem(STORAGE_KEYS.SELECTED_TASK_ID)
+  },
+
+  // Установка значений
+  setUserId: (value: string): void => {
+    if (!isBrowser()) return
+    localStorage.setItem(STORAGE_KEYS.USER_ID, value)
+  },
+
+  setNickname: (value: string): void => {
+    if (!isBrowser()) return
+    localStorage.setItem(STORAGE_KEYS.NICKNAME, value)
+  },
+
+  setWorkplaceNumber: (value: string): void => {
+    if (!isBrowser()) return
+    localStorage.setItem(STORAGE_KEYS.WORKPLACE_NUMBER, value)
+  },
+
+  setSelectedChainId: (value: string): void => {
+    if (!isBrowser()) return
+    localStorage.setItem(STORAGE_KEYS.SELECTED_CHAIN_ID, value)
+  },
+
+  setSelectedTaskId: (value: string): void => {
+    if (!isBrowser()) return
+    localStorage.setItem(STORAGE_KEYS.SELECTED_TASK_ID, value)
+  },
+
+  // Удаление значений
+  removeUserId: (): void => {
+    if (!isBrowser()) return
+    localStorage.removeItem(STORAGE_KEYS.USER_ID)
+  },
+
+  removeNickname: (): void => {
+    if (!isBrowser()) return
+    localStorage.removeItem(STORAGE_KEYS.NICKNAME)
+  },
+
+  removeWorkplaceNumber: (): void => {
+    if (!isBrowser()) return
+    localStorage.removeItem(STORAGE_KEYS.WORKPLACE_NUMBER)
+  },
+
+  removeSelectedChainId: (): void => {
+    if (!isBrowser()) return
+    localStorage.removeItem(STORAGE_KEYS.SELECTED_CHAIN_ID)
+  },
+
+  removeSelectedTaskId: (): void => {
+    if (!isBrowser()) return
+    localStorage.removeItem(STORAGE_KEYS.SELECTED_TASK_ID)
+  },
+
+  // Полная очистка при выходе (кроме номера рабочего места)
+  clearAll: (): void => {
+    if (!isBrowser()) return
+    localStorage.removeItem(STORAGE_KEYS.USER_ID)
+    localStorage.removeItem(STORAGE_KEYS.NICKNAME)
+    // Номер рабочего места НЕ удаляем
+    localStorage.removeItem(STORAGE_KEYS.SELECTED_CHAIN_ID)
+    localStorage.removeItem(STORAGE_KEYS.SELECTED_TASK_ID)
+    
+    // Очищаем все прогрессы по цепочкам
+    storage.clearAllChainProgress()
+    
+    // Очищаем все финальные ответы
+    clearAllFinalAnswers()
+    
+    // Очищаем все черновики
+    const drafts = listDrafts()
+    drafts.forEach(taskId => clearDraft(taskId))
+  },
+
+  // Очистка всех прогрессов по цепочкам
+  clearAllChainProgress: (): void => {
+    if (!isBrowser()) return
+    // Перебираем все ключи localStorage и удаляем те, что начинаются с challengeFurthestTask_
+    const keysToRemove: string[] = []
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i)
+      if (key && key.startsWith('challengeFurthestTask_')) {
+        keysToRemove.push(key)
+      }
+    }
+    keysToRemove.forEach(key => localStorage.removeItem(key))
+  },
+
+  // Очистка данных сессии (цепочка, задание) без выхода
+  clearSessionData: (): void => {
+    if (!isBrowser()) return
+    localStorage.removeItem(STORAGE_KEYS.SELECTED_CHAIN_ID)
+    localStorage.removeItem(STORAGE_KEYS.SELECTED_TASK_ID)
+  },
+
+  // Получение самого дальнего достигнутого индекса задания в цепочке
+  getFurthestTaskIndex: (chainId: string): number => {
+    if (!isBrowser()) return 0
+    const value = localStorage.getItem(getFurthestTaskKey(chainId))
+    return value ? parseInt(value, 10) : 0
+  },
+
+  // Установка самого дальнего достигнутого индекса задания
+  setFurthestTaskIndex: (chainId: string, index: number): void => {
+    if (!isBrowser()) return
+    const current = storage.getFurthestTaskIndex(chainId)
+    // Обновляем только если новый индекс больше текущего
+    if (index > current) {
+      localStorage.setItem(getFurthestTaskKey(chainId), index.toString())
+    }
+  },
+
+  // Очистка прогресса цепочки
+  clearChainProgress: (chainId: string): void => {
+    if (!isBrowser()) return
+    localStorage.removeItem(getFurthestTaskKey(chainId))
+  },
+}
+
--- a/stubs/api/data/chains.json
+++ b/stubs/api/data/chains.json
@@ -23,6 +23,38 @@
          "description": "# React компонент\n\nСоздайте компонент `StatCard` с пропсами `title` и `value`.",
          "createdAt": "2024-09-05T11:30:00.000Z",
          "updatedAt": "2024-10-01T09:45:00.000Z"
+        },
+        {
+          "id": "task-css-layout",
+          "_id": "task-css-layout",
+          "title": "CSS-верстка",
+          "description": "# CSS-верстка\n\nСверстайте карточку с заголовком, описанием и кнопкой. Используйте Flexbox и тени.",
+          "createdAt": "2024-09-10T14:00:00.000Z",
+          "updatedAt": "2024-10-05T09:00:00.000Z"
+        },
+        {
+          "id": "task-js-dom",
+          "_id": "task-js-dom",
+          "title": "DOM-манипуляции",
+          "description": "# DOM-манипуляции\n\nНапишите скрипт, который добавляет элементы списка по клику на кнопку и очищает их по второй кнопке.",
+          "createdAt": "2024-09-15T10:20:00.000Z",
+          "updatedAt": "2024-10-07T12:30:00.000Z"
+        },
+        {
+          "id": "task-react-state",
+          "_id": "task-react-state",
+          "title": "Состояние React",
+          "description": "# Состояние React\n\nСоздайте компонент, который показывает счётчик кликов и два кнопки — увеличить/сбросить. Используйте хуки.",
+          "createdAt": "2024-09-20T09:15:00.000Z",
+          "updatedAt": "2024-10-08T08:45:00.000Z"
+        },
+        {
+          "id": "task-api-fetch",
+          "_id": "task-api-fetch",
+          "title": "Работа с API",
+          "description": "# Работа с API\n\nСделайте запрос к фиктивному API и отобразите список пользователей с именами и email.",
+          "createdAt": "2024-09-25T13:40:00.000Z",
+          "updatedAt": "2024-10-09T10:10:00.000Z"
        }
      ]
    }
Author	SHA1	Message	Date
Primakov Alexandr	08b654bd4d	1.2.0 Some checks failed platform/bro-js/challenge-pl/pipeline/head There was a failure building this commit Details	2025-12-14 14:17:40 +03:00
Primakov Alexandr	cbf411cd54	Implement final answer management in submission hook and storage utilities. Add functions to save, load, and clear final answers in localStorage. Update useSubmission hook to prioritize final answers over drafts, enhancing user experience during task submissions. Some checks failed platform/bro-js/challenge-pl/pipeline/head There was a failure building this commit Details	2025-12-14 14:17:30 +03:00
Primakov Alexandr	f4e85fe980	Update LoginPage layout for improved spacing and enhance storage utility with new clearAllChainProgress function. Adjust clearAll method to retain workplace number while ensuring all chain progress data is removed upon logout. Some checks failed platform/bro-js/challenge-pl/pipeline/head There was a failure building this commit Details	2025-12-14 14:12:32 +03:00
Primakov Alexandr	3c1a235832	Fix color scheme logic in TaskPage component to ensure consistent button styling based on task accessibility. Simplified the color scheme condition for better readability and maintainability. Some checks failed platform/bro-js/challenge-pl/pipeline/head There was a failure building this commit Details	2025-12-14 14:08:04 +03:00
Primakov Alexandr	1a52901b90	Enhance task navigation and progress tracking across components. Update TaskWorkspace to improve task completion handling and button interactions. Refactor ChainsPage to select the furthest accessible task based on user progress. Implement storage functions for managing furthest task indices, ensuring users can only navigate to available tasks. Update TaskPage to check task accessibility and redirect users appropriately, improving overall user experience. Some checks failed platform/bro-js/challenge-pl/pipeline/head There was a failure building this commit Details	2025-12-14 14:06:18 +03:00
Primakov Alexandr	c9bbe83bbb	Refactor Dashboard component to implement a structured routing system with dedicated pages for workplace input, login, chain selection, task management, and completion. Introduce centralized localStorage management for user data and navigation logic, enhancing user experience and streamlining the application flow. Remove the deprecated LoginForm component and update the MainPage to redirect users based on their authentication and task status. Some checks failed platform/bro-js/challenge-pl/pipeline/head There was a failure building this commit Details	2025-12-14 13:58:24 +03:00