account/routes page

frontend/app/(urls)/account/create-as-deliveler/page.tsx

@@ -1,7 +1,17 @@
 import React from 'react'
 
-const page = () => {
-  return <div>page</div>
+const DelivelerPage = () => {
+  return (
+    <div className="space-y-3">
+      <div className="rounded-2xl shadow overflow-hidden">
+        <div className="p-6 bg-white sm:p-8">
+          <div className="space-y-4">
+            <h1 className="text-2xl">Перевезти посылку</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
 
-export default page
+export default DelivelerPage

frontend/app/(urls)/account/create-as-sender/page.tsx

@@ -1,7 +1,17 @@
 import React from 'react'
 
-const page = () => {
-  return <div>page</div>
+const SenderPage = () => {
+  return (
+    <div className="space-y-3">
+      <div className="rounded-2xl shadow overflow-hidden">
+        <div className="p-6 bg-white sm:p-8">
+          <div className="space-y-4">
+            <h1 className="text-2xl">Отправить посылку</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
 
-export default page
+export default SenderPage

frontend/app/(urls)/account/layout.tsx

@@ -42,12 +42,12 @@ export default function AccountLayout({
     { name: 'Мои маршруты', href: '/account/routes', icon: FaRoute },
     {
       name: 'Отправить посылку',
-      href: '/account/create_as_sender',
+      href: '/account/create-as-sender',
       icon: GoPackageDependents,
     },
     {
       name: 'Перевезти посылку',
-      href: '/account/create_as_deliveler',
+      href: '/account/create-as-deliveler',
       icon: GoPackageDependencies,
     },
     { name: 'Тарифы', href: '/account/payments', icon: MdOutlinePayments },

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

@@ -1,7 +1,152 @@
 import React from 'react'
+import { cookies } from 'next/headers'
+import { headers } from 'next/headers'
 
-const page = () => {
-  return <div>page</div>
+interface Route {
+  id: string
+  from_city_name: string
+  to_city_name: string
+  formatted_departure: string
+  formatted_arrival: string
+  formatted_cargo_type: string
+  formatted_transport: string
+  comment?: string
+  owner_type: string
 }
 
-export default page
+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'
+
+  const response = await fetch(`${protocol}://${host}/api/account/routes`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Cookie: cookieStore.toString(),
+    },
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    console.error('Error fetching routes:', error)
+    throw new Error(error.message || 'Failed to fetch routes')
+  }
+
+  return response.json()
+}
+
+export default async function UserRoutes() {
+  let routes: Route[] = []
+  try {
+    routes = (await getRoutes()) || []
+  } catch (error) {
+    console.error('Component error:', error)
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-red-500">
+          {error instanceof Error
+            ? error.message
+            : 'Не удалось загрузить маршруты'}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="rounded-2xl shadow overflow-hidden">
+        <div className="p-6 bg-white sm:p-8">
+          <div className="space-y-4">
+            <h1 className="text-2xl">Мои маршруты</h1>
+          </div>
+          {(!routes || routes.length === 0) && (
+            <div className="flex flex-col items-center justify-center py-12 text-gray-500">
+              <p className="text-lg">У вас пока нет завершенных маршрутов</p>
+              <p className="text-sm">
+                Создавайте или принимайте заявки на перевозку, чтобы они
+                отобразились тут
+              </p>
+            </div>
+          )}
+          {routes.length > 0 && (
+            <div className="mt-4 space-y-4">
+              {routes.map((route) => (
+                <div
+                  key={route.id}
+                  className="border rounded-2xl p-6 space-y-4 hover:shadow-md transition-shadow bg-white"
+                >
+                  <div className="flex justify-between items-center">
+                    <div className="text-sm text-gray-500">
+                      ID маршрута: #{route.id}
+                    </div>
+                    <div
+                      className={`px-3 py-1 rounded-full text-sm ${
+                        route.owner_type === 'customer'
+                          ? 'bg-blue-100 text-blue-800'
+                          : 'bg-green-100 text-green-800'
+                      }`}
+                    >
+                      {route.owner_type === 'customer'
+                        ? 'Заказчик'
+                        : 'Перевозчик'}
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col space-y-1">
+                    <div className="flex items-center space-x-3">
+                      <div className="w-4 h-4 rounded-full bg-blue-500 flex-shrink-0" />
+                      <div>
+                        <div className="font-medium">
+                          {route.from_city_name}
+                        </div>
+                        <div className="text-sm text-gray-600">
+                          {route.formatted_departure}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="ml-[7px] w-[2px] h-6 bg-gray-300" />
+                    <div className="flex items-center space-x-3">
+                      <div className="w-4 h-4 rounded-full bg-green-500 flex-shrink-0" />
+                      <div>
+                        <div className="font-medium">{route.to_city_name}</div>
+                        <div className="text-sm text-gray-600">
+                          {route.formatted_arrival}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-wrap gap-4 pt-2">
+                    <div className="flex items-center space-x-2">
+                      <div className="text-gray-500">Тип груза:</div>
+                      <div className="font-medium">
+                        {route.formatted_cargo_type}
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <div className="text-gray-500">Способ перевозки:</div>
+                      <div className="font-medium">
+                        {route.formatted_transport}
+                      </div>
+                    </div>
+                  </div>
+
+                  {route.comment && (
+                    <div className="pt-2 border-t border-gray-300">
+                      <div className="text-sm text-gray-500">
+                        <span className="text-gray-500">Комментарий:</span>{' '}
+                        {route.comment}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/app/api/account/routes/route.ts

@@ -1,17 +1,40 @@
 import { NextRequest } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/app/api/auth/[...nextauth]/route'
 
 export async function GET(req: NextRequest) {
-  // получить список маршрутов/локаций пользователя
-}
+  try {
+    const session = await getServerSession(authOptions)
+    if (!session) {
+      console.error('No session found')
+      return new Response(JSON.stringify({ error: 'Unauthorized' }), {
+        status: 401,
+      })
+    }
 
-export async function POST(req: NextRequest) {
-  // добавить новый маршрут
-}
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/account/routes/`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${session.accessToken}`,
+        },
+      }
+    )
 
-export async function PUT(req: NextRequest) {
-  // обновить маршрут
-}
+    if (!response.ok) {
+      const error = await response.json()
+      console.error('API error:', error)
+      return new Response(JSON.stringify(error), { status: response.status })
+    }
 
-export async function DELETE(req: NextRequest) {
-  // удалить маршрут
+    const result = await response.json()
+    return new Response(JSON.stringify(result), { status: 200 })
+  } catch (error) {
+    console.error('Route handler error:', error)
+    return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
+      status: 500,
+    })
+  }
 }

frontend/components/Header.tsx

@@ -40,14 +40,6 @@ const Header = () => {
         <UserLogin />
 
         <div className="flex items-center space-x-4 md:hidden">
-          <Link href="/login">
-            <Image
-              src="/images/userlogo.png"
-              alt="user"
-              width={24}
-              height={24}
-            />
-          </Link>
           <Burger />
         </div>
       </div>

frontend/components/UserLogin.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import Link from 'next/link'
+import Image from 'next/image'
 import Button from './ui/Button'
 import useUserStore from '@/app/store/userStore'
 
@@ -28,15 +29,30 @@ const UserLogin = () => {
 
   if (!isUserAuth) {
     return (
-      <div className="hidden md:block text-base font-medium">
-        <Link href="/register" className="hover:text-orange transition-colors">
-          Регистрация
-        </Link>
-        <span> / </span>
-        <Link href="/login" className="hover:text-orange transition-colors">
-          Войти
-        </Link>
-      </div>
+      <>
+        <div className="hidden md:block text-base font-medium">
+          <Link
+            href="/register"
+            className="hover:text-orange transition-colors"
+          >
+            Регистрация
+          </Link>
+          <span> / </span>
+          <Link href="/login" className="hover:text-orange transition-colors">
+            Войти
+          </Link>
+        </div>
+        <div className="md:hidden">
+          <Link href="/login">
+            <Image
+              src="/images/userlogo.png"
+              alt="user"
+              width={24}
+              height={24}
+            />
+          </Link>
+        </div>
+      </>
     )
   }
 
@@ -44,16 +60,14 @@ const UserLogin = () => {
     <Link href={path} className="ml-2 sm:ml-5">
       <Button
         text={isUserAuth ? `Привет, ${name}!` : name}
-        className={`
-          text-sm sm:text-base 
-          py-2 sm:py-3 
-          px-3 sm:px-4 
-          bg-orange text-white
-          flex items-center 
-          rounded-2xl 
-          whitespace-nowrap
-          hover:bg-orange/80
-        `}
+        className="hidden md:flex text-sm sm:text-base py-2 sm:py-3 px-3 sm:px-4 bg-orange text-white items-center rounded-2xl whitespace-nowrap hover:bg-orange/80"
+      />
+      <Image
+        src="/images/userlogo.png"
+        alt="user"
+        width={24}
+        height={24}
+        className="md:hidden"
       />
     </Link>
   )