account/routes page

This commit is contained in:
2025-05-21 15:39:00 +03:00
parent d526f0730b
commit c4e1e16e79
17 changed files with 626 additions and 993 deletions

View File

@@ -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

View File

@@ -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

View File

@@ -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 },

View File

@@ -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>
)
}