Add authentication and tracking features with API integration

- Implemented user authentication with signup and signin functionality.
- Created a context for managing authentication state.
- Added protected routes for accessing the dashboard and tracker pages.
- Developed a tracker page for logging cigarette usage with optional notes and timestamps.
- Introduced a statistics page to visualize daily smoking habits using charts.
- Integrated Axios for API requests and error handling.
- Updated package dependencies including React Hook Form and Zod for form validation.
- Enhanced UI components for better user experience with Chakra UI.
- Added routing for authentication and tracking pages.

src/__data__/urls.ts

@@ -12,4 +12,6 @@ export const URLs = {
     url: makeUrl(navs[`link.${pkg.name}.auth`]),
     isOn: Boolean(navs[`link.${pkg.name}.auth`])
   },
+  tracker: makeUrl('/tracker'),
+  stats: makeUrl('/stats'),
 }

src/api/client.ts

@@ -0,0 +1,103 @@
+import axios, { AxiosError } from 'axios'
+import { getConfigValue } from '@brojs/cli'
+
+import type {
+  ApiResponse,
+  SignUpRequest,
+  SignInRequest,
+  SignInResponse,
+  LogCigaretteRequest,
+  Cigarette,
+  GetCigarettesParams,
+  DailyStat,
+  GetDailyStatsParams,
+} from '../types/api'
+
+const TOKEN_KEY = 'smokeToken'
+
+// Get API base URL from config
+const baseURL = String(getConfigValue('smoke-tracker.api') || '/api')
+
+// Create axios instance
+export const apiClient = axios.create({
+  baseURL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+// Request interceptor to add JWT token
+apiClient.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem(TOKEN_KEY)
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// Response interceptor for error handling
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error: AxiosError) => {
+    if (error.response?.status === 401) {
+      // Token expired or invalid
+      localStorage.removeItem(TOKEN_KEY)
+      // Optionally redirect to login page
+      if (window.location.pathname !== '/auth/signin') {
+        window.location.href = '/smoke-tracker/auth/signin'
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
+// Auth API
+export const authApi = {
+  signup: async (data: SignUpRequest): Promise<ApiResponse<{ ok: boolean }>> => {
+    const response = await apiClient.post('/auth/signup', data)
+    return response.data
+  },
+
+  signin: async (data: SignInRequest): Promise<ApiResponse<SignInResponse>> => {
+    const response = await apiClient.post('/auth/signin', data)
+    if (response.data.success) {
+      localStorage.setItem(TOKEN_KEY, response.data.body.token)
+    }
+    return response.data
+  },
+
+  signout: () => {
+    localStorage.removeItem(TOKEN_KEY)
+  },
+
+  getToken: () => {
+    return localStorage.getItem(TOKEN_KEY)
+  },
+}
+
+// Cigarettes API
+export const cigarettesApi = {
+  log: async (data: LogCigaretteRequest): Promise<ApiResponse<Cigarette>> => {
+    const response = await apiClient.post('/cigarettes', data)
+    return response.data
+  },
+
+  getAll: async (params?: GetCigarettesParams): Promise<ApiResponse<Cigarette[]>> => {
+    const response = await apiClient.get('/cigarettes', { params })
+    return response.data
+  },
+}
+
+// Stats API
+export const statsApi = {
+  getDaily: async (params?: GetDailyStatsParams): Promise<ApiResponse<DailyStat[]>> => {
+    const response = await apiClient.get('/stats/daily', { params })
+    return response.data
+  },
+}
+

src/app.tsx

@@ -3,12 +3,15 @@ import { BrowserRouter } from 'react-router-dom'
 
 import { Dashboard } from './dashboard'
 import { Provider } from './theme'
+import { AuthProvider } from './contexts/AuthContext'
 
 const App = () => {
   return (
     <BrowserRouter>
       <Provider>
-        <Dashboard />
+        <AuthProvider>
+          <Dashboard />
+        </AuthProvider>
       </Provider>
     </BrowserRouter>
   )

src/components/ProtectedRoute.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react'
+import { Navigate } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+import { URLs } from '../__data__/urls'
+
+interface ProtectedRouteProps {
+  children: ReactNode
+}
+
+export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
+  const { isAuthenticated, isLoading } = useAuth()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to={URLs.auth.url} replace />
+  }
+
+  return <>{children}</>
+}
+

src/components/ui/field.tsx

@@ -0,0 +1,31 @@
+import { Field as ChakraField } from '@chakra-ui/react'
+import * as React from 'react'
+
+export interface FieldProps extends ChakraField.RootProps {
+  label?: React.ReactNode
+  helperText?: React.ReactNode
+  errorText?: React.ReactNode
+  optionalText?: React.ReactNode
+}
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  function Field(props, ref) {
+    const { label, children, helperText, errorText, optionalText, ...rest } = props
+    return (
+      <ChakraField.Root ref={ref} {...rest}>
+        {label && (
+          <ChakraField.Label>
+            {label}
+            <ChakraField.RequiredIndicator />
+          </ChakraField.Label>
+        )}
+        {children}
+        {helperText && (
+          <ChakraField.HelperText>{helperText}</ChakraField.HelperText>
+        )}
+        {errorText && <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>}
+      </ChakraField.Root>
+    )
+  }
+)
+

src/contexts/AuthContext.tsx

@@ -0,0 +1,85 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+import { authApi } from '../api/client'
+import type { User, SignUpRequest, SignInRequest } from '../types/api'
+
+interface AuthContextType {
+  user: User | null
+  isAuthenticated: boolean
+  isLoading: boolean
+  signin: (data: SignInRequest) => Promise<void>
+  signup: (data: SignUpRequest) => Promise<void>
+  signout: () => void
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+interface AuthProviderProps {
+  children: ReactNode
+}
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // Check if user is already logged in (has valid token)
+    const token = authApi.getToken()
+    if (token) {
+      // In a real app, you might want to verify the token with the backend
+      // For now, we just check if token exists
+      setIsLoading(false)
+      // We don't have user data stored, so user will be set on first authenticated request
+    } else {
+      setIsLoading(false)
+    }
+  }, [])
+
+  const signin = async (data: SignInRequest) => {
+    try {
+      const response = await authApi.signin(data)
+      if (response.success) {
+        setUser(response.body.user)
+      } else {
+        throw new Error('Sign in failed')
+      }
+    } catch (error) {
+      throw error
+    }
+  }
+
+  const signup = async (data: SignUpRequest) => {
+    try {
+      const response = await authApi.signup(data)
+      if (!response.success) {
+        throw new Error('Sign up failed')
+      }
+    } catch (error) {
+      throw error
+    }
+  }
+
+  const signout = () => {
+    authApi.signout()
+    setUser(null)
+  }
+
+  const value: AuthContextType = {
+    user,
+    isAuthenticated: !!authApi.getToken(),
+    isLoading,
+    signin,
+    signup,
+    signout,
+  }
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+}
+
+export const useAuth = (): AuthContextType => {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}
+

