add new buttons in account

frontend/app/(urls)/account/routes/page.tsx

@@ -1,46 +1,77 @@
-import React from 'react'
-import { cookies } from 'next/headers'
-import { headers } from 'next/headers'
+'use client'
+
+import React, { useEffect, useState } from 'react'
 import { Route } from '@/app/types'
+import Button from '@/components/ui/Button'
+import showToast from '@/components/ui/Toast'
+import Loader from '@/components/ui/Loader'
 
-async function getRoutes() {
-  const cookieStore = await cookies()
-  const headersList = await headers()
-  const protocol = headersList.get('x-forwarded-proto') || 'http'
-  const host = headersList.get('host') || 'localhost:3000'
+export default function UserRoutes() {
+  const [routes, setRoutes] = useState<Route[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
 
-  const response = await fetch(`${protocol}://${host}/api/account/routes`, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      Cookie: cookieStore.toString(),
-    },
-  })
+  useEffect(() => {
+    const fetchRoutes = async () => {
+      try {
+        const response = await fetch('/api/account/routes', {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
 
-  if (!response.ok) {
-    const error = await response.json()
-    console.error('Error fetching routes:', error)
-    throw new Error(error.message || 'Failed to fetch routes')
+        if (!response.ok) {
+          const error = await response.json()
+          throw new Error(error.message || 'Failed to fetch routes')
+        }
+
+        const data = await response.json()
+        setRoutes(data || [])
+      } catch (error) {
+        console.error('Error fetching routes:', error)
+        setError(error instanceof Error ? error.message : 'Не удалось загрузить маршруты')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchRoutes()
+  }, [])
+
+  const handleHighlight = () => {
+    showToast({
+      type: 'success',
+      message: 'Ваше объявление выделено на сутки!',
+    })
   }
 
-  return response.json()
-}
+  const handleUpper = () => {
+    showToast({
+      type: 'success',
+      message: 'Ваше объявление поднято в выдаче!',
+    })
+  }
 
-export default async function UserRoutes() {
-  let routes: Route[] = []
-  try {
-    routes = (await getRoutes()) || []
-  } catch (error) {
-    console.error('Component error:', error)
+  if (loading) {
+    return <Loader />
+  }
+
+  if (error) {
     return (
       <div className="flex items-center justify-center py-12">
-        <div className="text-red-500">
-          {error instanceof Error ? error.message : 'Не удалось загрузить маршруты'}
-        </div>
+        <div className="text-red-500">{error}</div>
       </div>
     )
   }
 
+  const getBorderColor = (route: Route) => {
+    if (route.is_highlighted) {
+      return 'border-yellow-500'
+    }
+    return 'border'
+  }
+
   return (
     <div className="space-y-3">
       <div className="overflow-hidden rounded-2xl shadow">
@@ -59,7 +90,7 @@ export default async function UserRoutes() {
               {routes.map(route => (
                 <div
                   key={route.id}
-                  className="space-y-4 rounded-2xl border bg-white p-6 transition-shadow hover:shadow-md"
+                  className={`space-y-4 rounded-2xl border bg-white p-6 transition-shadow hover:shadow-md ${getBorderColor(route)}`}
                 >
                   <div className="flex items-center justify-between">
                     <div className="text-sm text-gray-500">ID маршрута: #{route.id}</div>
@@ -114,6 +145,18 @@ export default async function UserRoutes() {
                       </div>
                     </div>
                   )}
+                  <div className="flex justify-between">
+                    <Button
+                      text="Поднять объявление"
+                      className="border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-100 focus:outline-none"
+                      onClick={handleUpper}
+                    />
+                    <Button
+                      text="Выделить рамкой"
+                      className="border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-100 focus:outline-none"
+                      onClick={handleHighlight}
+                    />
+                  </div>
                 </div>
               ))}
             </div>

frontend/app/(urls)/search/components/Pagination.tsx

@@ -1,15 +1,7 @@
 'use client'
 
 import React from 'react'
-
-interface PaginationProps {
-  currentPage: number
-  totalPages: number
-  hasNext: boolean
-  hasPrevious: boolean
-  isLoading: boolean
-  onPageChange: (page: number) => void
-}
+import { PaginationProps } from '@/app/types'
 
 export default function Pagination({
   currentPage,
@@ -33,7 +25,7 @@ export default function Pagination({
           pageNum === currentPage
             ? 'bg-orange/80 text-white'
             : 'bg-white text-gray-700 hover:bg-gray-100'
-        } flex items-center justify-center border text-sm font-medium transition-colors`}
+        } flex cursor-pointer items-center justify-center border text-sm font-medium transition-colors`}
       >
         {pageNum}
       </button>

frontend/app/types/index.ts

@@ -173,6 +173,7 @@ export interface Route {
   status: string
   owner_email: string
   owner_name: string
+  is_highlighted: boolean
 }
 
 export interface SelectOption {
@@ -269,3 +270,12 @@ export interface RouteSearchPageProps {
     route: string
   }>
 }
+
+export interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  hasNext: boolean
+  hasPrevious: boolean
+  isLoading: boolean
+  onPageChange: (page: number) => void
+}