Compare commits
2 Commits
48d4db0e77
...
bb833d956e
| Author | SHA1 | Date | |
|---|---|---|---|
|
bb833d956e | ||
|
|
b1cab4a2ab |
@@ -2,16 +2,19 @@
|
|||||||
|
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useAuth } from "../app/context/AuthContext";
|
||||||
|
|
||||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
|
||||||
const AuthPage = () => {
|
const AuthPage = () => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const { login } = useAuth();
|
||||||
|
|
||||||
const [email, setEmail] = useState("");
|
const [email, setEmail] = useState("");
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
const [rememberMe, setRememberMe] = useState(false);
|
const [rememberMe, setRememberMe] = useState(false);
|
||||||
const [checkboxError, setCheckboxError] = useState(false);
|
const [checkboxError, setCheckboxError] = useState(false);
|
||||||
|
const [authError, setAuthError] = useState("");
|
||||||
|
|
||||||
const isEmailValid = emailRegex.test(email);
|
const isEmailValid = emailRegex.test(email);
|
||||||
const isFormValid = isEmailValid && password.length > 0;
|
const isFormValid = isEmailValid && password.length > 0;
|
||||||
@@ -19,39 +22,40 @@ const AuthPage = () => {
|
|||||||
const handleSubmit = (e) => {
|
const handleSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
// проверка чекбокса
|
|
||||||
if (!rememberMe) {
|
if (!rememberMe) {
|
||||||
setCheckboxError(true);
|
setCheckboxError(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setCheckboxError(false);
|
setCheckboxError(false);
|
||||||
|
|
||||||
if (!isFormValid) return;
|
if (!isFormValid) return;
|
||||||
|
|
||||||
console.log("Email:", email, "Password:", password, "Remember:", rememberMe);
|
try {
|
||||||
router.push('./home');
|
setAuthError("");
|
||||||
|
login(email, password);
|
||||||
|
} catch (err) {
|
||||||
|
setAuthError(err.message || "Неверный логин или пароль");
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen w-full bg-[#90D2F9] flex items-center justify-center px-4">
|
<div className="min-h-screen w-full bg-[#90D2F9] flex items-center justify-center px-4">
|
||||||
<div className="w-full max-w-md bg-white/10 rounded-2xl p-6 sm:p-8 shadow-lg relative">
|
<div className="w-full max-w-md bg-white/10 rounded-2xl p-6 sm:p-8 shadow-lg relative">
|
||||||
{/* Красный баннер ошибки по чекбоксу */}
|
{/* Красный баннер ошибок */}
|
||||||
{checkboxError && (
|
{(checkboxError || authError) && (
|
||||||
<div
|
<div
|
||||||
className="absolute -top-10 left-0 w-full bg-red-500 text-white text-xs sm:text-sm font-montserrat px-3 py-2 rounded-t-2xl flex items-center justify-center shadow-md"
|
className="absolute -top-10 left-0 w-full bg-red-500 text-white text-xs sm:text-sm font-montserrat px-3 py-2 rounded-t-2xl flex items-center justify-center shadow-md"
|
||||||
role="alert"
|
role="alert"
|
||||||
>
|
>
|
||||||
Вы не согласны с условиями использования
|
{checkboxError
|
||||||
|
? "Вы не согласны с условиями использования"
|
||||||
|
: authError || "Неверный логин или пароль"}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<h1 className="font-montserrat text-white font-extrabold text-2xl text-center">
|
<h1 className="font-montserrat text-white font-extrabold text-2xl text-center">
|
||||||
Авторизация
|
Авторизация
|
||||||
</h1>
|
</h1>
|
||||||
{/* <p className="font-montserrat text-white text-sm text-center mt-1">
|
|
||||||
как пользователь
|
|
||||||
</p> */}
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
|
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
|
||||||
{/* Почта */}
|
{/* Почта */}
|
||||||
@@ -93,7 +97,8 @@ const AuthPage = () => {
|
|||||||
setRememberMe((prev) => !prev);
|
setRememberMe((prev) => !prev);
|
||||||
if (!rememberMe) setCheckboxError(false);
|
if (!rememberMe) setCheckboxError(false);
|
||||||
}}
|
}}
|
||||||
className={`w-5 h-5 rounded-full border border-white flex items-center justify-center ${rememberMe ? "bg-white" : "bg-transparent"
|
className={`w-5 h-5 rounded-full border border-white flex items-center justify-center ${
|
||||||
|
rememberMe ? "bg-white" : "bg-transparent"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{rememberMe && (
|
{rememberMe && (
|
||||||
@@ -101,31 +106,18 @@ const AuthPage = () => {
|
|||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
<p className="font-montserrat text-[10px] leading-[12px] text-white">
|
<p className="font-montserrat text-[10px] leading-[12px] text-white">
|
||||||
Подтверждаю, что я прочитал условия использования данного приложения
|
Подтверждаю, что я прочитал условия использования данного
|
||||||
|
приложения
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{/* Ссылки */}
|
|
||||||
<div className="flex justify-between text-[11px] font-montserrat font-bold text-[#FF6363] mt-1">
|
|
||||||
<button type="button" className="hover:underline" onClick={() => router.push("/recPassword")}>
|
|
||||||
Забыли пароль?
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="hover:underline"
|
|
||||||
onClick={() => router.push("/reg")}
|
|
||||||
>
|
|
||||||
Регистрация
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Кнопка Войти */}
|
{/* Кнопка Войти */}
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isFormValid}
|
disabled={!isFormValid}
|
||||||
className={`mt-4 w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
|
className={`mt-4 w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
|
||||||
${isFormValid
|
${
|
||||||
|
isFormValid
|
||||||
? "bg-green-500 text-white hover:bg-green-600"
|
? "bg-green-500 text-white hover:bg-green-600"
|
||||||
: "bg-white text-[#C4C4C4] cursor-not-allowed"
|
: "bg-white text-[#C4C4C4] cursor-not-allowed"
|
||||||
}`}
|
}`}
|
||||||
@@ -133,6 +125,14 @@ const AuthPage = () => {
|
|||||||
Войти
|
Войти
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
{/* Подсказка по тестовым логинам */}
|
||||||
|
<div className="mt-4 text-[15px] text-white font-mонтserrat space-y-1">
|
||||||
|
<p>Тестовые аккаунты:</p>
|
||||||
|
<p>Пользователь: user@mail.com / user123</p>
|
||||||
|
<p>Волонтёр: vol@mail.com / vol123</p>
|
||||||
|
<p>Модератор: mod@mail.com / mod123</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
216
app/components/ModeratorRequestDetailsModal.jsx
Normal file
216
app/components/ModeratorRequestDetailsModal.jsx
Normal file
@@ -0,0 +1,216 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
|
||||||
|
const ModeratorRequestModal = ({ request, onClose, onApprove, onReject }) => {
|
||||||
|
const [showRejectPopup, setShowRejectPopup] = useState(false);
|
||||||
|
const [rejectReason, setRejectReason] = useState("");
|
||||||
|
|
||||||
|
const isApproved = request.status === "Принята";
|
||||||
|
const isRejected = request.status === "Отклонена";
|
||||||
|
const isPending = !isApproved && !isRejected; // на модерации
|
||||||
|
|
||||||
|
const handleApprove = () => {
|
||||||
|
onApprove?.({ ...request, status: "Принята" });
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRejectConfirm = () => {
|
||||||
|
onReject?.({
|
||||||
|
...request,
|
||||||
|
status: "Отклонена",
|
||||||
|
rejectReason: rejectReason,
|
||||||
|
});
|
||||||
|
setShowRejectPopup(false);
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* основной экран модерации во весь экран */}
|
||||||
|
<div className="fixed inset-0 z-40 flex flex-col bg-[#90D2F9] px-4 pt-4 pb-20">
|
||||||
|
{/* хедер */}
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-white w-8 h-8 rounded-full flex items-center justify-center text-xl"
|
||||||
|
>
|
||||||
|
←
|
||||||
|
</button>
|
||||||
|
<p className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
|
||||||
|
Заявка от {request.date || "28.11.25"}
|
||||||
|
</p>
|
||||||
|
<span className="w-8" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* белая карточка во всю ширину контейнера */}
|
||||||
|
<div className="flex-1 flex items-start justify-center">
|
||||||
|
<div className="w-full max-w-[400px] bg-white rounded-2xl p-4 flex flex-col gap-4 shadow-lg">
|
||||||
|
{/* верхняя полоса: Описание + Дата + Время */}
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-2 flex items-center justify-between">
|
||||||
|
<span className="text-[14px] font-montserrat font-bold text-white">
|
||||||
|
Описание
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<div className="min-w-[80px] bg-[#72B8E2] rounded-[10px] flex flex-col items-center justify-center border border-white/30 px-2 py-1">
|
||||||
|
<span className="text-[12px] font-montserrat font-bold text-white">
|
||||||
|
Дата
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] font-montserrat text-white">
|
||||||
|
{request.date || "28.11.2025"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="min-w-[80px] bg-[#72B8E2] rounded-[10px] flex flex-col items-center justify-center border border-white/30 px-2 py-1">
|
||||||
|
<span className="text-[12px] font-montserrat font-bold text-white">
|
||||||
|
Время
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] font-montserrat text-white">
|
||||||
|
{request.time || "13:00"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* блок ФИО / адрес */}
|
||||||
|
<div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-2 flex flex-col gap-1">
|
||||||
|
<span className="text-[14px] font-montserrat font-bold text-white">
|
||||||
|
ФИО
|
||||||
|
</span>
|
||||||
|
<p className="text-[12px] font-montserrat text-white leading-[16px]">
|
||||||
|
{request.fullName || "Клавдия Березова"}
|
||||||
|
</p>
|
||||||
|
<p className="text-[12px] font-montserrat text-white leading-[14px]">
|
||||||
|
{request.address || "г. Пермь, ул. Ленина 50"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* статус + сроки */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div
|
||||||
|
className={`px-3 py-1 rounded-[10px] flex items-center justify-center ${isApproved
|
||||||
|
? "bg-[#94E067]"
|
||||||
|
: isRejected
|
||||||
|
? "bg-[#E06767]"
|
||||||
|
: "bg-[#E9D171]"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="text-[12px] font-montserrat font-semibold text-black">
|
||||||
|
{isApproved
|
||||||
|
? "Принята"
|
||||||
|
: isRejected
|
||||||
|
? "Отклонена"
|
||||||
|
: "Модерация"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-end text-[12px] font-montserrat font-light text-black leading-[14px]">
|
||||||
|
<span>До {request.deadline || "28.11.2025"}</span>
|
||||||
|
<span>{request.deadlineTime || "13:00"}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Заголовок задачи */}
|
||||||
|
<p className="text-[16px] leading-[20px] font-montserrat font-semibold text-black">
|
||||||
|
{request.title || "Приобрести продукты пенсионерке"}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* краткое описание / товары */}
|
||||||
|
{request.description && (
|
||||||
|
<div className="flex-1 bg-[#F2F2F2] rounded-[10px] px-3 py-2 overflow-y-auto">
|
||||||
|
<p className="text-[12px] leading-[16px] font-montserrat text-black whitespace-pre-line">
|
||||||
|
{request.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* если заявка уже отклонена — показать причину */}
|
||||||
|
{isRejected && (
|
||||||
|
<div className="w-full bg-[#FFE2E2] rounded-[10px] px-3 py-2">
|
||||||
|
<p className="text-[14px] font-montserrat font-bold text-[#E06767] mb-1">
|
||||||
|
Причина отклонения
|
||||||
|
</p>
|
||||||
|
<p className="text-[12px] font-montserrat text-black whitespace-pre-line">
|
||||||
|
{request.rejectReason && request.rejectReason.trim().length > 0
|
||||||
|
? request.rejectReason
|
||||||
|
: "Причина не указана"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* нижняя панель с кнопками — только если заявка ещё на модерации */}
|
||||||
|
{isPending && (
|
||||||
|
<div className="mt-4 w-full max-w-[400px] mx-auto flex items-center justify-between gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleApprove}
|
||||||
|
className="flex-1 h-10 bg-[#94E067] rounded-[10px] flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<span className="text-[14px] font-montserrat font-bold text-white">
|
||||||
|
Принять
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowRejectPopup(true)}
|
||||||
|
className="flex-1 h-10 bg-[#E06767] rounded-[10px] flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<span className="text-[14px] font-montserrat font-bold text-white">
|
||||||
|
Отклонить
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* попап причины отказа во весь экран */}
|
||||||
|
{showRejectPopup && (
|
||||||
|
<div className="fixed inset-0 z-50 flex flex-col bg-[rgba(101,101,101,0.72)] px-4 pt-8 pb-6">
|
||||||
|
<div className="w-full max-w-[400px] mx-auto bg-white rounded-t-[15px] flex flex-col items-center px-4 pt-4 pb-4">
|
||||||
|
{/* заголовок */}
|
||||||
|
<p className="font-montserrat font-bold text-[20px] leading-[24px] text-black mb-3">
|
||||||
|
Причина
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* голубой блок с текстом */}
|
||||||
|
<div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-3 mb-4 max-h-[50vh]">
|
||||||
|
<textarea
|
||||||
|
value={rejectReason}
|
||||||
|
onChange={(e) => setRejectReason(e.target.value)}
|
||||||
|
className="w-full h-full bg-transparent text-[14px] leading-[18px] font-montserrat text-black placeholder:text-black/60 outline-none resize-none"
|
||||||
|
placeholder="Опишите причину отклонения заявки"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* кнопки */}
|
||||||
|
<div className="w-full flex flex-col gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleRejectConfirm}
|
||||||
|
className="w-full h-10 bg-[#E06767] rounded-[10px] flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<span className="text-[16px] font-montserrat font-bold text-white">
|
||||||
|
Подтвердить
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowRejectPopup(false)}
|
||||||
|
className="w-full h-10 bg-white rounded-[10px] border border-[#E06767] flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<span className="text-[14px] font-montserrat font-semibold text-[#E06767]">
|
||||||
|
Отмена
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModeratorRequestModal;
|
||||||
@@ -2,41 +2,59 @@
|
|||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { FaClock, FaNewspaper, FaHome, FaCog } from "react-icons/fa";
|
import { FaClock, FaNewspaper, FaHome, FaCog } from "react-icons/fa";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter, usePathname } from "next/navigation";
|
||||||
|
import { useAuth } from "../context/AuthContext";
|
||||||
|
|
||||||
const TabBar = () => {
|
const TabBar = () => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const pathname = usePathname();
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
|
if (!user) return null; // не показываем таббар, если не залогинен
|
||||||
|
|
||||||
|
// маршруты по ролям
|
||||||
|
const routesByRole = {
|
||||||
|
user: [
|
||||||
|
{ key: "home", icon: FaHome, href: "/createRequest" },
|
||||||
|
{ key: "history", icon: FaClock, href: "/historyRequest" },
|
||||||
|
{ key: "news", icon: FaNewspaper, href: "/news" },
|
||||||
|
{ key: "profile", icon: FaCog, href: "/ProfilePage" },
|
||||||
|
],
|
||||||
|
volunteer: [
|
||||||
|
{ key: "home", icon: FaHome, href: "/mainValounter" },
|
||||||
|
{ key: "history", icon: FaClock, href: "/valounterHistoryRequest" },
|
||||||
|
{ key: "news", icon: FaNewspaper, href: "/volunteer/news" },
|
||||||
|
{ key: "profile", icon: FaCog, href: "/valounterProfilePage" },
|
||||||
|
],
|
||||||
|
moderator: [
|
||||||
|
{ key: "queue", icon: FaHome, href: "/moderatorMain" },
|
||||||
|
{ key: "history", icon: FaClock, href: "/moderatorHistoryRequest" },
|
||||||
|
{ key: "news", icon: FaNewspaper, href: "/moderator/news" },
|
||||||
|
{ key: "profile", icon: FaCog, href: "/moderatorProfilePage" },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const tabs = routesByRole[user.role] || [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="fixed bottom-0 left-0 right-0 flex justify-center">
|
<nav className="fixed bottom-0 left-0 right-0 flex justify-center">
|
||||||
<div className="w-full max-w-md bg-white rounded-t-xl flex items-center justify-around py-4 shadow-inner">
|
<div className="w-full max-w-md bg-white rounded-t-xl flex items-center justify-around py-4 shadow-inner">
|
||||||
|
{tabs.map((tab) => {
|
||||||
|
const Icon = tab.icon;
|
||||||
|
const active = pathname === tab.href;
|
||||||
|
return (
|
||||||
<button
|
<button
|
||||||
|
key={tab.key}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => router.push("/createRequest")}
|
onClick={() => router.push(tab.href)}
|
||||||
className="flex flex-col items-center gap-1 text-[#90D2F9]"
|
className={`flex flex-col items-center gap-1 ${
|
||||||
|
active ? "text-[#90D2F9]" : "text-gray-400"
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<FaHome size={20} />
|
<Icon size={20} />
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => router.push("/historyRequest")}
|
|
||||||
className="flex flex-col items-center gap-1 text-[#90D2F9]"
|
|
||||||
>
|
|
||||||
<FaClock size={20} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex flex-col items-center gap-1 text-[#90D2F9]"
|
|
||||||
>
|
|
||||||
<FaNewspaper size={20} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => router.push("/ProfilePage")}
|
|
||||||
className="flex flex-col items-center gap-1 text-[#90D2F9]"
|
|
||||||
>
|
|
||||||
<FaCog size={20} />
|
|
||||||
</button>
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
|
|||||||
153
app/components/ValounterRequestDetailsModal.jsx
Normal file
153
app/components/ValounterRequestDetailsModal.jsx
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { FaStar } from "react-icons/fa";
|
||||||
|
|
||||||
|
const RequestDetailsModal = ({ request, onClose }) => {
|
||||||
|
const isDone = request.status === "Выполнена";
|
||||||
|
const isInProgress = request.status === "В процессе";
|
||||||
|
|
||||||
|
const [rating, setRating] = useState(0);
|
||||||
|
const [review, setReview] = useState("");
|
||||||
|
|
||||||
|
const handleStarClick = (value) => {
|
||||||
|
setRating(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
console.log("Отправить отзыв:", {
|
||||||
|
id: request.id,
|
||||||
|
status: request.status,
|
||||||
|
rating,
|
||||||
|
review,
|
||||||
|
});
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-40 flex flex-col bg-[#90D2F9] px-4 pt-4 pb-20">
|
||||||
|
{/* Хедер */}
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-white w-7 h-7 rounded-full flex items-center justify-center text-lg"
|
||||||
|
>
|
||||||
|
←
|
||||||
|
</button>
|
||||||
|
<p className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
|
||||||
|
Заявка от {request.createdAt}
|
||||||
|
</p>
|
||||||
|
<span className="w-7" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Карточка */}
|
||||||
|
<div className="flex-1 flex items-start justify-center">
|
||||||
|
<div className="w-full max-w-[360px] bg-white rounded-2xl p-4 flex flex-col gap-4 shadow-lg">
|
||||||
|
{/* Статус + дата/время */}
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<span
|
||||||
|
className="inline-flex items-center justify-center px-3 py-1 rounded-full font-montserrat text-[10px] font-semibold text-white"
|
||||||
|
style={{ backgroundColor: request.statusColor }}
|
||||||
|
>
|
||||||
|
{request.status}
|
||||||
|
</span>
|
||||||
|
<div className="text-right leading-tight">
|
||||||
|
<p className="font-montserrat text-[10px] text-black">
|
||||||
|
{request.date}
|
||||||
|
</p>
|
||||||
|
<p className="font-montserrat text-[10px] text-black">
|
||||||
|
{request.time}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Название задачи */}
|
||||||
|
<p className="font-montserrat font-semibold text-[16px] leading-[20px] text-black">
|
||||||
|
{request.title}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Полная информация о заявке */}
|
||||||
|
<div className="flex flex-col gap-1 text-[12px] font-montserrat text-black">
|
||||||
|
<p>ФИО: {request.fullName}</p>
|
||||||
|
<p>Адрес: {request.address}</p>
|
||||||
|
{request.flat && <p>Квартира: {request.flat}</p>}
|
||||||
|
{request.floor && <p>Этаж: {request.floor}</p>}
|
||||||
|
{request.phone && <p>Телефон: {request.phone}</p>}
|
||||||
|
{request.amount && <p>Сумма: {request.amount}</p>}
|
||||||
|
{request.deadline && <p>Выполнить до: {request.deadline}</p>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Описание / список покупок */}
|
||||||
|
{request.description && (
|
||||||
|
<div className="bg-[#E4E4E4] rounded-2xl px-3 py-2 max-h-[140px] overflow-y-auto">
|
||||||
|
<p className="text-[11px] leading-[13px] font-montserrat whitespace-pre-line">
|
||||||
|
{request.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Блок отзыва + рейтинг — и для Выполнена, и для В процессе */}
|
||||||
|
{(isDone || isInProgress) && (
|
||||||
|
<>
|
||||||
|
<div className="bg-[#72B8E2] rounded-3xl p-3 flex flex-col gap-2">
|
||||||
|
<p className="font-montserrat font-bold text-[12px] text-white">
|
||||||
|
Отзыв
|
||||||
|
</p>
|
||||||
|
<textarea
|
||||||
|
value={review}
|
||||||
|
onChange={(e) => setReview(e.target.value)}
|
||||||
|
rows={4}
|
||||||
|
className="w-full bg-[#72B8E2] rounded-2xl px-3 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none resize-none border border-white/20"
|
||||||
|
placeholder={
|
||||||
|
isDone
|
||||||
|
? "Напишите, как прошла помощь"
|
||||||
|
: "Напишите, как сейчас идёт выполнение"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-1 flex flex-col items-center gap-2">
|
||||||
|
<p className="font-montserrat font-semibold text-[14px] text-black">
|
||||||
|
Оценить Заявителя
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{[1, 2, 3, 4, 5].map((star) => (
|
||||||
|
<button
|
||||||
|
key={star}
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleStarClick(star)}
|
||||||
|
className="text-[#F6E168]"
|
||||||
|
>
|
||||||
|
<FaStar
|
||||||
|
size={26}
|
||||||
|
className={
|
||||||
|
star <= rating
|
||||||
|
? "fill-[#F6E168]"
|
||||||
|
: "fill-[#F6E168]/40"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Кнопка внизу */}
|
||||||
|
{(isDone || isInProgress) && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleSubmit}
|
||||||
|
className="mt-4 w-full max-w-[360px] mx-auto bg-[#94E067] rounded-2xl py-3 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<span className="font-montserrat font-extrabold text-[16px] text-white">
|
||||||
|
{isDone ? "Оставить отзыв" : "Сохранить прогресс"}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RequestDetailsModal;
|
||||||
89
app/context/AuthContext.jsx
Normal file
89
app/context/AuthContext.jsx
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { createContext, useContext, useState, useEffect } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
const AuthContext = createContext(null);
|
||||||
|
|
||||||
|
// фейковые пользователи (3 логина/пароля)
|
||||||
|
const USERS = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
role: "user", // обычный пользователь
|
||||||
|
name: "Пользователь",
|
||||||
|
login: "user@mail.com",
|
||||||
|
password: "user123",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
role: "volunteer",
|
||||||
|
name: "Волонтёр",
|
||||||
|
login: "vol@mail.com",
|
||||||
|
password: "vol123",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
role: "moderator",
|
||||||
|
name: "Модератор",
|
||||||
|
login: "mod@mail.com",
|
||||||
|
password: "mod123",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const AuthProvider = ({ children }) => {
|
||||||
|
const [user, setUser] = useState(null); // {id, role, name, login}
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
// Поднимаем пользователя из localStorage, чтобы контекст сохранялся между перезагрузками
|
||||||
|
useEffect(() => {
|
||||||
|
const saved = typeof window !== "undefined" ? localStorage.getItem("authUser") : null;
|
||||||
|
if (saved) {
|
||||||
|
setUser(JSON.parse(saved));
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const login = async (login, password) => {
|
||||||
|
// имитация запроса на бэк
|
||||||
|
const found = USERS.find(
|
||||||
|
(u) => u.login === login && u.password === password
|
||||||
|
);
|
||||||
|
if (!found) {
|
||||||
|
throw new Error("Неверный логин или пароль");
|
||||||
|
}
|
||||||
|
|
||||||
|
const authUser = {
|
||||||
|
id: found.id,
|
||||||
|
role: found.role,
|
||||||
|
name: found.name,
|
||||||
|
login: found.login,
|
||||||
|
};
|
||||||
|
|
||||||
|
setUser(authUser);
|
||||||
|
localStorage.setItem("authUser", JSON.stringify(authUser));
|
||||||
|
|
||||||
|
// после логина перенаправляем на стартовую страницу по роли
|
||||||
|
if (found.role === "user") router.push("/home");
|
||||||
|
if (found.role === "volunteer") router.push("/mainValounter");
|
||||||
|
if (found.role === "moderator") router.push("/moderatorMain");
|
||||||
|
};
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
setUser(null);
|
||||||
|
localStorage.removeItem("authUser");
|
||||||
|
router.push("/login");
|
||||||
|
};
|
||||||
|
|
||||||
|
const value = {
|
||||||
|
user,
|
||||||
|
loading,
|
||||||
|
isAuthenticated: !!user,
|
||||||
|
login,
|
||||||
|
logout,
|
||||||
|
};
|
||||||
|
|
||||||
|
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useAuth = () => useContext(AuthContext);
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
import { AuthProvider } from "../app/context/AuthContext";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: "Create Next App",
|
||||||
@@ -14,7 +15,7 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body className="antialiased">
|
<body className="antialiased">
|
||||||
{children}
|
<AuthProvider>{children}</AuthProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -109,7 +109,7 @@ const MainVolunteerPage = () => {
|
|||||||
<div className="w-8 h-8 rounded-full border border-white flex items-center justify-center">
|
<div className="w-8 h-8 rounded-full border border-white flex items-center justify-center">
|
||||||
<FaUser className="text-white text-sm" />
|
<FaUser className="text-white text-sm" />
|
||||||
</div>
|
</div>
|
||||||
<p className="font-montserrat font-extrabold text-[11px] leading-[11px] text-white">
|
<p className="font-montserrat font-extrabold text-[20px] leading-[11px] text-white">
|
||||||
Александр
|
Александр
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -121,7 +121,7 @@ const MainVolunteerPage = () => {
|
|||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<h1 className="font-montserrat font-extrabold text-[16px] leading-[20px] text-white mb-2">
|
<h1 className="font-montserrat font-extrabold text-[20px] leading-[20px] text-white mb-2">
|
||||||
Кому нужна помощь
|
Кому нужна помощь
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
@@ -161,14 +161,14 @@ const MainVolunteerPage = () => {
|
|||||||
className="bg-white rounded-xl px-3 py-2 flex flex-col gap-1"
|
className="bg-white rounded-xl px-3 py-2 flex flex-col gap-1"
|
||||||
onClick={() => openPopup(req)}
|
onClick={() => openPopup(req)}
|
||||||
>
|
>
|
||||||
<p className="font-montserrat font-semibold text-[12px] leading-[14px] text-black">
|
<p className="font-montserrat font-semibold text-[15px] leading-[14px] text-black">
|
||||||
{req.title}
|
{req.title}
|
||||||
</p>
|
</p>
|
||||||
<p className="font-montserrat text-[10px] text-black">
|
<p className="font-montserrat text-[15px] text-black">
|
||||||
{req.address}
|
{req.address}
|
||||||
</p>
|
</p>
|
||||||
{req.distance && (
|
{req.distance && (
|
||||||
<p className="font-montserrat text-[9px] text-gray-500">
|
<p className="font-montserrat text-[12px] text-gray-500">
|
||||||
Расстояние: {req.distance}
|
Расстояние: {req.distance}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|||||||
158
app/moderatorHistoryRequest/page.jsx
Normal file
158
app/moderatorHistoryRequest/page.jsx
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { FaBell, FaUser } from "react-icons/fa";
|
||||||
|
import TabBar from "../components/TabBar";
|
||||||
|
import ModeratorRequestModal from "../components/ModeratorRequestDetailsModal";
|
||||||
|
|
||||||
|
// история для модератора: только Принята / Отклонена
|
||||||
|
const requests = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "Приобрести продукты пенсионерке",
|
||||||
|
status: "Принята",
|
||||||
|
statusColor: "#94E067",
|
||||||
|
date: "28.11.2025",
|
||||||
|
time: "13:00",
|
||||||
|
createdAt: "28.11.2025",
|
||||||
|
fullName: "Клавдия Березова",
|
||||||
|
address: "г. Пермь, ул. Ленина 50",
|
||||||
|
description: "Купить продукты и принести по указанному адресу.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "Приобрести медикаменты",
|
||||||
|
status: "Отклонена",
|
||||||
|
statusColor: "#E06767",
|
||||||
|
date: "27.11.2025",
|
||||||
|
time: "15:30",
|
||||||
|
createdAt: "27.11.2025",
|
||||||
|
fullName: "Иванова Анна Петровна",
|
||||||
|
address: "г. Пермь, ул. Пушкина 24",
|
||||||
|
description: "Приобрести необходимые лекарства в ближайшей аптеке.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "Сопроводить до поликлиники",
|
||||||
|
status: "Принята",
|
||||||
|
statusColor: "#94E067",
|
||||||
|
date: "26.11.2025",
|
||||||
|
time: "10:00",
|
||||||
|
createdAt: "26.11.2025",
|
||||||
|
fullName: "Сидоров Николай",
|
||||||
|
address: "г. Пермь, ул. Куйбышева 95",
|
||||||
|
description: "Помочь добраться до поликлиники и обратно.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const HistoryRequestModeratorPage = () => {
|
||||||
|
const [selectedRequest, setSelectedRequest] = useState(null);
|
||||||
|
|
||||||
|
const handleOpen = (req) => {
|
||||||
|
setSelectedRequest(req);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setSelectedRequest(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleApprove = (req) => {
|
||||||
|
console.log("Подтверждение принятой заявки (история):", req.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReject = ({ request, reason }) => {
|
||||||
|
console.log("Просмотр отклонённой заявки (история):", request.id, reason);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
|
||||||
|
<div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full border border-white flex items-center justify-center">
|
||||||
|
<FaUser className="text-white text-sm" />
|
||||||
|
</div>
|
||||||
|
<p className="font-montserrat font-extrabold text-[20px] leading-[22px] text-white">
|
||||||
|
Модератор
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-8 h-8 rounded-full border border-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<FaBell className="text-white text-sm" />
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<h1 className="font-montserrat font-extrabold text-[20px] leading-[22px] text-white mb-3">
|
||||||
|
История заявок
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* Список заявок */}
|
||||||
|
<main className="space-y-3 overflow-y-auto pr-1 max-h-[80vh]">
|
||||||
|
{requests.map((req) => (
|
||||||
|
<button
|
||||||
|
key={req.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleOpen(req)}
|
||||||
|
className="w-full text-left bg-white rounded-xl px-3 py-2 flex flex-col gap-1"
|
||||||
|
>
|
||||||
|
{/* верхняя строка: статус + дата/время */}
|
||||||
|
<div className="flex items-center justify-between gap-2">
|
||||||
|
<span
|
||||||
|
className="inline-flex items-center justify-center px-2 py-0.5 rounded-full font-montserrat text-[12px] font-semibold text-white"
|
||||||
|
style={{ backgroundColor: req.statusColor }}
|
||||||
|
>
|
||||||
|
{req.status}
|
||||||
|
</span>
|
||||||
|
<div className="text-right leading-tight">
|
||||||
|
<p className="font-montserrat text-[10px] text-black">
|
||||||
|
{req.date}
|
||||||
|
</p>
|
||||||
|
<p className="font-montserrat text-[10px] text-black">
|
||||||
|
{req.time}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Заголовок заявки */}
|
||||||
|
<p className="font-montserrat font-semibold text-[15px] leading-[18px] text-black mt-1">
|
||||||
|
{req.title}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Краткое ФИО/адрес */}
|
||||||
|
<p className="font-montserrat text-[11px] text-black/80">
|
||||||
|
{req.fullName}
|
||||||
|
</p>
|
||||||
|
<p className="font-montserrat text-[10px] text-black/70">
|
||||||
|
{req.address}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Кнопка "Развернуть" */}
|
||||||
|
<div className="mt-2 w-full bg-[#94E067] rounded-lg py-3 flex items-center justify-center">
|
||||||
|
<span className="font-montserrat font-bold text-[15px] leading-[18px] text-white">
|
||||||
|
Развернуть
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Попап модератора */}
|
||||||
|
{selectedRequest && (
|
||||||
|
<ModeratorRequestModal
|
||||||
|
request={selectedRequest}
|
||||||
|
onClose={handleClose}
|
||||||
|
onApprove={handleApprove}
|
||||||
|
onReject={handleReject}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<TabBar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HistoryRequestModeratorPage;
|
||||||
238
app/moderatorMain/page.jsx
Normal file
238
app/moderatorMain/page.jsx
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { FaBell, FaUser, FaStar } from "react-icons/fa";
|
||||||
|
import TabBar from "../components/TabBar";
|
||||||
|
import RequestDetailsModal from "../components/ModeratorRequestDetailsModal";
|
||||||
|
|
||||||
|
const requests = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "Приобрести продукты пенсионерке",
|
||||||
|
status: "На модерации",
|
||||||
|
statusColor: "#E9D171",
|
||||||
|
date: "До 28.11.2025",
|
||||||
|
time: "13:00",
|
||||||
|
createdAt: "28.11.2025",
|
||||||
|
description: "Купить продукты и принести по адресу.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "Приобрести продукты пенсионерке",
|
||||||
|
status: "На модерации",
|
||||||
|
statusColor: "#E9D171",
|
||||||
|
date: "До 28.11.2025",
|
||||||
|
time: "13:00",
|
||||||
|
createdAt: "28.11.2025",
|
||||||
|
description: "Купить продукты и принести по адресу.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "Приобрести продукты пенсионерке",
|
||||||
|
status: "На модерации",
|
||||||
|
statusColor: "#E9D171",
|
||||||
|
date: "До 28.11.2025",
|
||||||
|
time: "13:00",
|
||||||
|
createdAt: "28.11.2025",
|
||||||
|
description: "Купить продукты и принести по адресу.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: "Приобрести продукты пенсионерке",
|
||||||
|
status: "На модерации",
|
||||||
|
statusColor: "#E9D171",
|
||||||
|
date: "До 28.11.2025",
|
||||||
|
time: "13:00",
|
||||||
|
createdAt: "28.11.2025",
|
||||||
|
description: "Купить продукты и принести по адресу.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: "Приобрести продукты пенсионерке",
|
||||||
|
status: "На модерации",
|
||||||
|
statusColor: "#E9D171",
|
||||||
|
date: "До 28.11.2025",
|
||||||
|
time: "13:00",
|
||||||
|
createdAt: "28.11.2025",
|
||||||
|
description: "Купить продукты и принести по адресу.",
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const HistoryRequestPage = () => {
|
||||||
|
const [selectedRequest, setSelectedRequest] = useState(null);
|
||||||
|
|
||||||
|
const handleOpen = (req) => {
|
||||||
|
setSelectedRequest(req);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setSelectedRequest(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
|
||||||
|
<div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full border border-white flex items-center justify-center">
|
||||||
|
<FaUser className="text-white text-sm" />
|
||||||
|
</div>
|
||||||
|
<p className="font-montserrat font-extrabold text-[20px] leading-[11px] text-white">
|
||||||
|
Александр
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-8 h-8 rounded-full border border-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<FaBell className="text-white text-sm" />
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<h1 className="font-montserrat font-extrabold text-[20px] leading-[22px] text-white mb-3">
|
||||||
|
История заявок
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* Список заявок */}
|
||||||
|
<main className="space-y-3 overflow-y-auto pr-1 max-h-[80vh]">
|
||||||
|
{requests.map((req) => (
|
||||||
|
<button
|
||||||
|
key={req.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleOpen(req)}
|
||||||
|
className="w-full text-left bg-white rounded-xl px-3 py-2 flex flex-col gap-1"
|
||||||
|
>
|
||||||
|
{/* верхняя строка: статус + дата/время */}
|
||||||
|
<div className="flex items-center justify-between gap-2">
|
||||||
|
<span
|
||||||
|
className="inline-flex items-center justify-center px-2 py-0.5 rounded-full font-montserrat text-[12px] font-light text-black"
|
||||||
|
style={{ backgroundColor: req.statusColor }}
|
||||||
|
>
|
||||||
|
{req.status}
|
||||||
|
</span>
|
||||||
|
<div className="text-right leading-tight">
|
||||||
|
<p className="font-montserrat text-[10px] text-black">
|
||||||
|
{req.date}
|
||||||
|
</p>
|
||||||
|
<p className="font-montserrat text-[10px] text-black">
|
||||||
|
{req.time}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Заголовок заявки */}
|
||||||
|
<p className="font-montserrat font-semibold text-[15px] leading-[18px] text-black mt-1">
|
||||||
|
{req.title}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Кнопка "Развернуть" */}
|
||||||
|
<div className="mt-2 w-full bg-[#94E067] rounded-lg py-3 flex items-center justify-center">
|
||||||
|
<span className="font-montserrat font-bold text-[15px] leading-[18px] text-white">
|
||||||
|
Развернуть
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Попап */}
|
||||||
|
{selectedRequest && (
|
||||||
|
<RequestDetailsModal request={selectedRequest} onClose={handleClose} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<TabBar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HistoryRequestPage;
|
||||||
|
|
||||||
|
// const RequestDetailsModal = ({ request, onClose }) => {
|
||||||
|
// const isDone = request.status === "Выполнена";
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/40 px-4">
|
||||||
|
// <div className="w-full max-w-sm bg-[#90D2F9] rounded-2xl p-3 relative">
|
||||||
|
// {/* Белая карточка */}
|
||||||
|
// <div className="bg-white rounded-xl p-3 flex flex-col gap-3">
|
||||||
|
// {/* Шапка попапа */}
|
||||||
|
// <div className="flex items-center justify-between mb-1">
|
||||||
|
// <button
|
||||||
|
// type="button"
|
||||||
|
// onClick={onClose}
|
||||||
|
// className="text-white bg-[#90D2F9] w-7 h-7 rounded-full flex items-center justify-center text-sm"
|
||||||
|
// >
|
||||||
|
// ←
|
||||||
|
// </button>
|
||||||
|
// <p className="flex-1 text-center font-montserrat font-extrabold text-[15px] text-white">
|
||||||
|
// Заявка от {request.createdAt}
|
||||||
|
// </p>
|
||||||
|
// <span className="w-7" />
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
// {/* Статус + срок */}
|
||||||
|
// <div className="flex items-center justify-between">
|
||||||
|
// <span
|
||||||
|
// className="inline-flex items-center justify-center px-2 py-0.5 rounded-full font-montserrat text-[8px] font-light text-black"
|
||||||
|
// style={{ backgroundColor: "#71A5E9" }}
|
||||||
|
// >
|
||||||
|
// Выполнена
|
||||||
|
// </span>
|
||||||
|
// <div className="text-right leading-tight">
|
||||||
|
// <p className="font-montserrat text-[8px] text-black">
|
||||||
|
// До {request.date.replace("До ", "")}
|
||||||
|
// </p>
|
||||||
|
// <p className="font-montserrat text-[8px] text-black">
|
||||||
|
// {request.time}
|
||||||
|
// </p>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
// {/* Название задачи */}
|
||||||
|
// <p className="font-montserrat font-semibold text-[12px] leading-[15px] text-black">
|
||||||
|
// {request.title}
|
||||||
|
// </p>
|
||||||
|
|
||||||
|
// {/* Блок отзыва */}
|
||||||
|
// {isDone && (
|
||||||
|
// <div className="bg-[#72B8E2] rounded-lg p-2 flex flex-col gap-2">
|
||||||
|
// <p className="font-montserrat font-bold text-[10px] text-white">
|
||||||
|
// Отзыв
|
||||||
|
// </p>
|
||||||
|
// <p className="font-montserrat text-[10px] text-white">
|
||||||
|
// Здесь будет текст отзыва с бэка.
|
||||||
|
// </p>
|
||||||
|
// </div>
|
||||||
|
// )}
|
||||||
|
|
||||||
|
// {/* Оценка волонтера */}
|
||||||
|
// <div className="mt-1">
|
||||||
|
// <p className="font-montserrat font-semibold text-[12px] text-black mb-1">
|
||||||
|
// Оценить волонтера
|
||||||
|
// </p>
|
||||||
|
// <div className="flex gap-1">
|
||||||
|
// {[1, 2, 3, 4, 5].map((star) => (
|
||||||
|
// <FaStar key={star} className="text-[#F6E168]" size={20} />
|
||||||
|
// ))}
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
// {/* Кнопка оставить отзыв */}
|
||||||
|
// {isDone && (
|
||||||
|
// <button
|
||||||
|
// type="button"
|
||||||
|
// className="mt-3 w-full bg-[#94E067] rounded-lg py-2 flex items-center justify-center"
|
||||||
|
// >
|
||||||
|
// <span className="font-montserrat font-bold text-[14px] text-white">
|
||||||
|
// Оставить отзыв
|
||||||
|
// </span>
|
||||||
|
// </button>
|
||||||
|
// )}
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
|
|
||||||
109
app/moderatorProfilePage/page.jsx
Normal file
109
app/moderatorProfilePage/page.jsx
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { FaUserCircle, FaStar } from "react-icons/fa";
|
||||||
|
import TabBar from "../components/TabBar";
|
||||||
|
|
||||||
|
const ModeratorProfilePage = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const fullName = "Иванов Александр Сергеевич";
|
||||||
|
const birthDate = "12.03.1990";
|
||||||
|
const rating = 4.8;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
|
||||||
|
<div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
|
||||||
|
{/* Header с кнопкой назад и заголовком по центру */}
|
||||||
|
<header className="flex items-center mb-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => router.back()}
|
||||||
|
className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
|
||||||
|
>
|
||||||
|
←
|
||||||
|
</button>
|
||||||
|
<h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
|
||||||
|
Профиль
|
||||||
|
</h1>
|
||||||
|
<span className="w-8" />
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Карточка профиля */}
|
||||||
|
<main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
|
||||||
|
{/* Аватар */}
|
||||||
|
<FaUserCircle className="text-[#72B8E2] w-20 h-20" />
|
||||||
|
|
||||||
|
{/* ФИО и рейтинг */}
|
||||||
|
<div className="text-center space-y-1">
|
||||||
|
{/* <p className="font-montserrat font-extrabold text-[16px] text-black">
|
||||||
|
ФИО
|
||||||
|
</p> */}
|
||||||
|
<p className="font-montserrat font-bold text-[20px] text-black">
|
||||||
|
{fullName}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Рейтинг + звезды */}
|
||||||
|
<div className="mt-2 flex items-center justify-center gap-2">
|
||||||
|
<span className="font-montserrat font-semibold text-[14px] text-black">
|
||||||
|
Рейтинг: {rating.toFixed(1)}
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{[1, 2, 3, 4, 5].map((star) => (
|
||||||
|
<FaStar
|
||||||
|
key={star}
|
||||||
|
size={18}
|
||||||
|
className={
|
||||||
|
star <= Math.round(rating)
|
||||||
|
? "text-[#F6E168] fill-[#F6E168]"
|
||||||
|
: "text-[#F6E168] fill-[#F6E168]/30"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Контакты и день рождения */}
|
||||||
|
<div className="w-full bg-[#72B8E2] rounded-2xl p-3 text-white space-y-1">
|
||||||
|
<p className="font-montserrat text-[12px]">
|
||||||
|
Дата рождения: {birthDate}
|
||||||
|
</p>
|
||||||
|
<p className="font-montserrat text-[12px]">
|
||||||
|
Почта: example@mail.com
|
||||||
|
</p>
|
||||||
|
<p className="font-montserrat text-[12px]">
|
||||||
|
Телефон: +7 (900) 000-00-00
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Кнопки */}
|
||||||
|
<div className="w-full flex flex-col gap-2 mt-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => router.push("/valounterProfileSettings")}
|
||||||
|
className="w-full bg-[#E0B267] rounded-full py-2 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<span className="font-montserrat font-extrabold text-[14px] text-white">
|
||||||
|
Редактировать профиль
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-full bg-[#E07567] rounded-full py-2 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<span className="font-montserrat font-extrabold text-[14px] text-white">
|
||||||
|
Выйти из аккаунта
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<TabBar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModeratorProfilePage;
|
||||||
153
app/moderatorProfileSettings/page.jsx
Normal file
153
app/moderatorProfileSettings/page.jsx
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { FaUserCircle } from "react-icons/fa";
|
||||||
|
import TabBar from "../components/TabBar";
|
||||||
|
|
||||||
|
const ValounterProfileSettingsPage = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const [avatarUrl, setAvatarUrl] = useState("");
|
||||||
|
const [fullName, setFullName] = useState("Иванов Александр Сергеевич");
|
||||||
|
const [birthDate, setBirthDate] = useState("1990-03-12");
|
||||||
|
const [email, setEmail] = useState("example@mail.com");
|
||||||
|
const [phone, setPhone] = useState("+7 (900) 000-00-00");
|
||||||
|
|
||||||
|
const handleSave = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log("Сохранить профиль:", {
|
||||||
|
avatarUrl,
|
||||||
|
fullName,
|
||||||
|
birthDate,
|
||||||
|
email,
|
||||||
|
phone,
|
||||||
|
});
|
||||||
|
// здесь будет запрос на бэк
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
|
||||||
|
<div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="flex items-center mb-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => router.back()}
|
||||||
|
className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
|
||||||
|
>
|
||||||
|
←
|
||||||
|
</button>
|
||||||
|
<h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
|
||||||
|
Настройки профиля
|
||||||
|
</h1>
|
||||||
|
<span className="w-8" />
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Карточка настроек */}
|
||||||
|
<main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
|
||||||
|
{/* Аватар */}
|
||||||
|
<div className="flex flex-col items-center gap-2">
|
||||||
|
<div className="w-24 h-24 rounded-full bg-[#E5F3FB] flex items-center justify-center overflow-hidden">
|
||||||
|
{avatarUrl ? (
|
||||||
|
// eslint-disable-next-line @next/next/no-img-element
|
||||||
|
<img
|
||||||
|
src={avatarUrl}
|
||||||
|
alt="Аватар"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<FaUserCircle className="text-[#72B8E2] w-20 h-20" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<label className="font-montserrat text-[12px] text-[#72B8E2] underline cursor-pointer">
|
||||||
|
Загрузить аватар
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
className="hidden"
|
||||||
|
onChange={(e) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
const url = URL.createObjectURL(file);
|
||||||
|
setAvatarUrl(url);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSave} className="w-full flex flex-col gap-3">
|
||||||
|
{/* ФИО */}
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="font-montserrat text-[12px] text-black">
|
||||||
|
ФИО
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={fullName}
|
||||||
|
onChange={(e) => setFullName(e.target.value)}
|
||||||
|
className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
|
||||||
|
placeholder="Введите ФИО"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Дата рождения */}
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="font-montserrat text-[12px] text-black">
|
||||||
|
Дата рождения
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={birthDate}
|
||||||
|
onChange={(e) => setBirthDate(e.target.value)}
|
||||||
|
className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white outline-none border border-transparent focus:border-white/70"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Почта */}
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="font-montserrat text-[12px] text-black">
|
||||||
|
Почта
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
|
||||||
|
placeholder="example@mail.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Телефон */}
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="font-montserrat text-[12px] text-black">
|
||||||
|
Телефон
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={phone}
|
||||||
|
onChange={(e) => setPhone(e.target.value)}
|
||||||
|
className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text:white.placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
|
||||||
|
placeholder="+7 (900) 000-00-00"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Кнопка сохранить */}
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="mt-2 w-full bg-[#94E067] rounded-full py-2.5 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<span className="font-montserrat font-extrabold text-[14px] text-white">
|
||||||
|
Сохранить изменения
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<TabBar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ValounterProfileSettingsPage;
|
||||||
228
app/valounterHistoryRequest/page.jsx
Normal file
228
app/valounterHistoryRequest/page.jsx
Normal file
@@ -0,0 +1,228 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { FaBell, FaUser, FaStar } from "react-icons/fa";
|
||||||
|
import TabBar from "../components/TabBar";
|
||||||
|
import RequestDetailsModal from "../components/ValounterRequestDetailsModal";
|
||||||
|
|
||||||
|
const requests = [
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: "Приобрести продукты пенсионерке",
|
||||||
|
status: "Выполнена",
|
||||||
|
statusColor: "#71A5E9",
|
||||||
|
date: "До 28.11.2025",
|
||||||
|
time: "13:00",
|
||||||
|
createdAt: "28.11.2025",
|
||||||
|
description: "Купить продукты и принести по адресу.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: "Приобрести продукты пенсионерке",
|
||||||
|
status: "В процессе",
|
||||||
|
statusColor: "#E971E1",
|
||||||
|
date: "До 28.11.2025",
|
||||||
|
time: "13:00",
|
||||||
|
createdAt: "28.11.2025",
|
||||||
|
description: "Купить продукты и принести по адресу.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: "Приобрести продукты пенсионерке",
|
||||||
|
status: "В процессе",
|
||||||
|
statusColor: "#E971E1",
|
||||||
|
date: "До 28.11.2025",
|
||||||
|
time: "13:00",
|
||||||
|
createdAt: "28.11.2025",
|
||||||
|
description: "Купить продукты и принести по адресу.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
title: "Приобрести продукты пенсионерке",
|
||||||
|
status: "В процессе",
|
||||||
|
statusColor: "#E971E1",
|
||||||
|
date: "До 28.11.2025",
|
||||||
|
time: "13:00",
|
||||||
|
createdAt: "28.11.2025",
|
||||||
|
description: "Купить продукты и принести по адресу.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const HistoryRequestPage = () => {
|
||||||
|
const [selectedRequest, setSelectedRequest] = useState(null);
|
||||||
|
|
||||||
|
const handleOpen = (req) => {
|
||||||
|
setSelectedRequest(req);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setSelectedRequest(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
|
||||||
|
<div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full border border-white flex items-center justify-center">
|
||||||
|
<FaUser className="text-white text-sm" />
|
||||||
|
</div>
|
||||||
|
<p className="font-montserrat font-extrabold text-[20px] leading-[11px] text-white">
|
||||||
|
Александр
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-8 h-8 rounded-full border border-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<FaBell className="text-white text-sm" />
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<h1 className="font-montserrat font-extrabold text-[20px] leading-[22px] text-white mb-3">
|
||||||
|
История заявок
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* Список заявок */}
|
||||||
|
<main className="space-y-3 overflow-y-auto pr-1 max-h-[80vh]">
|
||||||
|
{requests.map((req) => (
|
||||||
|
<button
|
||||||
|
key={req.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleOpen(req)}
|
||||||
|
className="w-full text-left bg-white rounded-xl px-3 py-2 flex flex-col gap-1"
|
||||||
|
>
|
||||||
|
{/* верхняя строка: статус + дата/время */}
|
||||||
|
<div className="flex items-center justify-between gap-2">
|
||||||
|
<span
|
||||||
|
className="inline-flex items-center justify-center px-2 py-0.5 rounded-full font-montserrat text-[12px] font-light text-black"
|
||||||
|
style={{ backgroundColor: req.statusColor }}
|
||||||
|
>
|
||||||
|
{req.status}
|
||||||
|
</span>
|
||||||
|
<div className="text-right leading-tight">
|
||||||
|
<p className="font-montserrat text-[10px] text-black">
|
||||||
|
{req.date}
|
||||||
|
</p>
|
||||||
|
<p className="font-montserrat text-[10px] text-black">
|
||||||
|
{req.time}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Заголовок заявки */}
|
||||||
|
<p className="font-montserrat font-semibold text-[15px] leading-[18px] text-black mt-1">
|
||||||
|
{req.title}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Кнопка "Развернуть" */}
|
||||||
|
<div className="mt-2 w-full bg-[#94E067] rounded-lg py-3 flex items-center justify-center">
|
||||||
|
<span className="font-montserrat font-bold text-[15px] leading-[18px] text-white">
|
||||||
|
Развернуть
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Попап */}
|
||||||
|
{selectedRequest && (
|
||||||
|
<RequestDetailsModal request={selectedRequest} onClose={handleClose} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<TabBar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HistoryRequestPage;
|
||||||
|
|
||||||
|
// const RequestDetailsModal = ({ request, onClose }) => {
|
||||||
|
// const isDone = request.status === "Выполнена";
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/40 px-4">
|
||||||
|
// <div className="w-full max-w-sm bg-[#90D2F9] rounded-2xl p-3 relative">
|
||||||
|
// {/* Белая карточка */}
|
||||||
|
// <div className="bg-white rounded-xl p-3 flex flex-col gap-3">
|
||||||
|
// {/* Шапка попапа */}
|
||||||
|
// <div className="flex items-center justify-between mb-1">
|
||||||
|
// <button
|
||||||
|
// type="button"
|
||||||
|
// onClick={onClose}
|
||||||
|
// className="text-white bg-[#90D2F9] w-7 h-7 rounded-full flex items-center justify-center text-sm"
|
||||||
|
// >
|
||||||
|
// ←
|
||||||
|
// </button>
|
||||||
|
// <p className="flex-1 text-center font-montserrat font-extrabold text-[15px] text-white">
|
||||||
|
// Заявка от {request.createdAt}
|
||||||
|
// </p>
|
||||||
|
// <span className="w-7" />
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
// {/* Статус + срок */}
|
||||||
|
// <div className="flex items-center justify-between">
|
||||||
|
// <span
|
||||||
|
// className="inline-flex items-center justify-center px-2 py-0.5 rounded-full font-montserrat text-[8px] font-light text-black"
|
||||||
|
// style={{ backgroundColor: "#71A5E9" }}
|
||||||
|
// >
|
||||||
|
// Выполнена
|
||||||
|
// </span>
|
||||||
|
// <div className="text-right leading-tight">
|
||||||
|
// <p className="font-montserrat text-[8px] text-black">
|
||||||
|
// До {request.date.replace("До ", "")}
|
||||||
|
// </p>
|
||||||
|
// <p className="font-montserrat text-[8px] text-black">
|
||||||
|
// {request.time}
|
||||||
|
// </p>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
// {/* Название задачи */}
|
||||||
|
// <p className="font-montserrat font-semibold text-[12px] leading-[15px] text-black">
|
||||||
|
// {request.title}
|
||||||
|
// </p>
|
||||||
|
|
||||||
|
// {/* Блок отзыва */}
|
||||||
|
// {isDone && (
|
||||||
|
// <div className="bg-[#72B8E2] rounded-lg p-2 flex flex-col gap-2">
|
||||||
|
// <p className="font-montserrat font-bold text-[10px] text-white">
|
||||||
|
// Отзыв
|
||||||
|
// </p>
|
||||||
|
// <p className="font-montserrat text-[10px] text-white">
|
||||||
|
// Здесь будет текст отзыва с бэка.
|
||||||
|
// </p>
|
||||||
|
// </div>
|
||||||
|
// )}
|
||||||
|
|
||||||
|
// {/* Оценка волонтера */}
|
||||||
|
// <div className="mt-1">
|
||||||
|
// <p className="font-montserrat font-semibold text-[12px] text-black mb-1">
|
||||||
|
// Оценить волонтера
|
||||||
|
// </p>
|
||||||
|
// <div className="flex gap-1">
|
||||||
|
// {[1, 2, 3, 4, 5].map((star) => (
|
||||||
|
// <FaStar key={star} className="text-[#F6E168]" size={20} />
|
||||||
|
// ))}
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
// {/* Кнопка оставить отзыв */}
|
||||||
|
// {isDone && (
|
||||||
|
// <button
|
||||||
|
// type="button"
|
||||||
|
// className="mt-3 w-full bg-[#94E067] rounded-lg py-2 flex items-center justify-center"
|
||||||
|
// >
|
||||||
|
// <span className="font-montserrat font-bold text-[14px] text-white">
|
||||||
|
// Оставить отзыв
|
||||||
|
// </span>
|
||||||
|
// </button>
|
||||||
|
// )}
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
|
|
||||||
109
app/valounterProfilePage/page.jsx
Normal file
109
app/valounterProfilePage/page.jsx
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { FaUserCircle, FaStar } from "react-icons/fa";
|
||||||
|
import TabBar from "../components/TabBar";
|
||||||
|
|
||||||
|
const ValounterProfilePage = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const fullName = "Иванов Александр Сергеевич";
|
||||||
|
const birthDate = "12.03.1990";
|
||||||
|
const rating = 4.8;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
|
||||||
|
<div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
|
||||||
|
{/* Header с кнопкой назад и заголовком по центру */}
|
||||||
|
<header className="flex items-center mb-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => router.back()}
|
||||||
|
className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
|
||||||
|
>
|
||||||
|
←
|
||||||
|
</button>
|
||||||
|
<h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
|
||||||
|
Профиль
|
||||||
|
</h1>
|
||||||
|
<span className="w-8" />
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Карточка профиля */}
|
||||||
|
<main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
|
||||||
|
{/* Аватар */}
|
||||||
|
<FaUserCircle className="text-[#72B8E2] w-20 h-20" />
|
||||||
|
|
||||||
|
{/* ФИО и рейтинг */}
|
||||||
|
<div className="text-center space-y-1">
|
||||||
|
{/* <p className="font-montserrat font-extrabold text-[16px] text-black">
|
||||||
|
ФИО
|
||||||
|
</p> */}
|
||||||
|
<p className="font-montserrat font-bold text-[20px] text-black">
|
||||||
|
{fullName}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Рейтинг + звезды */}
|
||||||
|
<div className="mt-2 flex items-center justify-center gap-2">
|
||||||
|
<span className="font-montserrat font-semibold text-[14px] text-black">
|
||||||
|
Рейтинг: {rating.toFixed(1)}
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{[1, 2, 3, 4, 5].map((star) => (
|
||||||
|
<FaStar
|
||||||
|
key={star}
|
||||||
|
size={18}
|
||||||
|
className={
|
||||||
|
star <= Math.round(rating)
|
||||||
|
? "text-[#F6E168] fill-[#F6E168]"
|
||||||
|
: "text-[#F6E168] fill-[#F6E168]/30"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Контакты и день рождения */}
|
||||||
|
<div className="w-full bg-[#72B8E2] rounded-2xl p-3 text-white space-y-1">
|
||||||
|
<p className="font-montserrat text-[12px]">
|
||||||
|
Дата рождения: {birthDate}
|
||||||
|
</p>
|
||||||
|
<p className="font-montserrat text-[12px]">
|
||||||
|
Почта: example@mail.com
|
||||||
|
</p>
|
||||||
|
<p className="font-montserrat text-[12px]">
|
||||||
|
Телефон: +7 (900) 000-00-00
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Кнопки */}
|
||||||
|
<div className="w-full flex flex-col gap-2 mt-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => router.push("/valounterProfileSettings")}
|
||||||
|
className="w-full bg-[#E0B267] rounded-full py-2 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<span className="font-montserrat font-extrabold text-[14px] text-white">
|
||||||
|
Редактировать профиль
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-full bg-[#E07567] rounded-full py-2 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<span className="font-montserrat font-extrabold text-[14px] text-white">
|
||||||
|
Выйти из аккаунта
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<TabBar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ValounterProfilePage;
|
||||||
153
app/valounterProfileSettings/page.jsx
Normal file
153
app/valounterProfileSettings/page.jsx
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { FaUserCircle } from "react-icons/fa";
|
||||||
|
import TabBar from "../components/TabBar";
|
||||||
|
|
||||||
|
const ValounterProfileSettingsPage = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const [avatarUrl, setAvatarUrl] = useState("");
|
||||||
|
const [fullName, setFullName] = useState("Иванов Александр Сергеевич");
|
||||||
|
const [birthDate, setBirthDate] = useState("1990-03-12");
|
||||||
|
const [email, setEmail] = useState("example@mail.com");
|
||||||
|
const [phone, setPhone] = useState("+7 (900) 000-00-00");
|
||||||
|
|
||||||
|
const handleSave = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log("Сохранить профиль:", {
|
||||||
|
avatarUrl,
|
||||||
|
fullName,
|
||||||
|
birthDate,
|
||||||
|
email,
|
||||||
|
phone,
|
||||||
|
});
|
||||||
|
// здесь будет запрос на бэк
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
|
||||||
|
<div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="flex items-center mb-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => router.back()}
|
||||||
|
className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
|
||||||
|
>
|
||||||
|
←
|
||||||
|
</button>
|
||||||
|
<h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
|
||||||
|
Настройки профиля
|
||||||
|
</h1>
|
||||||
|
<span className="w-8" />
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Карточка настроек */}
|
||||||
|
<main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
|
||||||
|
{/* Аватар */}
|
||||||
|
<div className="flex flex-col items-center gap-2">
|
||||||
|
<div className="w-24 h-24 rounded-full bg-[#E5F3FB] flex items-center justify-center overflow-hidden">
|
||||||
|
{avatarUrl ? (
|
||||||
|
// eslint-disable-next-line @next/next/no-img-element
|
||||||
|
<img
|
||||||
|
src={avatarUrl}
|
||||||
|
alt="Аватар"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<FaUserCircle className="text-[#72B8E2] w-20 h-20" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<label className="font-montserrat text-[12px] text-[#72B8E2] underline cursor-pointer">
|
||||||
|
Загрузить аватар
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
className="hidden"
|
||||||
|
onChange={(e) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
const url = URL.createObjectURL(file);
|
||||||
|
setAvatarUrl(url);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSave} className="w-full flex flex-col gap-3">
|
||||||
|
{/* ФИО */}
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="font-montserrat text-[12px] text-black">
|
||||||
|
ФИО
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={fullName}
|
||||||
|
onChange={(e) => setFullName(e.target.value)}
|
||||||
|
className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
|
||||||
|
placeholder="Введите ФИО"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Дата рождения */}
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="font-montserrat text-[12px] text-black">
|
||||||
|
Дата рождения
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={birthDate}
|
||||||
|
onChange={(e) => setBirthDate(e.target.value)}
|
||||||
|
className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white outline-none border border-transparent focus:border-white/70"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Почта */}
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="font-montserrat text-[12px] text-black">
|
||||||
|
Почта
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
|
||||||
|
placeholder="example@mail.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Телефон */}
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<label className="font-montserrat text-[12px] text-black">
|
||||||
|
Телефон
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={phone}
|
||||||
|
onChange={(e) => setPhone(e.target.value)}
|
||||||
|
className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text:white.placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
|
||||||
|
placeholder="+7 (900) 000-00-00"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Кнопка сохранить */}
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="mt-2 w-full bg-[#94E067] rounded-full py-2.5 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<span className="font-montserrat font-extrabold text-[14px] text-white">
|
||||||
|
Сохранить изменения
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<TabBar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ValounterProfileSettingsPage;
|
||||||
Reference in New Issue
Block a user