src/dashboard.tsx

@@ -3,6 +3,10 @@ import { Route, Routes } from 'react-router-dom'
 
 import { URLs } from './__data__/urls'
 import { MainPage } from './pages'
+import { SignInPage, SignUpPage } from './pages/auth'
+import { TrackerPage } from './pages/tracker'
+import { StatsPage } from './pages/stats'
+import { ProtectedRoute } from './components/ProtectedRoute'
 
 const PageWrapper = ({ children }: React.PropsWithChildren) => (
   <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
@@ -15,7 +19,45 @@ export const Dashboard = () => {
         path={URLs.baseUrl}
         element={
           <PageWrapper>
-            <MainPage />
+            <ProtectedRoute>
+              <MainPage />
+            </ProtectedRoute>
+          </PageWrapper>
+        }
+      />
+      <Route
+        path={URLs.auth.url}
+        element={
+          <PageWrapper>
+            <SignInPage />
+          </PageWrapper>
+        }
+      />
+      <Route
+        path={URLs.baseUrl + '/auth/signup'}
+        element={
+          <PageWrapper>
+            <SignUpPage />
+          </PageWrapper>
+        }
+      />
+      <Route
+        path={URLs.tracker}
+        element={
+          <PageWrapper>
+            <ProtectedRoute>
+              <TrackerPage />
+            </ProtectedRoute>
+          </PageWrapper>
+        }
+      />
+      <Route
+        path={URLs.stats}
+        element={
+          <PageWrapper>
+            <ProtectedRoute>
+              <StatsPage />
+            </ProtectedRoute>
           </PageWrapper>
         }
       />

src/pages/auth/index.ts

@@ -0,0 +1,3 @@
+export { SignInPage } from './signin'
+export { SignUpPage } from './signup'
+

src/pages/auth/signin.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Link, useNavigate } from 'react-router-dom'
+import {
+  Box,
+  Button,
+  Input,
+  VStack,
+  Text,
+  Heading,
+  Card,
+} from '@chakra-ui/react'
+import { Field } from '../../components/ui/field'
+import { useAuth } from '../../contexts/AuthContext'
+import { URLs } from '../../__data__/urls'
+
+const signinSchema = z.object({
+  login: z.string().min(1, 'Логин обязателен'),
+  password: z.string().min(1, 'Пароль обязателен'),
+})
+
+type SigninFormData = z.infer<typeof signinSchema>
+
+export const SignInPage: React.FC = () => {
+  const { signin } = useAuth()
+  const navigate = useNavigate()
+  const [error, setError] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<SigninFormData>({
+    resolver: zodResolver(signinSchema),
+  })
+
+  const onSubmit = async (data: SigninFormData) => {
+    setIsSubmitting(true)
+    setError(null)
+
+    try {
+      await signin(data)
+      navigate(URLs.baseUrl)
+    } catch (err: any) {
+      console.error('Signin error:', err)
+      console.error('Error response:', err?.response)
+      
+      let errorMessage = 'Ошибка входа'
+      
+      if (err?.response?.data?.errors) {
+        errorMessage = err.response.data.errors
+      } else if (err?.response?.data?.message) {
+        errorMessage = err.response.data.message
+      } else if (err?.message) {
+        errorMessage = err.message
+      }
+      
+      setError(errorMessage)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <Box
+      minH="100vh"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      bg="gray.50"
+      p={4}
+    >
+      <Card.Root maxW="md" w="full" p={8}>
+        <Card.Body>
+          <VStack gap={6} align="stretch">
+            <Heading size="lg" textAlign="center">
+              Вход в систему
+            </Heading>
+
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <VStack gap={4} align="stretch">
+                <Field
+                  label="Логин"
+                  invalid={!!errors.login}
+                  errorText={errors.login?.message}
+                >
+                  <Input
+                    {...register('login')}
+                    placeholder="Введите логин"
+                    size="lg"
+                  />
+                </Field>
+
+                <Field
+                  label="Пароль"
+                  invalid={!!errors.password}
+                  errorText={errors.password?.message}
+                >
+                  <Input
+                    {...register('password')}
+                    type="password"
+                    placeholder="Введите пароль"
+                    size="lg"
+                  />
+                </Field>
+
+                {error && (
+                  <Text color="red.500" fontSize="sm">
+                    {error}
+                  </Text>
+                )}
+
+                <Button
+                  type="submit"
+                  colorScheme="blue"
+                  size="lg"
+                  w="full"
+                  loading={isSubmitting}
+                  disabled={isSubmitting}
+                >
+                  Войти
+                </Button>
+
+                <Text textAlign="center" fontSize="sm">
+                  Нет аккаунта?{' '}
+                  <Link to={URLs.baseUrl + '/auth/signup'}>
+                    <Text as="span" color="blue.500" textDecoration="underline">
+                      Зарегистрироваться
+                    </Text>
+                  </Link>
+                </Text>
+              </VStack>
+            </form>
+          </VStack>
+        </Card.Body>
+      </Card.Root>
+    </Box>
+  )
+}
+

src/pages/auth/signup.tsx

@@ -0,0 +1,161 @@
+import React, { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Link, useNavigate } from 'react-router-dom'
+import {
+  Box,
+  Button,
+  Input,
+  VStack,
+  Text,
+  Heading,
+  Card,
+} from '@chakra-ui/react'
+import { Field } from '../../components/ui/field'
+import { useAuth } from '../../contexts/AuthContext'
+import { URLs } from '../../__data__/urls'
+
+const signupSchema = z.object({
+  login: z.string().min(3, 'Логин должен содержать минимум 3 символа'),
+  password: z.string().min(4, 'Пароль должен содержать минимум 4 символов'),
+  confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: 'Пароли не совпадают',
+  path: ['confirmPassword'],
+})
+
+type SignupFormData = z.infer<typeof signupSchema>
+
+export const SignUpPage: React.FC = () => {
+  const { signup } = useAuth()
+  const navigate = useNavigate()
+  const [error, setError] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<SignupFormData>({
+    resolver: zodResolver(signupSchema),
+  })
+
+  const onSubmit = async (data: SignupFormData) => {
+    setIsSubmitting(true)
+    setError(null)
+
+    try {
+      await signup({ login: data.login, password: data.password })
+      // After successful signup, redirect to signin
+      navigate(URLs.auth.url)
+    } catch (err: any) {
+      console.error('Signup error:', err)
+      console.error('Error response:', err?.response)
+      
+      let errorMessage = 'Ошибка регистрации'
+      
+      if (err?.response?.data?.errors) {
+        errorMessage = err.response.data.errors
+      } else if (err?.response?.data?.message) {
+        errorMessage = err.response.data.message
+      } else if (err?.message) {
+        errorMessage = err.message
+      }
+      
+      setError(errorMessage)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <Box
+      minH="100vh"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      bg="gray.50"
+      p={4}
+    >
+      <Card.Root maxW="md" w="full" p={8}>
+        <Card.Body>
+          <VStack gap={6} align="stretch">
+            <Heading size="lg" textAlign="center">
+              Регистрация
+            </Heading>
+
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <VStack gap={4} align="stretch">
+                <Field
+                  label="Логин"
+                  invalid={!!errors.login}
+                  errorText={errors.login?.message}
+                >
+                  <Input
+                    {...register('login')}
+                    placeholder="Введите логин"
+                    size="lg"
+                  />
+                </Field>
+
+                <Field
+                  label="Пароль"
+                  invalid={!!errors.password}
+                  errorText={errors.password?.message}
+                >
+                  <Input
+                    {...register('password')}
+                    type="password"
+                    placeholder="Введите пароль"
+                    size="lg"
+                  />
+                </Field>
+
+                <Field
+                  label="Подтверждение пароля"
+                  invalid={!!errors.confirmPassword}
+                  errorText={errors.confirmPassword?.message}
+                >
+                  <Input
+                    {...register('confirmPassword')}
+                    type="password"
+                    placeholder="Повторите пароль"
+                    size="lg"
+                  />
+                </Field>
+
+                {error && (
+                  <Text color="red.500" fontSize="sm">
+                    {error}
+                  </Text>
+                )}
+
+                <Button
+                  type="submit"
+                  colorScheme="blue"
+                  size="lg"
+                  w="full"
+                  loading={isSubmitting}
+                  disabled={isSubmitting}
+                >
+                  Зарегистрироваться
+                </Button>
+
+                <Text textAlign="center" fontSize="sm">
+                  Уже есть аккаунт?{' '}
+                  <Link to={URLs.auth.url}>
+                    <Text as="span" color="blue.500" textDecoration="underline">
+                      Войти
+                    </Text>
+                  </Link>
+                </Text>
+              </VStack>
+            </form>
+          </VStack>
+        </Card.Body>
+      </Card.Root>
+    </Box>
+  )
+}
+

src/pages/main/main.tsx

@@ -1,28 +1,117 @@
 import React from 'react'
-import { Grid, GridItem } from '@chakra-ui/react'
+import { Link, useNavigate } from 'react-router-dom'
+import {
+  Box,
+  Button,
+  VStack,
+  HStack,
+  Text,
+  Heading,
+  Card,
+  Container,
+} from '@chakra-ui/react'
+import { useAuth } from '../../contexts/AuthContext'
+import { URLs } from '../../__data__/urls'
 
 export const MainPage = () => {
+  const { user, signout } = useAuth()
+  const navigate = useNavigate()
+
+  const handleSignout = () => {
+    signout()
+    navigate(URLs.auth.url)
+  }
+
   return (
-    <Grid
-      h="100%"
-      bgColor="gray.300"
-      templateAreas={{
-        md: `"header header"
-        "aside main"
-        "footer footer"`,
-        sm: `"header"
-        "main"
-        "aside"
-        "footer"`,
-      }}
-      gridTemplateRows={{ sm: '1fr', md: '50px 1fr 30px' }}
-      gridTemplateColumns={{ sm: '1fr', md: '150px 1fr' }}
-      gap={4}
-    >
-      <GridItem bgColor="green.100" gridArea="header">header</GridItem>
-      <GridItem bgColor="green.300" gridArea="aside">aside</GridItem>
-      <GridItem bgColor="green.600" gridArea="main" h="100vh">main</GridItem>
-      <GridItem bgColor="green.300" gridArea="footer">footer</GridItem>
-    </Grid>
+    <Box minH="100vh" bg="gray.50">
+      {/* Header */}
+      <Box bg="teal.500" color="white" py={4} px={8} shadow="md">
+        <Container maxW="6xl">
+          <HStack justify="space-between">
+            <Heading size="lg">Smoke Tracker</Heading>
+            <HStack gap={4}>
+              {user && (
+                <Text fontSize="sm">
+                  Пользователь: <strong>{user.login}</strong>
+                </Text>
+              )}
+              <Button colorScheme="whiteAlpha" variant="outline" onClick={handleSignout}>
+                Выйти
+              </Button>
+            </HStack>
+          </HStack>
+        </Container>
+      </Box>
+
+      {/* Main content */}
+      <Container maxW="6xl" py={12}>
+        <VStack gap={8}>
+          <VStack gap={2}>
+            <Heading size="2xl">Добро пожаловать в Smoke Tracker!</Heading>
+            <Text fontSize="lg" color="gray.600" textAlign="center">
+              Приложение для отслеживания привычки курения
+            </Text>
+          </VStack>
+
+          {/* Navigation cards */}
+          <Box w="full" mt={8}>
+            <VStack gap={6}>
+              <Card.Root w="full" bg="blue.50" _hover={{ shadow: 'lg', transform: 'translateY(-2px)' }} transition="all 0.2s">
+                <Card.Body p={8}>
+                  <VStack gap={4}>
+                    <Heading size="lg" color="blue.700">
+                      📝 Трекер
+                    </Heading>
+                    <Text textAlign="center" color="gray.700">
+                      Записывайте каждую выкуренную сигарету с временем и заметками
+                    </Text>
+                    <Link to={URLs.tracker}>
+                      <Button colorScheme="blue" size="lg" w="200px">
+                        Открыть трекер
+                      </Button>
+                    </Link>
+                  </VStack>
+                </Card.Body>
+              </Card.Root>
+
+              <Card.Root w="full" bg="teal.50" _hover={{ shadow: 'lg', transform: 'translateY(-2px)' }} transition="all 0.2s">
+                <Card.Body p={8}>
+                  <VStack gap={4}>
+                    <Heading size="lg" color="teal.700">
+                      📊 Статистика
+                    </Heading>
+                    <Text textAlign="center" color="gray.700">
+                      Просматривайте графики и анализируйте свою привычку курения
+                    </Text>
+                    <Link to={URLs.stats}>
+                      <Button colorScheme="teal" size="lg" w="200px">
+                        Посмотреть статистику
+                      </Button>
+                    </Link>
+                  </VStack>
+                </Card.Body>
+              </Card.Root>
+            </VStack>
+          </Box>
+
+          {/* Info section */}
+          <Card.Root w="full" mt={8}>
+            <Card.Body p={6}>
+              <VStack gap={4} align="start">
+                <Heading size="md">Возможности приложения:</Heading>
+                <VStack align="start" gap={2} pl={4}>
+                  <Text>✓ Быстрая запись сигарет одной кнопкой</Text>
+                  <Text>✓ Добавление заметок и произвольного времени</Text>
+                  <Text>✓ Просмотр истории всех записей</Text>
+                  <Text>✓ Дневная статистика с графиками</Text>
+                  <Text>✓ Анализ за любой период времени</Text>
+                  <Text>✓ Расчет среднего и максимального количества в день</Text>
+                </VStack>
+              </VStack>
+            </Card.Body>
+          </Card.Root>
+        </VStack>
+      </Container>
+    </Box>
   )
 }

src/pages/stats/index.ts

@@ -0,0 +1,2 @@
+export { StatsPage } from './stats'
+

src/pages/stats/stats.tsx

@@ -0,0 +1,258 @@
+import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import {
+  Box,
+  Button,
+  VStack,
+  HStack,
+  Text,
+  Heading,
+  Card,
+  Input,
+  Stack,
+} from '@chakra-ui/react'
+import { Field } from '../../components/ui/field'
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import { format, subDays, eachDayOfInterval, parseISO } from 'date-fns'
+import { statsApi } from '../../api/client'
+import { URLs } from '../../__data__/urls'
+import type { DailyStat } from '../../types/api'
+
+interface FilledDailyStat {
+  date: string
+  count: number
+  displayDate: string
+}
+
+export const StatsPage: React.FC = () => {
+  const [stats, setStats] = useState<FilledDailyStat[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // Default: last 30 days
+  const [fromDate, setFromDate] = useState(
+    format(subDays(new Date(), 30), 'yyyy-MM-dd')
+  )
+  const [toDate, setToDate] = useState(format(new Date(), 'yyyy-MM-dd'))
+
+  const fillMissingDates = (data: DailyStat[], from: string, to: string): FilledDailyStat[] => {
+    const start = parseISO(from)
+    const end = parseISO(to)
+    const allDates = eachDayOfInterval({ start, end })
+
+    return allDates.map((date) => {
+      const dateStr = format(date, 'yyyy-MM-dd')
+      const existing = data.find((d) => d.date === dateStr)
+
+      return {
+        date: dateStr,
+        count: existing ? existing.count : 0,
+        displayDate: format(date, 'dd.MM'),
+      }
+    })
+  }
+
+  const fetchStats = async () => {
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const fromISO = new Date(fromDate).toISOString()
+      const toISO = new Date(toDate + 'T23:59:59').toISOString()
+
+      const response = await statsApi.getDaily({
+        from: fromISO,
+        to: toISO,
+      })
+
+      if (response.success) {
+        const filled = fillMissingDates(response.body, fromDate, toDate)
+        setStats(filled)
+      }
+    } catch (err: any) {
+      const errorMessage =
+        err?.response?.data?.errors ||
+        err?.response?.data?.message ||
+        'Ошибка при загрузке статистики'
+      setError(errorMessage)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchStats()
+  }, [])
+
+  const totalCigarettes = stats.reduce((sum, stat) => sum + stat.count, 0)
+  const averagePerDay = stats.length > 0 ? (totalCigarettes / stats.length).toFixed(1) : 0
+  const maxPerDay = Math.max(...stats.map((s) => s.count), 0)
+
+  return (
+    <Box minH="100vh" bg="gray.50" p={8}>
+      <VStack gap={6} maxW="6xl" mx="auto">
+        <Heading size="2xl">Статистика курения</Heading>
+
+        <HStack w="full" gap={4}>
+          <Link to={URLs.baseUrl}>
+            <Button colorScheme="gray" variant="outline">
+              На главную
+            </Button>
+          </Link>
+          <Link to={URLs.baseUrl + '/tracker'}>
+            <Button colorScheme="blue" variant="outline">
+              Трекер
+            </Button>
+          </Link>
+        </HStack>
+
+        {/* Date range selector */}
+        <Card.Root w="full">
+          <Card.Body>
+            <VStack gap={4} align="stretch">
+              <Heading size="md">Выберите период</Heading>
+
+              <HStack gap={4} flexWrap="wrap">
+                <Field label="От">
+                  <Input
+                    type="date"
+                    value={fromDate}
+                    onChange={(e) => setFromDate(e.target.value)}
+                  />
+                </Field>
+
+                <Field label="До">
+                  <Input
+                    type="date"
+                    value={toDate}
+                    onChange={(e) => setToDate(e.target.value)}
+                  />
+                </Field>
+
+                <Box>
+                  <Button
+                    colorScheme="teal"
+                    onClick={fetchStats}
+                    loading={isLoading}
+                    disabled={isLoading}
+                    mt={7}
+                  >
+                    Обновить
+                  </Button>
+                </Box>
+              </HStack>
+            </VStack>
+          </Card.Body>
+        </Card.Root>
+
+        {error && (
+          <Card.Root w="full" bg="red.50" borderColor="red.500" borderWidth={2}>
+            <Card.Body>
+              <Text color="red.700" fontWeight="bold">
+                {error}
+              </Text>
+            </Card.Body>
+          </Card.Root>
+        )}
+
+        {/* Summary statistics */}
+        <Card.Root w="full">
+          <Card.Body>
+            <Stack direction={{ base: 'column', md: 'row' }} gap={6} justify="space-around">
+              <VStack>
+                <Text fontSize="3xl" fontWeight="bold" color="blue.500">
+                  {totalCigarettes}
+                </Text>
+                <Text fontSize="sm" color="gray.600">
+                  Всего сигарет
+                </Text>
+              </VStack>
+
+              <VStack>
+                <Text fontSize="3xl" fontWeight="bold" color="green.500">
+                  {averagePerDay}
+                </Text>
+                <Text fontSize="sm" color="gray.600">
+                  В среднем в день
+                </Text>
+              </VStack>
+
+              <VStack>
+                <Text fontSize="3xl" fontWeight="bold" color="orange.500">
+                  {maxPerDay}
+                </Text>
+                <Text fontSize="sm" color="gray.600">
+                  Максимум в день
+                </Text>
+              </VStack>
+            </Stack>
+          </Card.Body>
+        </Card.Root>
+
+        {/* Chart */}
+        <Card.Root w="full">
+          <Card.Body>
+            <VStack gap={4} align="stretch">
+              <Heading size="md">График по дням</Heading>
+
+              {isLoading ? (
+                <Text textAlign="center" py={8}>
+                  Загрузка...
+                </Text>
+              ) : stats.length === 0 ? (
+                <Text textAlign="center" py={8} color="gray.500">
+                  Нет данных за выбранный период
+                </Text>
+              ) : (
+                <Box w="full" h="400px">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <LineChart
+                      data={stats}
+                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis
+                        dataKey="displayDate"
+                        tick={{ fontSize: 12 }}
+                        interval="preserveStartEnd"
+                      />
+                      <YAxis allowDecimals={false} />
+                      <Tooltip
+                        contentStyle={{
+                          backgroundColor: '#fff',
+                          border: '1px solid #ccc',
+                          borderRadius: '4px',
+                        }}
+                        labelFormatter={(label) => `Дата: ${label}`}
+                        formatter={(value: number) => [value, 'Сигарет']}
+                      />
+                      <Legend />
+                      <Line
+                        type="monotone"
+                        dataKey="count"
+                        name="Количество сигарет"
+                        stroke="#3182ce"
+                        strokeWidth={2}
+                        activeDot={{ r: 8 }}
+                      />
+                    </LineChart>
+                  </ResponsiveContainer>
+                </Box>
+              )}
+            </VStack>
+          </Card.Body>
+        </Card.Root>
+      </VStack>
+    </Box>
+  )
+}
+

src/pages/tracker/index.ts

@@ -0,0 +1,2 @@
+export { TrackerPage } from './tracker'
+

src/pages/tracker/tracker.tsx

@@ -0,0 +1,266 @@
+import React, { useState, useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Link } from 'react-router-dom'
+import {
+  Box,
+  Button,
+  Input,
+  VStack,
+  HStack,
+  Text,
+  Heading,
+  Card,
+  Textarea,
+  Stack,
+} from '@chakra-ui/react'
+import { Field } from '../../components/ui/field'
+import { cigarettesApi } from '../../api/client'
+import { URLs } from '../../__data__/urls'
+import type { Cigarette } from '../../types/api'
+
+const logCigaretteSchema = z.object({
+  smokedAt: z.string().optional(),
+  note: z.string().optional(),
+})
+
+type LogCigaretteFormData = z.infer<typeof logCigaretteSchema>
+
+export const TrackerPage: React.FC = () => {
+  const [cigarettes, setCigarettes] = useState<Cigarette[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<LogCigaretteFormData>({
+    resolver: zodResolver(logCigaretteSchema),
+  })
+
+  const fetchCigarettes = async () => {
+    try {
+      const response = await cigarettesApi.getAll()
+      if (response.success) {
+        // Show most recent first
+        setCigarettes(response.body.reverse())
+      }
+    } catch (err: any) {
+      console.error('Failed to fetch cigarettes:', err)
+    }
+  }
+
+  useEffect(() => {
+    fetchCigarettes()
+  }, [])
+
+  const logQuick = async () => {
+    setIsLoading(true)
+    setError(null)
+    setSuccess(null)
+
+    try {
+      const response = await cigarettesApi.log({})
+      if (response.success) {
+        setSuccess('Сигарета записана!')
+        await fetchCigarettes()
+        setTimeout(() => setSuccess(null), 3000)
+      }
+    } catch (err: any) {
+      const errorMessage = err?.response?.data?.errors || err?.response?.data?.message || 'Ошибка при записи'
+      setError(errorMessage)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const onSubmit = async (data: LogCigaretteFormData) => {
+    setIsLoading(true)
+    setError(null)
+    setSuccess(null)
+
+    try {
+      const response = await cigarettesApi.log({
+        smokedAt: data.smokedAt || undefined,
+        note: data.note || undefined,
+      })
+      if (response.success) {
+        setSuccess('Сигарета записана с заметкой!')
+        reset()
+        await fetchCigarettes()
+        setTimeout(() => setSuccess(null), 3000)
+      }
+    } catch (err: any) {
+      const errorMessage = err?.response?.data?.errors || err?.response?.data?.message || 'Ошибка при записи'
+      setError(errorMessage)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    return date.toLocaleString('ru-RU', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  return (
+    <Box minH="100vh" bg="gray.50" p={8}>
+      <VStack gap={6} maxW="4xl" mx="auto">
+        <Heading size="2xl">Трекер курения</Heading>
+
+        <HStack w="full" gap={4}>
+          <Link to={URLs.baseUrl}>
+            <Button colorScheme="gray" variant="outline">
+              На главную
+            </Button>
+          </Link>
+          <Link to={URLs.baseUrl + '/stats'}>
+            <Button colorScheme="teal" variant="outline">
+              Статистика
+            </Button>
+          </Link>
+        </HStack>
+
+        {/* Quick log button */}
+        <Card.Root w="full" bg="blue.50">
+          <Card.Body>
+            <VStack gap={4}>
+              <Text fontSize="lg" fontWeight="bold">
+                Быстрая запись
+              </Text>
+              <Button
+                colorScheme="blue"
+                size="lg"
+                w="full"
+                onClick={logQuick}
+                loading={isLoading}
+                disabled={isLoading}
+              >
+                Записать сигарету (текущее время)
+              </Button>
+            </VStack>
+          </Card.Body>
+        </Card.Root>
+
+        {/* Form with custom time and note */}
+        <Card.Root w="full">
+          <Card.Body>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <VStack gap={4} align="stretch">
+                <Heading size="md">Запись с дополнительными данными</Heading>
+
+                <Field
+                  label="Время (необязательно)"
+                  helperText="Оставьте пустым для текущего времени"
+                  invalid={!!errors.smokedAt}
+                  errorText={errors.smokedAt?.message}
+                >
+                  <Input
+                    {...register('smokedAt')}
+                    type="datetime-local"
+                    placeholder="Выберите время"
+                  />
+                </Field>
+
+                <Field
+                  label="Заметка (необязательно)"
+                  invalid={!!errors.note}
+                  errorText={errors.note?.message}
+                >
+                  <Textarea
+                    {...register('note')}
+                    placeholder="Добавьте комментарий..."
+                    rows={3}
+                  />
+                </Field>
+
+                <Button
+                  type="submit"
+                  colorScheme="green"
+                  w="full"
+                  loading={isLoading}
+                  disabled={isLoading}
+                >
+                  Записать с заметкой
+                </Button>
+              </VStack>
+            </form>
+          </Card.Body>
+        </Card.Root>
+
+        {/* Success/Error messages */}
+        {success && (
+          <Card.Root w="full" bg="green.50" borderColor="green.500" borderWidth={2}>
+            <Card.Body>
+              <Text color="green.700" fontWeight="bold">
+                {success}
+              </Text>
+            </Card.Body>
+          </Card.Root>
+        )}
+
+        {error && (
+          <Card.Root w="full" bg="red.50" borderColor="red.500" borderWidth={2}>
+            <Card.Body>
+              <Text color="red.700" fontWeight="bold">
+                {error}
+              </Text>
+            </Card.Body>
+          </Card.Root>
+        )}
+
+        {/* Recent cigarettes list */}
+        <Card.Root w="full">
+          <Card.Body>
+            <VStack gap={4} align="stretch">
+              <Heading size="md">Последние записи</Heading>
+
+              {cigarettes.length === 0 ? (
+                <Text color="gray.500" textAlign="center" py={4}>
+                  Записей пока нет
+                </Text>
+              ) : (
+                <Stack gap={2}>
+                  {cigarettes.slice(0, 10).map((cigarette) => (
+                    <Box
+                      key={cigarette.id}
+                      p={3}
+                      bg="gray.100"
+                      borderRadius="md"
+                      borderWidth={1}
+                      borderColor="gray.300"
+                    >
+                      <HStack justify="space-between" align="start">
+                        <VStack align="start" gap={1}>
+                          <Text fontWeight="bold">
+                            {formatDate(cigarette.smokedAt)}
+                          </Text>
+                          {cigarette.note && (
+                            <Text fontSize="sm" color="gray.600">
+                              {cigarette.note}
+                            </Text>
+                          )}
+                        </VStack>
+                      </HStack>
+                    </Box>
+                  ))}
+                </Stack>
+              )}
+            </VStack>
+          </Card.Body>
+        </Card.Root>
+      </VStack>
+    </Box>
+  )
+}
+

src/types/api.ts

@@ -0,0 +1,64 @@
+// API Response wrapper
+export interface ApiResponse<T> {
+  success: boolean
+  body: T
+}
+
+export interface ApiError {
+  success: false
+  errors: string
+  message?: string
+}
+
+// User related types
+export interface User {
+  id: string
+  login: string
+  created: string
+}
+
+export interface SignUpRequest {
+  login: string
+  password: string
+}
+
+export interface SignInRequest {
+  login: string
+  password: string
+}
+
+export interface SignInResponse {
+  user: User
+  token: string
+}
+
+// Cigarette related types
+export interface Cigarette {
+  id: string
+  userId: string
+  smokedAt: string
+  note?: string
+  created: string
+}
+
+export interface LogCigaretteRequest {
+  smokedAt?: string
+  note?: string
+}
+
+export interface GetCigarettesParams {
+  from?: string
+  to?: string
+}
+
+// Statistics types
+export interface DailyStat {
+  date: string // YYYY-MM-DD format
+  count: number
+}
+
+export interface GetDailyStatsParams {
+  from?: string
+  to?: string
+}
+