account/sender UI

2025-05-21 17:36:10 +03:00
parent c6c405f232
commit 5ad12c34cd
10 changed files with 705 additions and 295 deletions
--- a/frontend/app/(urls)/account/create-as-deliveler/page.tsx
+++ b/frontend/app/(urls)/account/create-as-deliveler/page.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import MultiSelect from '@/components/ui/Selector'

 const DelivelerPage = () => {
  return (
--- a/frontend/app/(urls)/account/create-as-sender/page.tsx
+++ b/frontend/app/(urls)/account/create-as-sender/page.tsx
@@ -1,16 +1,288 @@
+'use client'
+
 import React from 'react'
+import MultiSelect from '@/components/ui/Selector'
+import TextInput from '@/components/ui/TextInput'
+import PhoneInput from '@/components/ui/PhoneInput'
+import Button from '@/components/ui/Button'
+import TextAreaInput from '@/components/ui/TextAreaInput'
+import CheckboxInput from '@/components/ui/CheckboxInput'
+import { useForm } from '@/app/hooks/useForm'
+import showToast from '@/components/ui/Toast'
+import { SenderPageProps, SelectOption } from '@/app/types'
+import {
+  cargo_types,
+  cargo_type_translations,
+  transport_types,
+  transport_translations,
+} from '@/app/constants'
+
+const formatDateToHTML = (date: Date) => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${year}-${month}-${day}T${hours}:${minutes}`
+}
+
+const validationRules = {
+  transport: { required: true },
+  country_from: { required: true, minLength: 2 },
+  city_from: { required: true, minLength: 2 },
+  country_to: { required: true, minLength: 2 },
+  city_to: { required: true, minLength: 2 },
+  cargo_type: { required: true },
+  departure: {
+    required: true,
+    pattern: /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/,
+  },
+  arrival: {
+    required: true,
+    pattern: /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/,
+  },
+  contact_number: {
+    required: true,
+    minLength: 11,
+    pattern: /^\+?[0-9]{11,}$/,
+  },
+  comment: { required: false, minLength: 10 },
+  email_notification: { required: false },
+}

 const SenderPage = () => {
+  const today = formatDateToHTML(new Date())
+
+  const initialValues: SenderPageProps = {
+    transport: '',
+    country_from: '',
+    city_from: '',
+    country_to: '',
+    city_to: '',
+    cargo_type: '',
+    departure: '',
+    arrival: '',
+    contact_number: '',
+    comment: '',
+    email_notification: false,
+  }
+
+  const cargoOptions: SelectOption[] = cargo_types.map((type, index) => ({
+    id: index + 1,
+    label: cargo_type_translations[type],
+    value: type,
+  }))
+
+  const transportOptions: SelectOption[] = transport_types.map((type, index) => ({
+    id: index + 1,
+    label: transport_translations[type],
+    value: type,
+  }))
+
+  const { values, handleChange, handleSubmit } = useForm<SenderPageProps>(
+    initialValues,
+    validationRules,
+    async values => {
+      try {
+        // await addNewSpecialist(values, selectedImage || undefined)
+        showToast({
+          type: 'success',
+          message: 'Маршрут успешно создан!',
+        })
+      } catch {
+        showToast({
+          type: 'error',
+          message: 'Упс, что то пошло не так...',
+        })
+      }
+    }
+  )
+
  return (
-    <div className="space-y-3">
-      <div className="overflow-hidden rounded-2xl shadow">
-        <div className="bg-white p-6 sm:p-8">
-          <div className="space-y-4">
-            <h1 className="text-2xl">Отправить посылку</h1>
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="overflow-hidden rounded-2xl bg-white shadow">
+        <div className="p-6 sm:p-8">
+          <div className="space-y-8">
+            <div>
+              <h1 className="text-2xl font-semibold text-gray-900">Отправить посылку</h1>
+              <p className="mt-1 text-sm text-gray-600">
+                Заполните информацию о вашей посылке и маршруте
+              </p>
+            </div>
+
+            {/* тип груза и транспорта */}
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+              <div>
+                <label htmlFor="cargo_type" className="block text-sm font-medium text-gray-700">
+                  Тип груза
+                </label>
+                <MultiSelect
+                  value={values.cargo_type ? [parseInt(values.cargo_type)] : []}
+                  handleChange={e => {
+                    handleChange({
+                      target: {
+                        id: 'cargo_type',
+                        value: e.target.value[0]?.toString() || '',
+                      },
+                    })
+                  }}
+                  name="cargo_type"
+                  options={cargoOptions}
+                  className="mt-1"
+                  placeholder="Выберите тип груза"
+                  noOptionsMessage="Нет доступных типов груза"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="transport" className="block text-sm font-medium text-gray-700">
+                  Способ перевозки
+                </label>
+                <MultiSelect
+                  value={values.transport ? [parseInt(values.transport)] : []}
+                  handleChange={e => {
+                    handleChange({
+                      target: {
+                        id: 'transport',
+                        value: e.target.value[0]?.toString() || '',
+                      },
+                    })
+                  }}
+                  name="transport"
+                  options={transportOptions}
+                  className="mt-1"
+                  placeholder="Выберите способ перевозки"
+                  noOptionsMessage="Нет доступных способов перевозки"
+                />
+              </div>
+            </div>
+
+            {/* маршрут */}
+            <div>
+              <h2 className="mb-2 text-xl font-medium text-gray-900">Маршрут</h2>
+
+              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                <div className="space-y-6">
+                  <TextInput
+                    name="country_from"
+                    value={values.country_from}
+                    handleChange={handleChange}
+                    label="Страна отправления"
+                    placeholder="Введите страну отправления"
+                    style="register"
+                  />
+                  <TextInput
+                    name="country_to"
+                    value={values.country_to}
+                    handleChange={handleChange}
+                    label="Страна назначения"
+                    placeholder="Введите страну назначения"
+                    style="register"
+                  />
+                </div>
+
+                <div className="space-y-6">
+                  <TextInput
+                    name="city_to"
+                    value={values.city_to}
+                    handleChange={handleChange}
+                    label="Город назначения"
+                    placeholder="Введите город назначения"
+                    style="register"
+                  />
+
+                  <TextInput
+                    name="country_to"
+                    value={values.country_to}
+                    handleChange={handleChange}
+                    label="Страна назначения"
+                    placeholder="Введите страну назначения"
+                    style="register"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* даты */}
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+              <div>
+                <label htmlFor="departure" className="block text-sm font-medium text-gray-700">
+                  Дата отправления
+                </label>
+                <input
+                  type="datetime-local"
+                  name="departure"
+                  id="departure"
+                  value={values.departure}
+                  onChange={handleChange}
+                  min={today}
+                  className="mt-1 block w-full rounded-xl border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="arrival" className="block text-sm font-medium text-gray-700">
+                  Дата прибытия
+                </label>
+                <input
+                  type="datetime-local"
+                  name="arrival"
+                  id="arrival"
+                  value={values.arrival}
+                  onChange={handleChange}
+                  min={values.departure || today}
+                  className="mt-1 block w-full rounded-xl border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                />
+              </div>
+            </div>
+
+            {/* контактная информация */}
+            <h2 className="mb-2 text-xl font-medium text-gray-900">Контактная информация</h2>
+            <div className="space-y-6">
+              <PhoneInput
+                value={values.contact_number}
+                handleChange={handleChange}
+                label="Контактный телефон"
+                operatorsInfo={false}
+              />
+
+              <TextAreaInput
+                value={values.comment}
+                handleChange={handleChange}
+                label="Комментарий"
+                placeholder="Дополнительная информация о грузе или пожелания"
+                name="comment"
+              />
+
+              <CheckboxInput
+                name="email_notification"
+                label="Уведомления"
+                checked={values.email_notification}
+                handleChange={handleChange}
+                enabledText="Хочу получать уведомления по email"
+                disabledText="Не получать уведомления"
+                info="Вы будете получать уведомления о важных событиях на указанный email адрес"
+              />
+            </div>
          </div>
        </div>
      </div>
-    </div>
+
+      {/* кнопки действий */}
+      <div className="flex justify-end space-x-4">
+        <Button
+          type="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-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
+        />
+
+        <Button
+          type="submit"
+          text="Создать маршрут"
+          className="bg-orange hover:bg-orange/80 focus:ring-red w-1/3 border border-gray-300 py-2 text-sm font-medium text-white shadow-sm focus:ring-2 focus:ring-offset-2 focus:outline-none"
+        />
+      </div>
+    </form>
  )
 }

--- a/frontend/app/(urls)/account/routes/page.tsx
+++ b/frontend/app/(urls)/account/routes/page.tsx
@@ -1,20 +1,7 @@
 import React from 'react'
 import { cookies } from 'next/headers'
 import { headers } from 'next/headers'
-
-interface Route {
-  id: string
-  from_city_name: string
-  to_city_name: string
-  from_country_name: string
-  to_country_name: string
-  formatted_departure: string
-  formatted_arrival: string
-  formatted_cargo_type: string
-  formatted_transport: string
-  comment?: string
-  owner_type: string
-}
+import { Route } from '@/app/types'

 async function getRoutes() {
  const cookieStore = await cookies()
--- a/frontend/app/(urls)/search/components/SearchCard.tsx
+++ b/frontend/app/(urls)/search/components/SearchCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Image, { StaticImageData } from 'next/image'
+import Image from 'next/image'
 import Button from '@/components/ui/Button'
 import { SearchCardProps } from '@/app/types/index'

@@ -41,10 +41,10 @@ const SearchCard = ({
    <>
      {/* десктоп */}
      <div className="hidden sm:block">
-        <div className="bg-white rounded-xl shadow-lg p-6 w-full my-4">
-          <div className="flex items-center justify-between mb-4">
+        <div className="my-4 w-full rounded-xl bg-white p-6 shadow-lg">
+          <div className="mb-4 flex items-center justify-between">
            <div className="flex items-center gap-5">
-              <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
+              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200">
                <Image
                  src={userImg}
                  alt={username}
@@ -56,35 +56,28 @@ const SearchCard = ({
              <div className="flex items-center gap-3">
                <div className="text-base font-semibold">{username}</div>
                <div className="text-gray-500">|</div>
-                <div
-                  className={`text-base font-semibold ${getUserRequestStyles()}`}
-                >
+                <div className={`text-base font-semibold ${getUserRequestStyles()}`}>
                  {user_request}
                </div>
                <div className="ml-1">
-                  Тип посылки:{' '}
-                  <span className="text-orange font-semibold ml-1">
-                    {cargo_type}
-                  </span>
+                  Тип посылки: <span className="text-orange ml-1 font-semibold">{cargo_type}</span>
                </div>
              </div>
            </div>
            <Button
              text="Откликнуться"
-              className="bg-orange hover:bg-orange/80 text-white px-10 py-3 text-base font-semibold transition-colors cursor-pointer"
+              className="bg-orange hover:bg-orange/80 cursor-pointer px-10 py-3 text-base font-semibold text-white transition-colors"
            />
          </div>

-          <div className="bg-[#f8f8f8] rounded-lg p-5">
+          <div className="rounded-lg bg-[#f8f8f8] p-5">
            <div className="flex items-baseline gap-2">
              <span className="text-gray-600">{user_comment}</span>
            </div>
          </div>
-          <div className="text-gray-500 text-sm flex justify-end pt-2">
-            Объявление № {id}
-          </div>
+          <div className="flex justify-end pt-2 text-sm text-gray-500">Объявление № {id}</div>

-          <div className="flex items-center justify-between mt-6">
+          <div className="mt-6 flex items-center justify-between">
            <div className="flex flex-col">
              {user_request === 'Нужен перевозчик' ? (
                <span className="text-gray-500">Забрать из:</span>
@@ -93,25 +86,16 @@ const SearchCard = ({
              )}
              <div className="flex flex-col">
                <div className="flex items-center">
-                  <Image
-                    src={country_from_icon}
-                    width={26}
-                    height={13}
-                    alt={country_from_code}
-                  />
-                  <span className="text-gray-400 pr-2 pl-1">
-                    {country_from_code}
-                  </span>
+                  <Image src={country_from_icon} width={26} height={13} alt={country_from_code} />
+                  <span className="pr-2 pl-1 text-gray-400">{country_from_code}</span>
                  <span className="text-base font-semibold">
                    {start_point} / {country_from}
                  </span>
                </div>
                {user_request === 'Могу перевезти' && (
-                  <div className="text-sm text-gray-500 mt-1">
+                  <div className="mt-1 text-sm text-gray-500">
                    <span className="text-sm font-normal">Отправление:</span>{' '}
-                    <span className="text-sm font-semibold">
-                      {day_out?.toLocaleDateString()}
-                    </span>
+                    <span className="text-sm font-semibold">{day_out?.toLocaleDateString()}</span>
                  </div>
                )}
              </div>
@@ -125,10 +109,10 @@ const SearchCard = ({
                  width={15}
                  height={15}
                  alt="route vector"
-                  className="w-[15px] h-[15px] object-contain"
+                  className="h-[15px] w-[15px] object-contain"
                />
              </div>
-              <div className="flex items-center justify-between w-[500px] mx-auto my-1">
+              <div className="mx-auto my-1 flex w-[500px] items-center justify-between">
                <Image
                  src="/images/vector.svg"
                  width={500}
@@ -136,8 +120,8 @@ const SearchCard = ({
                  alt="route vector"
                  className="absolute"
                />
-                <div className="w-5 h-5 rounded-full bg-white border-3 border-[#065bff] relative z-10" />
-                <div className="w-5 h-5 rounded-full bg-white border-3 border-[#45c226] relative z-10" />
+                <div className="relative z-10 h-5 w-5 rounded-full border-3 border-[#065bff] bg-white" />
+                <div className="relative z-10 h-5 w-5 rounded-full border-3 border-[#45c226] bg-white" />
              </div>

              {user_request === 'Нужен перевозчик' && (
@@ -150,7 +134,7 @@ const SearchCard = ({
              )}
            </div>

-            <div className="flex flex-col -mb-[14px]">
+            <div className="-mb-[14px] flex flex-col">
              {user_request === 'Нужен перевозчик' ? (
                <div className="text-base text-gray-500">Доставить в:</div>
              ) : (
@@ -159,15 +143,8 @@ const SearchCard = ({

              <div className="flex flex-col">
                <div className="flex items-center">
-                  <Image
-                    src={country_to_icon}
-                    width={26}
-                    height={13}
-                    alt={country_to_code}
-                  />
-                  <span className="text-gray-400 pr-2 pl-1">
-                    {country_to_code}
-                  </span>
+                  <Image src={country_to_icon} width={26} height={13} alt={country_to_code} />
+                  <span className="pr-2 pl-1 text-gray-400">{country_to_code}</span>
                  <span className="text-base font-semibold">
                    {end_point} / {country_to}
                  </span>
@@ -175,9 +152,7 @@ const SearchCard = ({
                {user_request === 'Могу перевезти' && (
                  <div className="text-sm text-gray-500">
                    <span className="text-sm font-normal">Прибытие:</span>{' '}
-                    <span className="text-sm font-semibold">
-                      {day_in?.toLocaleDateString()}
-                    </span>
+                    <span className="text-sm font-semibold">{day_in?.toLocaleDateString()}</span>
                  </div>
                )}
              </div>
@@ -188,41 +163,37 @@ const SearchCard = ({

      {/* мобилка */}
      <div className="block sm:hidden">
-        <div className="bg-white rounded-xl shadow-lg p-4 w-full my-4">
+        <div className="my-4 w-full rounded-xl bg-white p-4 shadow-lg">
          <div className="flex items-center justify-between">
-            <div className={`text-sm font-semibold ${getUserRequestStyles()}`}>
-              {user_request}
-            </div>
+            <div className={`text-sm font-semibold ${getUserRequestStyles()}`}>{user_request}</div>
            <div className="text-sm font-semibold">
              Тип посылки: <span className="text-orange">{cargo_type}</span>
            </div>
          </div>
-          <div className="flex flex-row items-center justify-between mt-5 mb-2 gap-3">
-            <div className="min-w-[64px] w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center shrink-0">
+          <div className="mt-5 mb-2 flex flex-row items-center justify-between gap-3">
+            <div className="flex h-16 w-16 min-w-[64px] shrink-0 items-center justify-center rounded-full bg-gray-200">
              <Image
                src={userImg}
                alt={username}
                width={52}
                height={52}
-                className="rounded-full object-cover aspect-square w-[52px] h-[52px]"
+                className="aspect-square h-[52px] w-[52px] rounded-full object-cover"
              />
            </div>
-            <div className="bg-[#f8f8f8] rounded-lg text-sm font-normal p-4 flex-1">
+            <div className="flex-1 rounded-lg bg-[#f8f8f8] p-4 text-sm font-normal">
              {user_comment}
            </div>
          </div>
-          <div className="text-gray-500 text-xs flex justify-end">
-            Объявление № {id}
-          </div>
+          <div className="flex justify-end text-xs text-gray-500">Объявление № {id}</div>

          {user_request === 'Нужен перевозчик' ? (
-            <span className="text-gray-500 pl-7 text-sm">Забрать из:</span>
+            <span className="pl-7 text-sm text-gray-500">Забрать из:</span>
          ) : (
-            <span className="text-gray-500 pl-7 text-sm">Выезжаю из:</span>
+            <span className="pl-7 text-sm text-gray-500">Выезжаю из:</span>
          )}
-          <div className="flex flex-row items-stretch mt-4 mb-2 gap-4">
-            <div className="flex flex-col items-center h-[150px] relative">
-              <div className="h-full w-[10px] flex items-center justify-center relative">
+          <div className="mt-4 mb-2 flex flex-row items-stretch gap-4">
+            <div className="relative flex h-[150px] flex-col items-center">
+              <div className="relative flex h-full w-[10px] items-center justify-center">
                <Image
                  src="/images/vectormob.png"
                  width={6}
@@ -230,44 +201,35 @@ const SearchCard = ({
                  alt="route vector"
                  className="absolute h-[150px] w-auto"
                />
-                <div className="absolute -top-[10px] w-4 h-4 rounded-full bg-white border-3 border-[#065bff] z-10" />
-                <div className="absolute -bottom-[10px] w-4 h-4 rounded-full bg-white border-3 border-[#45c226] z-10" />
+                <div className="absolute -top-[10px] z-10 h-4 w-4 rounded-full border-3 border-[#065bff] bg-white" />
+                <div className="absolute -bottom-[10px] z-10 h-4 w-4 rounded-full border-3 border-[#45c226] bg-white" />
              </div>
            </div>
-            <div className="flex-1 flex flex-col justify-between">
-              <div className="flex items-center -mt-[14px]">
-                <Image
-                  src={country_from_icon}
-                  width={26}
-                  height={13}
-                  alt={country_from_code}
-                />
-                <span className="text-gray-400 text-sm pr-2 pl-1">
-                  {country_from_code}
-                </span>
+            <div className="flex flex-1 flex-col justify-between">
+              <div className="-mt-[14px] flex items-center">
+                <Image src={country_from_icon} width={26} height={13} alt={country_from_code} />
+                <span className="pr-2 pl-1 text-sm text-gray-400">{country_from_code}</span>
                <span className="text-base font-semibold">
                  {start_point} / {country_from}
                </span>
              </div>

-              <div className="flex flex-col ">
-                <div className="flex gap-4 items-center">
+              <div className="flex flex-col">
+                <div className="flex items-center gap-4">
                  <span className="text-base">{moving_type}</span>
                  <Image
                    src={setMovingTypeIcon()}
                    width={15}
                    height={15}
                    alt="route vector"
-                    className="w-[15px] h-[15px] object-contain"
+                    className="h-[15px] w-[15px] object-contain"
                  />
                </div>
-                <div className="w-[165px] h-[2px] bg-gray-200 my-2" />
-                <div className="text-sm">
-                  Дата доставки: {estimated_date.toLocaleDateString()}
-                </div>
+                <div className="my-2 h-[2px] w-[165px] bg-gray-200" />
+                <div className="text-sm">Дата доставки: {estimated_date.toLocaleDateString()}</div>
              </div>

-              <div className="flex flex-col -mb-[14px]">
+              <div className="-mb-[14px] flex flex-col">
                {user_request === 'Нужен перевозчик' ? (
                  <div className="text-sm text-gray-500">Доставить в:</div>
                ) : (
@@ -275,15 +237,8 @@ const SearchCard = ({
                )}

                <div className="flex items-center">
-                  <Image
-                    src={country_to_icon}
-                    width={26}
-                    height={13}
-                    alt={country_to_code}
-                  />
-                  <span className="text-gray-400 pr-2 pl-1">
-                    {country_to_code}
-                  </span>
+                  <Image src={country_to_icon} width={26} height={13} alt={country_to_code} />
+                  <span className="pr-2 pl-1 text-gray-400">{country_to_code}</span>
                  <span className="text-base font-semibold">
                    {end_point} / {country_to}
                  </span>
@@ -292,11 +247,9 @@ const SearchCard = ({
            </div>
          </div>
          {user_request === 'Могу перевезти' && (
-            <div className="text-sm text-gray-500 mt-3 ml-7">
+            <div className="mt-3 ml-7 text-sm text-gray-500">
              <span className="text-sm font-normal">Прибытие:</span>{' '}
-              <span className="text-sm font-semibold">
-                {day_in?.toLocaleDateString()}
-              </span>
+              <span className="text-sm font-semibold">{day_in?.toLocaleDateString()}</span>
            </div>
          )}
        </div>