diff --git a/src/app/profile/components/ProfileSidebar.tsx b/src/app/profile/components/ProfileSidebar.tsx new file mode 100644 index 0000000..c86fe73 --- /dev/null +++ b/src/app/profile/components/ProfileSidebar.tsx @@ -0,0 +1,55 @@ +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { cn } from "@/lib/utils"; + +interface MenuItem { + label: string; + href: string; + icon?: string; +} + +const menuItems: MenuItem[] = [ + { label: "Дашборд", href: "/profile/dashboard" }, + { label: "Мои яхты", href: "/profile/yachts" }, + { label: "Мои брони", href: "/profile/reservations" }, + { label: "Заказы", href: "/profile/orders" }, + { label: "Календарь", href: "/profile/calendar" }, + { label: "Избранное", href: "/profile/favorites" }, + { label: "Аккаунт", href: "/profile/account" }, + { label: "Выйти", href: "/profile/logout" }, +]; + +export default function ProfileSidebar() { + const pathname = usePathname(); + + return ( + + ); +} diff --git a/src/app/profile/reservations/page.tsx b/src/app/profile/reservations/page.tsx new file mode 100644 index 0000000..78a3d4f --- /dev/null +++ b/src/app/profile/reservations/page.tsx @@ -0,0 +1,286 @@ +"use client"; + +import { useState } from "react"; +import Link from "next/link"; +import Image from "next/image"; +import ProfileSidebar from "@/app/profile/components/ProfileSidebar"; +import { User, Clock, MoveHorizontal, Users } from "lucide-react"; + +interface Reservation { + id: string; + yachtName: string; + yachtImage: string; + ownerName: string; + ownerAvatar?: string; + length: number; + capacity: number; + departureDate: string; + departureTime: string; + arrivalDate: string; + arrivalTime: string; + guests: number; + paymentType: string; + totalPrice: number; + paymentStatus: "pending" | "paid" | "confirmed"; +} + +// Моковые данные для демонстрации +const mockReservations: Record = { + new: [ + { + id: "1", + yachtName: "KALLISTE", + yachtImage: "/images/yachts/yacht1.jpg", + ownerName: "Денис", + length: 14, + capacity: 10, + departureDate: "9 Авг, 2025", + departureTime: "00:00", + arrivalDate: "9 Авг, 2025", + arrivalTime: "02:00", + guests: 1, + paymentType: "Полная оплата", + totalPrice: 52800, + paymentStatus: "pending", + }, + { + id: "2", + yachtName: "Señorita", + yachtImage: "/images/yachts/yacht2.jpg", + ownerName: "Денис", + length: 14, + capacity: 10, + departureDate: "17 Авг, 2025", + departureTime: "00:00", + arrivalDate: "17 Авг, 2025", + arrivalTime: "03:00", + guests: 1, + paymentType: "Полная оплата", + totalPrice: 75240, + paymentStatus: "pending", + }, + ], + active: [], + confirmed: [], + archive: [], +}; + +export default function ReservationsPage() { + const [activeTab, setActiveTab] = useState<"new" | "active" | "confirmed" | "archive">("new"); + const reservations = mockReservations[activeTab]; + + const formatPrice = (price: number): string => { + return new Intl.NumberFormat("ru-RU").format(price) + " Р"; + }; + + return ( +
+
+ {/* Breadcrumbs */} +
+ + + Аренда яхты + + + > + + + Личный кабинет + + + > + Мои брони +
+ +
+ {/* Sidebar */} + + + {/* Main Content */} +
+ {/* Tabs */} +
+ + + + +
+ + {/* Reservations List */} +
+ {reservations.length === 0 ? ( +
+ Нет бронирований в этой категории +
+ ) : ( + reservations.map((reservation, index) => ( +
+
+
+ {/* Image Section */} +
+ {reservation.yachtName} + {/* Owner Info Overlay */} +
+
+ +
+ + Владелец + + + {reservation.ownerName} + +
+
+
+ {/* Yacht Details Overlay */} +
+
+
+ + + {reservation.length} метров + +
+
+ +
+
+ + {reservation.capacity} +
+
+
+
+ + {/* Details Section */} +
+
+
+
+
+
+ Выход: +
+
+ {reservation.departureDate} -{" "} + {reservation.departureTime} +
+
+
+
+ Заход: +
+
+ {reservation.arrivalDate} -{" "} + {reservation.arrivalTime} +
+
+
+
+ Гости: +
+
+ {reservation.guests} +
+
+
+
+ Тип оплаты: +
+
+ {reservation.paymentType} +
+
+
+ + + По местному времени яхты + +
+
+
+
+
+ + Итого:{" "} + {formatPrice( + reservation.totalPrice + )}{" "}{reservation.paymentStatus === + "pending" && ( + + (в ожидании оплаты) + + )} + + +
+
+
+
+
+
+
+ )) + )} +
+
+
+
+
+ ); +} diff --git a/src/app/profile/yachts/add/page.tsx b/src/app/profile/yachts/add/page.tsx new file mode 100644 index 0000000..1e306fe --- /dev/null +++ b/src/app/profile/yachts/add/page.tsx @@ -0,0 +1,525 @@ +"use client"; + +import { useState } from "react"; +import Link from "next/link"; +import ProfileSidebar from "@/app/profile/components/ProfileSidebar"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Label } from "@/components/ui/label"; +import { Info, X, Plus, Minus } from "lucide-react"; + +interface Cabin { + id: string; + name: string; + count: number; + type: string; +} + +export default function AddYachtPage() { + const [cabins, setCabins] = useState([ + { id: "1", name: "Мастер Каюта", count: 1, type: "Односпальная" }, + { id: "2", name: "Гостевая каюта 1", count: 1, type: "" }, + ]); + + const addCabin = () => { + const newCabin: Cabin = { + id: Date.now().toString(), + name: `Гостевая каюта ${cabins.length}`, + count: 1, + type: "", + }; + setCabins([...cabins, newCabin]); + }; + + const removeCabin = (id: string) => { + setCabins(cabins.filter((cabin) => cabin.id !== id)); + }; + + const updateCabinCount = (id: string, delta: number) => { + setCabins( + cabins.map((cabin) => + cabin.id === id + ? { ...cabin, count: Math.max(1, cabin.count + delta) } + : cabin + ) + ); + }; + + const updateCabinType = (id: string, type: string) => { + setCabins( + cabins.map((cabin) => + cabin.id === id ? { ...cabin, type } : cabin + ) + ); + }; + + return ( +
+
+ {/* Breadcrumbs */} +
+ + + Аренда яхты + + + > + + + Личный кабинет + + + > + + + Мои яхты + + + > + Добавление яхты +
+ +
+ {/* Sidebar */} + + + {/* Main Content */} +
+

+ Добавление яхты +

+ + {/* Выберите тип судна */} +
+ + +
+ + {/* Основная информация */} +
+

+ Основная информация* +

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + {/* Прибыль и время аренды */} +
+
+
+ +
+ + $ + + + +
+
+
+ + +
+
+
+ + {/* Тип оплаты */} +
+

+ Тип оплаты +

+
+
+ + +
+
+ + +
+
+
+ + {/* Промоцены */} +
+
+

+ Промоцены +

+ +
+
+ + {/* Синхронизация Google Календаря */} +
+ + +
+ + {/* Загрузка изображений */} +
+
+ + +
+
+
+
+ + + + + +
+

+ Загрузите изображения судна (в высоком разрешении)* +

+
+
+
+ + {/* Характеристики */} +
+

+ Характеристики* +

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + {/* Удобства */} +
+

+ Удобства +

+
+ {/* Здесь будут чекбоксы для удобств */} +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + {/* Описание */} +
+
+

+ Описание (5000) +

+ +
+