volontery/frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP API

Browse Source
This commit is contained in:
fullofempt
2025-12-14 18:47:14 +05:00
parent bb833d956e
commit 433b9e896c
18 changed files with 2891 additions and 1260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/AuthPage.jsx
View File

@@ -15,11 +15,12 @@ const AuthPage = () => {
const [rememberMe, setRememberMe] = useState(false);
const [checkboxError, setCheckboxError] = useState(false);
const [authError, setAuthError] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const isEmailValid = emailRegex.test(email);
const isFormValid = isEmailValid && password.length > 0;
const handleSubmit = (e) => {
const handleSubmit = async (e) => {
e.preventDefault();
if (!rememberMe) {
@@ -32,9 +33,11 @@ const AuthPage = () => {
try {
setAuthError("");
login(email, password);
setIsSubmitting(true);
await login(email, password); // теперь это async
} catch (err) {
setAuthError(err.message || "Неверный логин или пароль");
setIsSubmitting(false);
}
};
@@ -111,27 +114,45 @@ const AuthPage = () => {
</p>
</div>
{/* Ссылки */}
<div className="flex justify-between text-[11px] font-montserrat font-bold text-[#FF6363] mt-5">
{/* <button
type="button"
className="hover:underline"
onClick={() => router.push("/recPassword")}
>
Забыли пароль?
</button> */}
<button
type="button"
className="hover:underline"
onClick={() => router.push("/reg")}
>
Регистрация
</button>
</div>
{/* Кнопка Войти */}
<button
type="submit"
disabled={!isFormValid}
className={`mt-4 w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
disabled={!isFormValid || isSubmitting}
className={` w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
${
isFormValid
isFormValid && !isSubmitting
? "bg-green-500 text-white hover:bg-green-600"
: "bg-white text-[#C4C4C4] cursor-not-allowed"
}`}
>
Войти
{isSubmitting ? "Входим..." : "Войти"}
</button>
</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 className="mt-4 text-[15px] text-white font-montserrat space-y-1">
<p>Тестовые аккаунты (если настроены на бэке):</p>
<p>Пользователь: user@mail.com / user123123</p>
<p>Волонтёр: vol@mail.com / vol123123</p>
<p>Модератор: mod@mail.com / mod123123</p>
</div>
</div>
</div>

107
app/ProfilePage/page.jsx
View File

@@ -1,16 +1,88 @@
"use client";
import React from "react";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { FaUserCircle, FaStar } from "react-icons/fa";
import TabBar from "../components/TabBar";
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
const ProfilePage = () => {
const router = useRouter();
const fullName = "Иванов Александр Сергеевич";
const birthDate = "12.03.1990";
const rating = 4.8;
const [profile, setProfile] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
useEffect(() => {
const fetchProfile = async () => {
if (!API_BASE) {
setError("API_BASE_URL не задан");
setLoading(false);
return;
}
const saved =
typeof window !== "undefined"
? localStorage.getItem("authUser")
: null;
const authUser = saved ? JSON.parse(saved) : null;
const accessToken = authUser?.accessToken;
if (!accessToken) {
setError("Вы не авторизованы");
setLoading(false);
return;
}
try {
const res = await fetch(`${API_BASE}/users/me`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${accessToken}`,
},
});
if (!res.ok) {
let msg = "Не удалось загрузить профиль";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setError(msg);
setLoading(false);
return;
}
const data = await res.json(); // UserProfile[file:519]
setProfile(data);
setLoading(false);
} catch (e) {
setError(e.message || "Ошибка сети");
setLoading(false);
}
};
fetchProfile();
}, []);
const handleLogout = () => {
// опционально: запрос /auth/logout, если используешь[file:519]
localStorage.removeItem("authUser");
router.push("/");
};
const fullName =
profile &&
[profile.first_name, profile.last_name].filter(Boolean).join(" ").trim();
const rating = profile?.volunteer_rating ?? 0;
const email = profile?.email || "—";
const phone = profile?.phone || "—";
const address = profile?.address || "Адрес не указан";
const city = profile?.city || "";
return (
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
@@ -32,16 +104,25 @@ const ProfilePage = () => {
{/* Карточка профиля */}
<main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
{/* Ошибка / загрузка */}
{error && (
<p className="w-full text-center text-xs font-montserrat text-red-500">
{error}
</p>
)}
{loading && !error && (
<p className="w-full text-center text-xs font-montserrat text-black">
Загрузка профиля...
</p>
)}
{/* Аватар */}
<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}
{fullName || email}
</p>
{/* Рейтинг + звезды */}
@@ -65,16 +146,17 @@ const ProfilePage = () => {
</div>
</div>
{/* Контакты и день рождения */}
{/* Контакты и адрес */}
<div className="w-full bg-[#72B8E2] rounded-2xl p-3 text-white space-y-1">
<p className="font-montserrat text-[12px]">
Дата рождения: {birthDate}
Почта: {email}
</p>
<p className="font-montserrat text-[12px]">
Почта: example@mail.com
Телефон: {phone}
</p>
<p className="font-montserrat text-[12px]">
Телефон: +7 (900) 000-00-00
Адрес: {address}
{city ? `, ${city}` : ""}
</p>
</div>
@@ -91,6 +173,7 @@ const ProfilePage = () => {
</button>
<button
type="button"
onClick={handleLogout}
className="w-full bg-[#E07567] rounded-full py-2 flex items-center justify-center"
>
<span className="font-montserrat font-extrabold text-[14px] text-white">

267
app/components/ModeratorRequestDetailsModal.jsx
View File

@@ -2,35 +2,212 @@
import React, { useState } from "react";
const ModeratorRequestModal = ({ request, onClose, onApprove, onReject }) => {
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
const ModeratorRequestModal = ({ request, onClose, onModerated }) => {
const [showRejectPopup, setShowRejectPopup] = useState(false);
const [rejectReason, setRejectReason] = useState("");
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState("");
const isApproved = request.status === "Принята";
const isRejected = request.status === "Отклонена";
const isPending = !isApproved && !isRejected; // на модерации
// request.status: "pending_moderation" | "approved" | "rejected"
const isApproved = request.status === "approved";
const isRejected = request.status === "rejected";
const isPending = request.status === "pending_moderation";
const handleApprove = () => {
onApprove?.({ ...request, status: "Принята" });
onClose();
const getAccessToken = () => {
if (typeof window === "undefined") return null;
const saved = localStorage.getItem("authUser");
const authUser = saved ? JSON.parse(saved) : null;
return authUser?.accessToken || null;
};
const handleRejectConfirm = () => {
onReject?.({
...request,
status: "Отклонена",
rejectReason: rejectReason,
const formatDate = (iso) => {
if (!iso) return "";
const d = new Date(iso);
return d.toLocaleDateString("ru-RU");
};
const formatTime = (iso) => {
if (!iso) return "";
const d = new Date(iso);
return d.toLocaleTimeString("ru-RU", {
hour: "2-digit",
minute: "2-digit",
});
setShowRejectPopup(false);
onClose();
};
const createdDate = request.date || "";
const createdTime = request.time || "";
const deadlineDate = request.deadlineDate || request.date || "";
const deadlineTime = request.deadlineTime || request.time || "";
const handleApprove = async () => {
if (!API_BASE || submitting) return;
const token = getAccessToken();
if (!token) {
setError("Вы не авторизованы");
return;
}
console.log("[MODERATION] APPROVE start", {
requestId: request.id,
statusBefore: request.status,
});
try {
setSubmitting(true);
setError("");
const res = await fetch(
`${API_BASE}/moderation/requests/${request.id}/approve`,
{
method: "POST",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
body: JSON.stringify({ comment: null }),
}
);
console.log("[MODERATION] APPROVE response status", res.status);
const text = await res.text();
let data = null;
if (text) {
try {
data = JSON.parse(text);
} catch {
data = null;
}
}
console.log("[MODERATION] APPROVE response body", data || text);
if (!res.ok) {
let msg = "Не удалось одобрить заявку";
if (data && typeof data === "object" && data.error) {
msg = data.error;
} else if (text) {
msg = text;
}
console.log("[MODERATION] APPROVE error", msg);
setError(msg);
setSubmitting(false);
return;
}
onModerated?.({
...request,
status: "approved",
moderationResult: data,
});
console.log("[MODERATION] APPROVE success", {
requestId: request.id,
newStatus: "approved",
});
setSubmitting(false);
onClose();
} catch (e) {
console.log("[MODERATION] APPROVE exception", e);
setError(e.message || "Ошибка сети");
setSubmitting(false);
}
};
const handleRejectConfirm = async () => {
if (!API_BASE || submitting) return;
const token = getAccessToken();
if (!token) {
setError("Вы не авторизованы");
return;
}
if (!rejectReason.trim()) {
setError("Укажите причину отклонения");
return;
}
console.log("[MODERATION] REJECT start", {
requestId: request.id,
statusBefore: request.status,
reason: rejectReason,
});
try {
setSubmitting(true);
setError("");
const res = await fetch(
`${API_BASE}/moderation/requests/${request.id}/reject`,
{
method: "POST",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
body: JSON.stringify({ comment: rejectReason }),
}
);
console.log("[MODERATION] REJECT response status", res.status);
const text = await res.text();
let data = null;
if (text) {
try {
data = JSON.parse(text);
} catch {
data = null;
}
}
console.log("[MODERATION] REJECT response body", data || text);
if (!res.ok) {
let msg = "Не удалось отклонить заявку";
if (data && typeof data === "object" && data.error) {
msg = data.error;
} else if (text) {
msg = text;
}
console.log("[MODERATION] REJECT error", msg);
setError(msg);
setSubmitting(false);
return;
}
onModerated?.({
...request,
status: "rejected",
rejectReason,
moderationResult: data,
});
console.log("[MODERATION] REJECT success", {
requestId: request.id,
newStatus: "rejected",
});
setShowRejectPopup(false);
setSubmitting(false);
onClose();
} catch (e) {
console.log("[MODERATION] REJECT exception", e);
setError(e.message || "Ошибка сети");
setSubmitting(false);
}
};
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">
<div className="flex.items-center gap-2 mb-3">
<button
type="button"
onClick={onClose}
@@ -39,15 +216,13 @@ const ModeratorRequestModal = ({ request, onClose, onApprove, onReject }) => {
←
</button>
<p className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
Заявка от {request.date || "28.11.25"}
Заявка от {createdDate || "—"}
</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">
@@ -59,7 +234,7 @@ const ModeratorRequestModal = ({ request, onClose, onApprove, onReject }) => {
Дата
</span>
<span className="text-[10px] font-montserrat text-white">
{request.date || "28.11.2025"}
{createdDate || "—"}
</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">
@@ -67,27 +242,27 @@ const ModeratorRequestModal = ({ request, onClose, onApprove, onReject }) => {
Время
</span>
<span className="text-[10px] font-montserrat text-white">
{request.time || "13:00"}
{createdTime || "—"}
</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 || "Клавдия Березова"}
{request.requesterName || "Заявитель"}
</p>
<p className="text-[12px] font-montserrat text-white leading-[14px]">
{request.address || "г. Пермь, ул. Ленина 50"}
{request.address
? `${request.city ? request.city + ", " : ""}${request.address}`
: "Адрес не указан"}
</p>
</div>
{/* статус + сроки */}
<div className="flex items-center justify-between">
<div
className={`px-3 py-1 rounded-[10px] flex items-center justify-center ${isApproved
@@ -106,17 +281,15 @@ const ModeratorRequestModal = ({ request, onClose, onApprove, onReject }) => {
</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>
<span>До {deadlineDate || "—"}</span>
<span>{deadlineTime || "—"}</span>
</div>
</div>
{/* Заголовок задачи */}
<p className="text-[16px] leading-[20px] font-montserrat font-semibold text-black">
{request.title || "Приобрести продукты пенсионерке"}
{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">
@@ -125,9 +298,8 @@ const ModeratorRequestModal = ({ request, onClose, onApprove, onReject }) => {
</div>
)}
{/* если заявка уже отклонена — показать причину */}
{isRejected && (
<div className="w-full bg-[#FFE2E2] rounded-[10px] px-3 py-2">
<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>
@@ -138,44 +310,48 @@ const ModeratorRequestModal = ({ request, onClose, onApprove, onReject }) => {
</p>
</div>
)}
{error && (
<p className="text-[12px] font-montserrat text-red-500">
{error}
</p>
)}
</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"
disabled={submitting}
className="flex-1 h-10 bg-[#94E067] rounded-[10px] flex items-center justify-center disabled:opacity-60"
>
<span className="text-[14px] font-montserrat font-bold text-white">
Принять
{submitting ? "Сохранение..." : "Принять"}
</span>
</button>
<button
type="button"
onClick={() => setShowRejectPopup(true)}
className="flex-1 h-10 bg-[#E06767] rounded-[10px] flex items-center justify-center"
disabled={submitting}
className="flex-1 h-10 bg-[#E06767] rounded-[10px] flex items-center justify-center disabled:opacity-60"
>
<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}
@@ -185,20 +361,21 @@ const ModeratorRequestModal = ({ request, onClose, onApprove, onReject }) => {
/>
</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"
disabled={submitting}
className="w-full h-10 bg-[#E06767] rounded-[10px] flex items-center justify-center disabled:opacity-60"
>
<span className="text-[16px] font-montserrat font-bold text-white">
Подтвердить
{submitting ? "Сохранение..." : "Подтвердить"}
</span>
</button>
<button
type="button"
onClick={() => setShowRejectPopup(false)}
disabled={submitting}
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]">

427
app/components/RequestDetailsModal.jsx
View File

@@ -1,161 +1,300 @@
import React, { useState } from "react";
"use client";
import React, { useState, useEffect } from "react";
import { FaStar } from "react-icons/fa";
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
const RequestDetailsModal = ({ request, onClose }) => {
const isDone = request.status === "Выполнена";
const isRejected = request.status === "Отклонена";
const [details, setDetails] = useState(null); // полная заявка из API
const [loading, setLoading] = useState(true);
const [loadError, setLoadError] = useState("");
const [rating, setRating] = useState(0);
const [review, setReview] = useState("");
const [rejectFeedback, setRejectFeedback] = useState("");
const isDone = request.status === "Выполнена";
const isRejected = request.status === "Отклонена";
const handleStarClick = (value) => {
setRating(value);
};
const [rating, setRating] = useState(0);
const [review, setReview] = useState("");
const [rejectFeedback, setRejectFeedback] = useState("");
const handleSubmit = () => {
console.log("Оставить отзыв:", {
id: request.id,
status: request.status,
rating,
review,
rejectFeedback,
// подгружаем детальную заявку /requests/{id}[file:519]
useEffect(() => {
const fetchDetails = async () => {
if (!API_BASE) {
setLoadError("API_BASE_URL не задан");
setLoading(false);
return;
}
const saved =
typeof window !== "undefined"
? localStorage.getItem("authUser")
: null;
const authUser = saved ? JSON.parse(saved) : null;
const accessToken = authUser?.accessToken;
if (!accessToken) {
setLoadError("Вы не авторизованы");
setLoading(false);
return;
}
try {
const res = await fetch(`${API_BASE}/requests/${request.id}`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${accessToken}`,
},
});
onClose();
if (!res.ok) {
let msg = "Не удалось загрузить заявку";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setLoadError(msg);
setLoading(false);
return;
}
const data = await res.json(); // RequestDetail[file:519]
setDetails(data);
setLoading(false);
} catch (e) {
setLoadError(e.message || "Ошибка сети");
setLoading(false);
}
};
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" />
fetchDetails();
}, [request.id]);
const handleStarClick = (value) => {
setRating(value);
};
const handleSubmit = () => {
console.log("Оставить отзыв:", {
id: request.id,
status: request.status,
rating,
review,
rejectFeedback,
});
onClose();
};
// подготовка текстов из details (без изменения верстки)
const fullDescription =
details?.description || request.description || "Описание отсутствует";
const addressLine = details
? [details.address, details.city].filter(Boolean).join(", ")
: null;
const requesterName = details?.requester?.first_name
? `${details.requester.first_name} ${details.requester.last_name || ""}`.trim()
: details?.requester?.email;
const requestTypeName = details?.request_type?.name;
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>
{/* Белая карточка как на макете */}
<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>
{/* Название задачи */}
<p className="font-montserrat font-semibold text-[16px] leading-[20px] text.black">
{request.title}
</p>
{/* ВЫПОЛНЕНА: голубой блок с отзывом как было */}
{isDone && (
<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="Напишите, как прошла помощь"
/>
</div>
)}
{/* ОТКЛОНЕНА: причина отказа + комментарий, без изменения размеров */}
{isRejected && (
<>
{request.rejectReason && (
<div className="bg-[#FF8282] rounded-2xl p-3">
<p className="font-montserrat font-bold text-[12px] text-white mb-1">
Причина отказа
</p>
<p className="font-montserrat text-[12px] text-white">
{request.rejectReason}
</p>
</div>
)}
<div className="flex flex-col gap-1">
<p className="font-montserrat font-bold text-[12px] text-black">
Ваш комментарий
</p>
<textarea
value={rejectFeedback}
onChange={(e) => setRejectFeedback(e.target.value)}
rows={4}
className="w-full rounded-2xl px-3 py-2 text-sm font-montserrat text-black placeholder:text-black/40 outline-none resize-none border border-[#FF8282]"
placeholder="Расскажите, что можно улучшить"
/>
</div>
</>
)}
{/* Оценка волонтёра — только для выполненной */}
{/* Оценка волонтера */}
{isDone && (
<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 || isRejected) && (
<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">
{isRejected ? "Отправить комментарий" : "Оставить отзыв"}
</span>
</button>
{/* Блок с полной информацией о заявке */}
<div className="bg-[#F2F2F2] rounded-2xl px-3 py-2 flex flex-col gap-1 max-h-[40vh] overflow-y-auto">
{loading && (
<p className="font-montserrat text-[12px] text-black">
Загрузка информации о заявке...
</p>
)}
{loadError && !loading && (
<p className="font-montserrat text-[12px] text-red-600">
{loadError}
</p>
)}
{!loading && !loadError && (
<>
{requestTypeName && (
<p className="font-montserrat text-[12px] text-black">
<span className="font-semibold">Тип:</span> {requestTypeName}
</p>
)}
{addressLine && (
<p className="font-montserrat text-[12px] text-black">
<span className="font-semibold">Адрес:</span> {addressLine}
</p>
)}
{details?.urgency && (
<p className="font-montserrat text-[12px] text-black">
<span className="font-semibold">Срочность:</span>{" "}
{details.urgency}
</p>
)}
{requesterName && (
<p className="font-montserrat text-[12px] text-black">
<span className="font-semibold">Заявитель:</span> {requesterName}
</p>
)}
{details?.contact_phone && (
<p className="font-montserrat text-[12px] text.black">
<span className="font-semibold">Телефон:</span>{" "}
{details.contact_phone}
</p>
)}
{details?.contact_notes && (
<p className="font-montserrat text-[12px] text-black">
<span className="font-semibold">Комментарий к контакту:</span>{" "}
{details.contact_notes}
</p>
)}
<p className="font-montserrat text-[12px] text.black mt-1 whitespace-pre-line">
<span className="font-semibold">Описание:</span>{" "}
{fullDescription}
</p>
</>
)}
</div>
{/* Выполнена: блок отзыва */}
{isDone && (
<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="Напишите, как прошла помощь"
/>
</div>
)}
{/* Отклонена: причина + свой комментарий */}
{isRejected && (
<>
{request.rejectReason && (
<div className="bg-[#FF8282] rounded-2xl p-3">
<p className="font-montserrat font-bold text-[12px] text-white mb-1">
Причина отказа
</p>
<p className="font-montserrat text-[12px] text-white">
{request.rejectReason}
</p>
</div>
)}
<div className="flex flex-col gap-1">
<p className="font-montserrat font-bold text-[12px] text-black">
Ваш комментарий
</p>
<textarea
value={rejectFeedback}
onChange={(e) => setRejectFeedback(e.target.value)}
rows={4}
className="w-full rounded-2xl px-3 py-2 text-sm font-montserrat text-black.placeholder:text-black/40 outline-none resize-none border border-[#FF8282]"
placeholder="Расскажите, что можно улучшить"
/>
</div>
</>
)}
{/* Оценка волонтёра только для выполненной */}
{isDone && (
<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 || isRejected) && (
<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">
{isRejected ? "Отправить комментарий" : "Оставить отзыв"}
</span>
</button>
)}
</div>
);
};
export default RequestDetailsModal;

2
app/components/TabBar.jsx
View File

@@ -14,7 +14,7 @@ const TabBar = () => {
// маршруты по ролям
const routesByRole = {
user: [
requester: [
{ key: "home", icon: FaHome, href: "/createRequest" },
{ key: "history", icon: FaClock, href: "/historyRequest" },
{ key: "news", icon: FaNewspaper, href: "/news" },

292
app/components/ValounterRequestDetailsModal.jsx
View File

@@ -1,153 +1,169 @@
"use client";
import React, { useState } from "react";
import { FaStar } from "react-icons/fa";
const RequestDetailsModal = ({ request, onClose }) => {
const isDone = request.status === "Выполнена";
const isInProgress = request.status === "В процессе";
const isDone = request.rawStatus === "completed" || request.status === "Выполнена";
const isInProgress =
request.rawStatus === "in_progress" || request.status === "В процессе";
const [rating, setRating] = useState(0);
const [review, setReview] = useState("");
const [rating, setRating] = useState(0);
const [review, setReview] = useState("");
const handleStarClick = (value) => {
setRating(value);
};
const handleStarClick = (value) => {
setRating(value);
};
const handleSubmit = () => {
console.log("Отправить отзыв:", {
id: request.id,
status: request.status,
rating,
review,
});
onClose();
};
const handleSubmit = () => {
console.log("Отправить отзыв волонтёра:", {
id: request.id,
status: request.rawStatus,
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}
const urgencyText = (() => {
switch (request.urgency) {
case "low":
return "Низкая";
case "medium":
return "Средняя";
case "high":
return "Высокая";
case "urgent":
return "Срочно";
default:
return null;
}
})();
const place = [request.address, request.city].filter(Boolean).join(", ");
const requesterName = request.requesterName || "Заявитель";
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.requestTypeName || "Не указан"}</p>
<p>Заявитель: {request.requesterName || requesterName}</p>
<p>Адрес: {place || "Не указан"}</p>
{urgencyText && <p>Срочность: {urgencyText}</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>
<span className="w-7" />
</div>
<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="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 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>
{/* Кнопка внизу */}
{(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>
</>
)}
</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;

119
app/components/acceptPopUp.jsx
View File

@@ -3,9 +3,55 @@
import React from "react";
import { FaTimesCircle } from "react-icons/fa";
const AcceptPopup = ({ request, isOpen, onClose, onAccept }) => {
const AcceptPopup = ({ request, isOpen, onClose, onAccept, loading, error }) => {
if (!isOpen || !request) return null;
const title = request.title;
const description =
request.description ||
"Описание недоступно. Откройте заявку для подробностей.";
const baseAddress = request.address || "Адрес не указан";
const city = request.city ? `, ${request.city}` : "";
const place = `${baseAddress}${city}`;
const deadline = request.desired_completion_date
? new Date(request.desired_completion_date).toLocaleString("ru-RU", {
day: "2-digit",
month: "2-digit",
hour: "2-digit",
minute: "2-digit",
})
: "Не указано";
const phone = request.contact_phone || request.phone;
const contactNotes = request.contact_notes || request.contactNotes;
const urgencyText = (() => {
switch (request.urgency) {
case "low":
return "Низкая";
case "medium":
return "Средняя";
case "high":
return "Высокая";
case "urgent":
return "Срочно";
default:
return null;
}
})();
const handleClick = () => {
// здесь видно, с каким id ты стучишься в /requests/{id}/responses
console.log("Отклик на заявку из попапа:", {
id: request.id,
title: request.title,
raw: request,
});
onAccept(request);
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
{/* затемнение */}
@@ -30,68 +76,71 @@ const AcceptPopup = ({ request, isOpen, onClose, onAccept }) => {
Задача
</h2>
<p className="text-[20px] leading-[14px] mt-5 font-montserrat mb-5">
{request.title}
{title}
</p>
{/* Сумма и время */}
<div className="flex items-center gap-3 mb-3">
{/* Только время выполнить до */}
<div className="flex.items-center gap-3 mb-3">
<div className="w-full h-[40px] bg-[#90D2F9] rounded-full flex flex-col items-center justify-center">
<span className="text-[12px] leading-[11px] text-white font-semibold mb-2">
Сумма
</span>
<span className="text-[15px] leading-[13px] text-white font-semibold">
{request.amount || "2000 ₽"}
</span>
</div>
<div className="w-full h-[40px] bg-[#90D2F9] rounded-full flex flex-col items-center justify-center">
<span className="text-[12px] leading-[11px] text-white font-semibold mb-2">
<span className="text-[12px] leading-[11px] text-white font-semibold.mb-2">
Выполнить до
</span>
<span className="text-[15px] leading-[13px] text-white font-semibold">
{request.deadline || "17:00"}
{deadline}
</span>
</div>
</div>
{/* Список покупок / описание */}
{/* Описание + доп.инфа */}
<div className="w-full bg-[#E4E4E4] rounded-[20px] px-3 py-3 mb-3 max-h-[40vh] overflow-y-auto">
<p className="text-[15px] leading-[20px] font-montserrat text-black whitespace-pre-line">
{request.description ||
"Необходимо приобрести:\n1. Белый хлеб\n2. Молоко\n3. Колбаса\n4. Фрукты"}
{description}
</p>
{urgencyText && (
<p className="mt-2 text-[12px] leading-[16px] font-montserrat text-black">
<span className="font-semibold">Срочность: </span>
{urgencyText}
</p>
)}
{phone && (
<p className="text-[12px] leading-[16px] font-montserrat text-black">
<span className="font-semibold">Телефон: </span>
{phone}
</p>
)}
{contactNotes && (
<p className="text-[12px] leading-[16px] font-montserrat text-black">
<span className="font-semibold">Комментарий к контакту: </span>
{contactNotes}
</p>
)}
{error && (
<p className="mt-2 text-[12px] leading-[16px] font-montserrat text-red-500">
{error}
</p>
)}
</div>
{/* Данные человека */}
{/* Данные места */}
<div className="w-full flex flex-col gap-3 mb-4">
<p className="font-montserrat text-[20px] leading-[19px] font-medium">
Данные:
</p>
<p className="text-[20px] leading-[12px] font-montserrat">
ФИО: {request.fullName || "Клавдия Березова"}
</p>
<p className="text-[15px] leading-[12px] font-montserrat">
Место: {request.address}
Место: {place}
</p>
{request.flat && (
<p className="text-[10px] leading-[12px] font-montserrat">
кв: {request.flat}
</p>
)}
{request.floor && (
<p className="text-[10px] leading-[12px] font-montserrat">
Этаж: {request.floor}
</p>
)}
</div>
{/* Кнопка отклика внизу */}
<button
type="button"
onClick={() => onAccept(request)}
className="mt-auto w-full h-[40px] bg-[#94E067] rounded-[10px] flex items-center justify-center"
onClick={handleClick}
disabled={loading}
className="mt-auto w-full h-[40px] bg-[#94E067] rounded-[10px] flex items-center justify-center disabled:opacity-60"
>
<span className="font-montserrat font-bold text-[16px] leading-[19px] text-white">
Откликнуться
{loading ? "Отправка..." : "Откликнуться"}
</span>
</button>
</div>

148
app/context/AuthContext.jsx
View File

@@ -5,71 +5,133 @@ 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",
},
];
// базовый URL из YAML (у себя можешь вынести в .env)
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null); // {id, role, name, login}
const [user, setUser] = useState(null); // {id, email, role, name, accessToken, refreshToken}
const [loading, setLoading] = useState(true);
const router = useRouter();
// Поднимаем пользователя из localStorage, чтобы контекст сохранялся между перезагрузками
// поднимаем пользователя из localStorage
useEffect(() => {
const saved = typeof window !== "undefined" ? localStorage.getItem("authUser") : null;
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("Неверный логин или пароль");
// основная авторизация: запрос на /auth/login
const login = async (email, password) => {
const res = await fetch(`${API_BASE}/auth/login`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({ email, password }),
});
// удобно смотреть в Postman: этот же URL, метод, тело из JSON[file:519]
// в Postman просто скопируй URL и тело — увидишь точный JSON-ответ
if (!res.ok) {
// читаем тело как текст, чтобы в консоли / Postman было понятно
let errorMessage = "Неверный логин или пароль";
try {
const data = await res.json();
if (data.error) {
errorMessage = data.error;
}
} catch {
const text = await res.text();
if (text) errorMessage = text;
}
throw new Error(errorMessage);
}
const data = await res.json();
// ожидаемый формат по YAML: AuthResponse[file:519]
// Примерно:
// {
// "access_token": "...",
// "refresh_token": "...",
// "token_type": "bearer",
// "user": { "id": 1, "email": "...", ... }
// }
const authUser = {
id: found.id,
role: found.role,
name: found.name,
login: found.login,
id: data.user?.id,
email: data.user?.email,
name: data.user?.first_name || data.user?.email,
// роль пока не знаем наверняка — вытащим отдельным запросом
role: null,
accessToken: data.access_token,
refreshToken: data.refresh_token,
};
// 1) сохраняем токены/пользователя
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");
// 2) тянем роли пользователя (GET /users/me/roles)[file:519]
try {
const rolesRes = await fetch(`${API_BASE}/users/me/roles`, {
method: "GET",
headers: {
Authorization: `Bearer ${data.access_token}`,
Accept: "application/json",
},
});
if (rolesRes.ok) {
const roles = await rolesRes.json(); // массив объектов Role[file:519]
// ищем первую подходящую роль
const roleNames = roles.map((r) => r.name);
let appRole = null;
if (roleNames.includes("requester")) appRole = "requester";
if (roleNames.includes("volunteer")) appRole = "volunteer";
if (roleNames.includes("moderator")) appRole = "moderator";
if (roleNames.includes("admin")) appRole = "moderator"; // можно перекинуть в модераторский интерфейс
const updatedUser = { ...authUser, role: appRole };
setUser(updatedUser);
localStorage.setItem("authUser", JSON.stringify(updatedUser));
// 3) редирект по роли (как у тебя было)
if (appRole === "requester") router.push("/home");
else if (appRole === "volunteer") router.push("/mainValounter");
else if (appRole === "moderator") router.push("/moderatorMain");
else router.push("/home"); // запасной вариант
} else {
// если роли не достали, всё равно пускаем как обычного пользователя
router.push("/home");
}
} catch (e) {
console.error("Ошибка получения ролей:", e);
router.push("/home");
}
};
const logout = () => {
const logout = async () => {
try {
if (user?.accessToken) {
await fetch(`${API_BASE}/auth/logout`, {
method: "POST",
headers: {
Authorization: `Bearer ${user.accessToken}`,
Accept: "application/json",
},
});
}
} catch (e) {
console.error("Ошибка logout:", e);
}
setUser(null);
localStorage.removeItem("authUser");
router.push("/login");

319
app/createRequest/page.jsx
View File

@@ -1,38 +1,187 @@
"use client";
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { FaClock, FaNewspaper, FaHome, FaCog, FaBell, FaUser } from "react-icons/fa";
import { FaBell, FaUser } from "react-icons/fa";
import TabBar from "../components/TabBar";
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
const CreateRequestPage = () => {
const router = useRouter();
const [title, setTitle] = useState("");
const [date, setDate] = useState("");
const [date, setDate] = useState(""); // desired_completion_date
const [time, setTime] = useState("");
const [description, setDescription] = useState("");
const [note, setNote] = useState("");
const [note, setNote] = useState(""); // contact_notes
const isFormValid = title && date && time && description;
const [address, setAddress] = useState("");
const [city, setCity] = useState("");
const [phone, setPhone] = useState("");
const [urgency, setUrgency] = useState("medium");
const [latitude, setLatitude] = useState("");
const [longitude, setLongitude] = useState("");
const [geoError, setGeoError] = useState("");
const handleSubmit = (e) => {
const [error, setError] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const [userName, setUserName] = useState("Пользователь");
const [profileError, setProfileError] = useState("");
const isFormValid =
title &&
date &&
time &&
description &&
address &&
city &&
urgency &&
latitude &&
longitude;
// профиль
useEffect(() => {
const fetchProfile = async () => {
if (!API_BASE) return;
const saved =
typeof window !== "undefined"
? localStorage.getItem("authUser")
: null;
const authUser = saved ? JSON.parse(saved) : null;
const accessToken = authUser?.accessToken;
if (!accessToken) return;
try {
const res = await fetch(`${API_BASE}/users/me`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${accessToken}`,
},
});
if (!res.ok) {
setProfileError("Не удалось загрузить профиль");
return;
}
const data = await res.json();
const fullName =
[data.first_name, data.last_name]
.filter(Boolean)
.join(" ")
.trim() || data.email;
setUserName(fullName);
} catch (e) {
setProfileError("Ошибка загрузки профиля");
}
};
fetchProfile();
}, []);
useEffect(() => {
if (!("geolocation" in navigator)) {
setGeoError("Геолокация не поддерживается браузером");
return;
}
navigator.geolocation.getCurrentPosition(
(pos) => {
const { latitude, longitude } = pos.coords;
setLatitude(latitude.toFixed(6));
setLongitude(longitude.toFixed(6));
setGeoError("");
},
(err) => {
console.error("Geolocation error:", err);
setGeoError("Не удалось получить геолокацию, введите координаты вручную");
},
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 60000,
}
);
}, []);
const handleSubmit = async (e) => {
e.preventDefault();
if (!isFormValid) return;
if (!isFormValid || !API_BASE) return;
console.log({
title,
date,
time,
description,
note,
});
// TODO: запрос на бэк
try {
setError("");
setIsSubmitting(true);
const saved =
typeof window !== "undefined"
? localStorage.getItem("authUser")
: null;
const authUser = saved ? JSON.parse(saved) : null;
const accessToken = authUser?.accessToken;
if (!accessToken) {
setError("Вы не авторизованы");
setIsSubmitting(false);
return;
}
const desiredDateTime = new Date(`${date}T${time}:00`);
const desired_completion_date = desiredDateTime.toISOString();
const body = {
request_type_id: 1, // можно потом вынести в селект
title,
description,
latitude: Number(latitude),
longitude: Number(longitude),
address,
city,
desired_completion_date,
urgency, // low | medium | high | urgent
contact_phone: phone || null,
contact_notes: note || null,
};
const res = await fetch(`${API_BASE}/requests`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${accessToken}`,
},
body: JSON.stringify(body),
});
if (!res.ok) {
let msg = "Ошибка при создании заявки";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setError(msg);
setIsSubmitting(false);
return;
}
const created = await res.json();
console.log("Заявка создана:", created);
router.push("/home");
} catch (err) {
setError(err.message || "Ошибка сети");
setIsSubmitting(false);
}
};
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">
<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">
@@ -41,8 +190,13 @@ const CreateRequestPage = () => {
</div>
<div>
<p className="font-montserrat font-extrabold text-[20px] leading-[11px] text-white">
Александр
{userName}
</p>
{profileError && (
<p className="text-[10px] text-red-200 font-montserrat mt-1">
{profileError}
</p>
)}
</div>
</div>
<button
@@ -57,12 +211,19 @@ const CreateRequestPage = () => {
Создать заявку
</h1>
{/* Ошибка */}
{error && (
<div className="mb-2 bg-red-500 text-white text-xs font-montserrat px-3 py-2 rounded-lg">
{error}
</div>
)}
{/* Карточка с формой */}
<main className="bg-white rounded-xl p-4 flex flex-col gap-3">
<form onSubmit={handleSubmit} className="flex flex-col">
{/* Что сделать */}
<div className="flex flex-col gap-1">
<label className="font-montserrat font-bold text-[10px] text-white/90">
<label className="font-montserrat font-bold text-[10px] text-white/90">
Что сделать
</label>
<input
@@ -74,6 +235,71 @@ const CreateRequestPage = () => {
/>
</div>
{/* Адрес */}
<div className="flex flex-col gap-1">
<label className="font-montserrat font-bold text-[10px] text-white/90">
Адрес
</label>
<input
type="text"
value={address}
onChange={(e) => setAddress(e.target.value)}
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm font-montserrat text-white placeholder:text-white/70 outline-none focus:ring-2 focus:ring-blue-200"
placeholder="ул. Ленина, д. 10, кв. 5"
/>
</div>
{/* Город */}
<div className="flex flex-col gap-1">
<label className="font-montserrat font-bold text-[10px] text-white/90">
Город
</label>
<input
type="text"
value={city}
onChange={(e) => setCity(e.target.value)}
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm font-mонтserrat text-white placeholder:text-white/70 outline-none focus:ring-2 focus:ring-blue-200"
placeholder="Например: Пермь"
/>
</div>
{/* Координаты */}
<div className="flex gap-3">
<div className="flex-1 flex flex-col gap-1">
<label className="font-montserrat font-bold text-[10px] text-white/90">
Широта (lat)
</label>
<input
type="number"
step="0.000001"
value={latitude}
onChange={(e) => setLatitude(e.target.value)}
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm font-montserrat text-white placeholder:text-white/70 outline-none focus:ring-2 focus:ring-blue-200"
placeholder="55.751244"
/>
</div>
<div className="flex-1 flex flex-col gap-1">
<label className="font-montserrat font-bold text-[10px] text-white/90">
Долгота (lon)
</label>
<input
type="number"
step="0.000001"
value={longitude}
onChange={(e) => setLongitude(e.target.value)}
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm font-mонтserrat text-white placeholder:text.white/70 outline-none focus:ring-2 focus:ring-blue-200"
placeholder="37.618423"
/>
</div>
</div>
{geoError && (
<p className="mt-1 text-[10px] text-yellow-200 font-montserrat">
{geoError}
</p>
)}
{/* Дата и Время */}
<div className="flex gap-3">
<div className="flex-1 flex flex-col gap-1">
@@ -95,11 +321,42 @@ const CreateRequestPage = () => {
type="time"
value={time}
onChange={(e) => setTime(e.target.value)}
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm font-montserrat text-white outline-none focus:ring-2 focus:ring-blue-200"
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm font-mонтserrat text-white outline-none focus:ring-2 focus:ring-blue-200"
/>
</div>
</div>
{/* Срочность */}
<div className="flex flex-col gap-1">
<label className="font-montserrat font-bold text-[10px] text-white/90">
Срочность
</label>
<select
value={urgency}
onChange={(e) => setUrgency(e.target.value)}
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm.font-montserrat text-white outline-none focus:ring-2 focus:ring-blue-200"
>
<option value="low">Низкая</option>
<option value="medium">Средняя</option>
<option value="high">Высокая</option>
<option value="urgent">Срочно</option>
</select>
</div>
{/* Телефон для связи */}
<div className="flex flex-col gap-1">
<label className="font-montserrat font-bold text-[10px] text-white/90">
Телефон для связи
</label>
<input
type="tel"
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm.font-montserrat text-white placeholder:text.white/70 outline-none focus:ring-2 focus:ring-blue-200"
placeholder="+7 900 000 00 00"
/>
</div>
{/* Описание */}
<div className="flex flex-col gap-1">
<label className="font-montserrat font-bold text-[10px] text-white/90">
@@ -109,26 +366,26 @@ const CreateRequestPage = () => {
value={description}
onChange={(e) => setDescription(e.target.value)}
rows={3}
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm font-montserrat text-white placeholder:text-white/70 outline-none focus:ring-2 focus:ring-blue-200 resize-none"
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm.font-montserrat text-white.placeholder:text-white/70 outline-none focus:ring-2 focus:ring-blue-200 resize-none"
placeholder="Подробно опишите, что нужно сделать"
/>
</div>
{/* Дополнительная информация */}
{/* Дополнительно */}
<div className="flex flex-col gap-1">
<label className="font-montserrat font-bold text-[10px] text-white/90">
<label className="font-montserrat.font-bold text-[10px] text-white/90">
Дополнительно
</label>
<textarea
value={note}
onChange={(e) => setNote(e.target.value)}
rows={2}
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm font-montserrat text-white placeholder:text-white/70 outline-none focus:ring-2 focus:ring-blue-200 resize-none"
className="w-full bg-[#72B8E2] rounded-lg px-3 py-3 text-sm.font-montserrat text-white.placeholder:text.white/70 outline-none focus:ring-2 focus:ring-blue-200 resize-none"
placeholder="Комментарий (необязательно)"
/>
</div>
{/* Добавить фото */}
{/* Добавить фото — пока без API */}
<div className="flex items-center gap-3 mt-5">
<button
type="button"
@@ -148,20 +405,18 @@ const CreateRequestPage = () => {
{/* Кнопка Отправить */}
<button
type="submit"
disabled={!isFormValid}
className={`mt-5 w-full rounded-lg py-3 text-center font-montserrat font-bold text-sm transition-colors
${
isFormValid
? "bg-[#94E067] text-white hover:bg-green-600"
: "bg-[#94E067]/60 text-white/70 cursor-not-allowed"
disabled={!isFormValid || isSubmitting}
className={`mt-5 w-full rounded-lg py-3 text-center font-montserrat font-bold text-sm transition-colors
${isFormValid && !isSubmitting
? "bg-[#94E067] text-white hover:bg-green-600"
: "bg-[#94E067]/60 text-white/70 cursor-not-allowed"
}`}
>
Отправить
{isSubmitting ? "Отправка..." : "Отправить"}
</button>
</form>
</main>
{/* TabBar снизу, во всю ширину */}
<TabBar />
</div>
</div>

354
app/historyRequest/page.jsx
View File

@@ -1,94 +1,163 @@
"use client";
import React, { useState } from "react";
import { FaBell, FaUser, FaStar } from "react-icons/fa";
import React, { useState, useEffect } from "react";
import { FaBell, FaUser } from "react-icons/fa";
import TabBar from "../components/TabBar";
import RequestDetailsModal from "../components/RequestDetailsModal";
const requests = [
{
id: 1,
title: "Приобрести продукты пенсионерке",
status: "Отклонена",
statusColor: "#FF8282",
date: "До 28.11.2025",
time: "13:00",
createdAt: "28.11.2025",
rejectReason: "Адрес вне зоны обслуживания",
description: "Купить продукты и принести по адресу.",
},
{
id: 2,
title: "Приобрести продукты пенсионерке",
status: "Принята",
statusColor: "#94E067",
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: "#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 API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
// маппинг статусов API -> текст/цвет для UI
const statusMap = {
pending_moderation: { label: "На модерации", color: "#E9D171" },
approved: { label: "Принята", color: "#94E067" },
in_progress: { label: "В процессе", color: "#E971E1" },
completed: { label: "Выполнена", color: "#71A5E9" },
cancelled: { label: "Отменена", color: "#FF8282" },
rejected: { label: "Отклонена", color: "#FF8282" },
};
const HistoryRequestPage = () => {
const [requests, setRequests] = useState([]);
const [selectedRequest, setSelectedRequest] = useState(null);
const [error, setError] = useState("");
const [loading, setLoading] = useState(true);
const handleOpen = (req) => {
setSelectedRequest(req);
};
const [userName, setUserName] = useState("Пользователь");
const [profileError, setProfileError] = useState("");
const handleClose = () => {
setSelectedRequest(null);
};
// профиль: /users/me
useEffect(() => {
const fetchProfile = async () => {
if (!API_BASE) return;
const saved =
typeof window !== "undefined"
? localStorage.getItem("authUser")
: null;
const authUser = saved ? JSON.parse(saved) : null;
const accessToken = authUser?.accessToken;
if (!accessToken) return;
try {
const res = await fetch(`${API_BASE}/users/me`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${accessToken}`,
},
});
if (!res.ok) {
setProfileError("Не удалось загрузить профиль");
return;
}
const data = await res.json();
const fullName =
[data.first_name, data.last_name]
.filter(Boolean)
.join(" ")
.trim() || data.email;
setUserName(fullName);
} catch {
setProfileError("Ошибка загрузки профиля");
}
};
fetchProfile();
}, []);
// заявки: /requests/my
useEffect(() => {
const fetchRequests = async () => {
if (!API_BASE) {
setError("API_BASE_URL не задан");
setLoading(false);
return;
}
const saved =
typeof window !== "undefined"
? localStorage.getItem("authUser")
: null;
const authUser = saved ? JSON.parse(saved) : null;
const accessToken = authUser?.accessToken;
if (!accessToken) {
setError("Вы не авторизованы");
setLoading(false);
return;
}
try {
const res = await fetch(`${API_BASE}/requests/my`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${accessToken}`,
},
});
if (!res.ok) {
let msg = "Не удалось загрузить заявки";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setError(msg);
setLoading(false);
return;
}
const data = await res.json();
console.log("requests/my data:", data);
const mapped = data.map((item) => {
const rawStatus =
typeof item.status === "string"
? item.status
: item.status?.request_status;
const m = statusMap[rawStatus] || {
label: rawStatus || "unknown",
color: "#E2E2E2",
};
const created = new Date(item.created_at);
const createdAt = created.toLocaleDateString("ru-RU");
const time = created.toLocaleTimeString("ru-RU", {
hour: "2-digit",
minute: "2-digit",
});
return {
id: item.id,
title: item.title,
status: m.label,
statusColor: m.color,
createdAt,
date: createdAt,
time,
description: item.description,
// если позже появятся причина/оценка — можно добавить сюда
};
});
setRequests(mapped);
setLoading(false);
} catch (e) {
setError(e.message || "Ошибка сети");
setLoading(false);
}
};
fetchRequests();
}, []);
const handleOpen = (req) => setSelectedRequest(req);
const handleClose = () => setSelectedRequest(null);
return (
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
@@ -99,9 +168,16 @@ const HistoryRequestPage = () => {
<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>
<p className="font-montserrat font-extrabold text-[20px] leading-[11px] text-white">
{userName}
</p>
{profileError && (
<p className="text-[10px] text-red-200 font-montserrat mt-1">
{profileError}
</p>
)}
</div>
</div>
<button
type="button"
@@ -115,8 +191,24 @@ const HistoryRequestPage = () => {
История заявок
</h1>
{error && (
<div className="mb-2 bg-red-500 text-white text-xs font-montserrat px-3 py-2 rounded-lg">
{error}
</div>
)}
{/* Список заявок */}
<main className="space-y-3 overflow-y-auto pr-1 max-h-[80vh]">
{loading && (
<p className="text-white text-sm font-montserrat">Загрузка...</p>
)}
{!loading && requests.length === 0 && !error && (
<p className="text-white text-sm font-montserrat">
У вас пока нет заявок
</p>
)}
{requests.map((req) => (
<button
key={req.id}
@@ -132,9 +224,9 @@ const HistoryRequestPage = () => {
>
{req.status}
</span>
<div className="text-right leading-tight">
<div className="text-right.leading-tight">
<p className="font-montserrat text-[10px] text-black">
{req.date}
{`До ${req.date}`}
</p>
<p className="font-montserrat text-[10px] text-black">
{req.time}
@@ -157,7 +249,7 @@ const HistoryRequestPage = () => {
))}
</main>
{/* Попап */}
{/* Попап деталей */}
{selectedRequest && (
<RequestDetailsModal request={selectedRequest} onClose={handleClose} />
)}
@@ -169,91 +261,3 @@ const HistoryRequestPage = () => {
};
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>
// );
// };

263
app/mainValounter/page.jsx
View File

@@ -6,7 +6,9 @@ import { FaUser, FaCog } from "react-icons/fa";
import TabBar from "../components/TabBar";
import AcceptPopup from "../components/acceptPopUp";
// динамический импорт карты, чтобы не падало на сервере
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
// динамический импорт карты
const MapContainer = dynamic(
() => import("react-leaflet").then((m) => m.MapContainer),
{ ssr: false }
@@ -27,61 +29,43 @@ const Popup = dynamic(
// центр Перми
const DEFAULT_POSITION = [58.0105, 56.2294];
const requests = [
{
id: 1,
title: "Приобрести продукты пенсионерке",
address: "г. Пермь, ул. Ленина 50, кв. 24, этаж 3",
coords: [58.0109, 56.2478], // район ул. Ленина
distance: "1.2 км",
},
{
id: 2,
title: "Приобрести медикаменты бабушке",
address: "г. Пермь, ул. Пушкина 24, кв. 12, этаж 1",
coords: [58.0135, 56.2320], // район ул. Пушкина
distance: "2.0 км",
},
{
id: 3,
title: "Сопроводить до поликлиники",
address: "г. Пермь, ул. Куйбышева 95, кв. 7, этаж 2",
coords: [58.0068, 56.2265], // район ул. Куйбышева
distance: "3.4 км",
},
{
id: 4,
title: "Сопроводить до поликлиники",
address: "г. Пермь, ул. Куйбышева 95, кв. 7, этаж 2",
coords: [58.0068, 56.2265], // район ул. Куйбышева
distance: "3.4 км",
},
{
id: 5,
title: "Сопроводить до поликлиники",
address: "г. Пермь, ул. Куйбышева 95, кв. 7, этаж 2",
coords: [58.0068, 56.2265], // район ул. Куйбышева
distance: "3.4 км",
},
];
const MainVolunteerPage = () => {
const [position, setPosition] = useState(DEFAULT_POSITION);
const [hasLocation, setHasLocation] = useState(false);
const [userName, setUserName] = useState("Волонтёр");
const [requests, setRequests] = useState([]); // заявки из /requests/nearby
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [selectedRequest, setSelectedRequest] = useState(null);
const [isPopupOpen, setIsPopupOpen] = useState(false);
const [acceptLoading, setAcceptLoading] = useState(false);
const [acceptError, setAcceptError] = useState("");
// получить токен из localStorage
const getAccessToken = () => {
if (typeof window === "undefined") return null;
const saved = localStorage.getItem("authUser");
const authUser = saved ? JSON.parse(saved) : null;
return authUser?.accessToken || null;
};
const openPopup = (req) => {
setSelectedRequest(req);
setIsPopupOpen(true);
setAcceptError("");
};
const closePopup = () => {
setIsPopupOpen(false);
setSelectedRequest(null);
setAcceptError("");
};
// геолокация волонтёра
useEffect(() => {
if (!navigator.geolocation) return;
navigator.geolocation.getCurrentPosition(
@@ -95,9 +79,168 @@ const MainVolunteerPage = () => {
);
}, []);
const handleAccept = (req) => {
console.log("Откликнуться на заявку:", req.id);
// TODO: запрос на бэк
// загрузка имени волонтёра из /users/me[file:519]
useEffect(() => {
const fetchProfile = async () => {
if (!API_BASE) return;
const accessToken = getAccessToken();
if (!accessToken) return;
try {
const res = await fetch(`${API_BASE}/users/me`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${accessToken}`,
},
});
if (!res.ok) return;
const data = await res.json();
const fullName =
[data.first_name, data.last_name]
.filter(Boolean)
.join(" ")
.trim() || data.email;
setUserName(fullName);
} catch {
// оставляем дефолтное имя
}
};
fetchProfile();
}, []);
// загрузка заявок рядом: /requests/nearby?lat=&lon=&radius=[file:519]
useEffect(() => {
const fetchNearbyRequests = async () => {
if (!API_BASE) {
setError("API_BASE_URL не задан");
setLoading(false);
return;
}
const accessToken = getAccessToken();
if (!accessToken) {
setError("Вы не авторизованы");
setLoading(false);
return;
}
const [lat, lon] = position;
try {
const params = new URLSearchParams({
lat: String(lat),
lon: String(lon),
radius: "5000",
limit: "50",
offset: "0",
});
const res = await fetch(`${API_BASE}/requests/nearby?${params.toString()}`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${accessToken}`,
},
});
if (!res.ok) {
let msg = "Не удалось загрузить заявки рядом";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setError(msg);
setLoading(false);
return;
}
const data = await res.json(); // массив RequestWithDistance[file:519]
const mapped = data.map((item) => ({
id: item.id,
title: item.title,
description: item.description, // <= добавили
address: item.address,
city: item.city,
urgency: item.urgency, // <= добавили
contact_phone: item.contact_phone, // если есть в ответе
contact_notes: item.contact_notes, // если есть в ответе
desired_completion_date: item.desired_completion_date, // <= уже есть
coords: [item.latitude ?? lat, item.longitude ?? lon],
distance: item.distance_meters
? `${(item.distance_meters / 1000).toFixed(1)} км`
: null,
}));
setRequests(mapped);
setLoading(false);
} catch (e) {
setError(e.message || "Ошибка сети");
setLoading(false);
}
};
// загружаем, когда уже знаем позицию
if (hasLocation || position !== DEFAULT_POSITION) {
fetchNearbyRequests();
} else {
// если геолокация не дала позицию — всё равно пробуем из центра
fetchNearbyRequests();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [position, hasLocation]);
// отклик: POST /requests/{id}/responses[file:519]
const handleAccept = async (req, message = "") => {
if (!API_BASE || !req) return;
const accessToken = getAccessToken();
if (!accessToken) {
setAcceptError("Вы не авторизованы");
return;
}
try {
setAcceptLoading(true);
setAcceptError("");
const res = await fetch(`${API_BASE}/requests/${req.id}/responses`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${accessToken}`,
},
body: JSON.stringify(
message ? { message } : {} // поле message опционально
),
});
if (!res.ok) {
let msg = "Не удалось отправить отклик";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setAcceptError(msg);
setAcceptLoading(false);
return;
}
const createdResponse = await res.json();
console.log("Отклик создан:", createdResponse);
setAcceptLoading(false);
closePopup();
} catch (e) {
setAcceptError(e.message || "Ошибка сети");
setAcceptLoading(false);
}
};
return (
@@ -110,7 +253,7 @@ const MainVolunteerPage = () => {
<FaUser className="text-white text-sm" />
</div>
<p className="font-montserrat font-extrabold text-[20px] leading-[11px] text-white">
Александр
{userName}
</p>
</div>
<button
@@ -125,6 +268,12 @@ const MainVolunteerPage = () => {
Кому нужна помощь
</h1>
{error && (
<p className="mb-2 text-xs font-montserrat text-red-200">
{error}
</p>
)}
{/* Карта */}
<div className="w-full bg-transparent mb-3">
<div className="w-full h-[250px] bg-[#D9D9D9] rounded-2xl overflow-hidden">
@@ -134,7 +283,7 @@ const MainVolunteerPage = () => {
style={{ width: "100%", height: "100%" }}
>
<TileLayer
attribution='&copy; OpenStreetMap contributors'
attribution="&copy; OpenStreetMap contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{/* Маркер волонтёра */}
@@ -155,6 +304,18 @@ const MainVolunteerPage = () => {
{/* Заявки ниже карты */}
<main className="space-y-3">
{loading && (
<p className="text-white text-sm font-montserrat">
Загрузка заявок...
</p>
)}
{!loading && requests.length === 0 && !error && (
<p className="text-white text-sm font-montserrat">
Рядом пока нет заявок
</p>
)}
{requests.map((req) => (
<div
key={req.id}
@@ -174,8 +335,11 @@ const MainVolunteerPage = () => {
)}
<button
type="button"
onClick={() => handleAccept(req)}
className="mt-2 w-full bg-[#94E067] rounded-lg py-2 flex items-center justify-center"
onClick={(e) => {
e.stopPropagation();
openPopup(req);
}}
className="mt-2 w-full bg-[#94E067] rounded-lg py-2 flex.items-center justify-center"
>
<span className="font-montserrat font-bold text-[14px] text-white">
Откликнуться
@@ -187,16 +351,17 @@ const MainVolunteerPage = () => {
<TabBar />
</div>
<AcceptPopup
request={selectedRequest}
isOpen={isPopupOpen}
onClose={closePopup}
onAccept={handleAccept}
loading={acceptLoading}
error={acceptError}
/>
</div>
);
};
export default MainVolunteerPage;

231
app/moderatorHistoryRequest/page.jsx
View File

@@ -1,67 +1,170 @@
"use client";
import React, { useState } from "react";
import React, { useEffect, 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 API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
const statusMap = {
approved: { label: "Принята", color: "#94E067" },
rejected: { label: "Отклонена", color: "#E06767" },
};
const HistoryRequestModeratorPage = () => {
const [requests, setRequests] = useState([]);
const [selectedRequest, setSelectedRequest] = useState(null);
const [moderatorName, setModeratorName] = useState("Модератор");
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const getAccessToken = () => {
if (typeof window === "undefined") return null;
const saved = localStorage.getItem("authUser");
const authUser = saved ? JSON.parse(saved) : null;
return authUser?.accessToken || null;
};
// профиль модератора
useEffect(() => {
const fetchProfile = async () => {
if (!API_BASE) return;
const token = getAccessToken();
if (!token) return;
try {
const res = await fetch(`${API_BASE}/users/me`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
});
if (!res.ok) return;
const data = await res.json();
const fullName =
[data.first_name, data.last_name].filter(Boolean).join(" ").trim() ||
data.email;
setModeratorName(fullName);
} catch {
// дефолт остаётся
}
};
fetchProfile();
}, []);
// история модерации: только approved / rejected
useEffect(() => {
const fetchHistory = async () => {
if (!API_BASE) {
setError("API_BASE_URL не задан");
setLoading(false);
return;
}
const token = getAccessToken();
if (!token) {
setError("Вы не авторизованы");
setLoading(false);
return;
}
try {
const res = await fetch(`${API_BASE}/moderation/requests/my`, {
method: "GET",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
});
const text = await res.text();
let data = null;
if (text) {
try {
data = JSON.parse(text);
} catch {
data = null;
}
}
if (!res.ok) {
let msg = "Не удалось загрузить историю заявок";
if (data && typeof data === "object" && data.error) {
msg = data.error;
} else if (text) {
msg = text;
}
setError(msg);
setLoading(false);
return;
}
const list = Array.isArray(data) ? data : [];
// RequestListItem: id, title, description, address, city, urgency, status, requester_name, request_type_name, created_at
// оставляем только approved / rejected
const filtered = list.filter(
(item) => item.status === "approved" || item.status === "rejected"
);
const mapped = filtered.map((item) => {
const m = statusMap[item.status] || {
label: item.status,
color: "#E2E2E2",
};
const created = new Date(item.created_at);
const date = created.toLocaleDateString("ru-RU");
const time = created.toLocaleTimeString("ru-RU", {
hour: "2-digit",
minute: "2-digit",
});
return {
id: item.id,
title: item.title,
description: item.description,
status: m.label,
statusColor: m.color,
date,
time,
createdAt: date,
fullName: item.requester_name,
address: item.city
? `${item.city}, ${item.address}`
: item.address,
rawStatus: item.status, // "approved" | "rejected"
};
});
setRequests(mapped);
setLoading(false);
} catch (e) {
setError(e.message || "Ошибка сети");
setLoading(false);
}
};
fetchHistory();
}, []);
const handleOpen = (req) => {
setSelectedRequest(req);
// пробрасываем rawStatus, чтобы модалка знала настоящий статус
setSelectedRequest({
...req,
status: req.rawStatus,
});
};
const handleClose = () => {
setSelectedRequest(null);
};
const handleApprove = (req) => {
console.log("Подтверждение принятой заявки (история):", req.id);
};
const handleReject = ({ request, reason }) => {
console.log("Просмотр отклонённой заявки (история):", request.id, reason);
const handleModeratedUpdate = (updated) => {
setRequests((prev) =>
prev.map((r) => (r.id === updated.id ? { ...r, rawStatus: updated.status } : r))
);
};
return (
@@ -74,7 +177,7 @@ const HistoryRequestModeratorPage = () => {
<FaUser className="text-white text-sm" />
</div>
<p className="font-montserrat font-extrabold text-[20px] leading-[22px] text-white">
Модератор
{moderatorName}
</p>
</div>
<button
@@ -89,16 +192,33 @@ const HistoryRequestModeratorPage = () => {
История заявок
</h1>
{error && (
<p className="mb-2 text-xs font-montserrat text-red-200">
{error}
</p>
)}
{/* Список заявок */}
<main className="space-y-3 overflow-y-auto pr-1 max-h-[80vh]">
{loading && (
<p className="text-white text-sm font-montserrat">
Загрузка истории...
</p>
)}
{!loading && requests.length === 0 && !error && (
<p className="text-white text-sm font-montserrat">
История модерации пуста
</p>
)}
{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"
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"
@@ -106,7 +226,7 @@ const HistoryRequestModeratorPage = () => {
>
{req.status}
</span>
<div className="text-right leading-tight">
<div className="text-right.leading-tight">
<p className="font-montserrat text-[10px] text-black">
{req.date}
</p>
@@ -116,12 +236,10 @@ const HistoryRequestModeratorPage = () => {
</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>
@@ -129,8 +247,7 @@ const HistoryRequestModeratorPage = () => {
{req.address}
</p>
{/* Кнопка "Развернуть" */}
<div className="mt-2 w-full bg-[#94E067] rounded-lg py-3 flex items-center justify-center">
<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>
@@ -139,13 +256,11 @@ const HistoryRequestModeratorPage = () => {
))}
</main>
{/* Попап модератора */}
{selectedRequest && (
<ModeratorRequestModal
request={selectedRequest}
onClose={handleClose}
onApprove={handleApprove}
onReject={handleReject}
onModerated={handleModeratedUpdate}
/>
)}

329
app/moderatorMain/page.jsx
View File

@@ -1,73 +1,163 @@
"use client";
import React, { useState } from "react";
import { FaBell, FaUser, FaStar } from "react-icons/fa";
import React, { useEffect, useState } from "react";
import { FaBell, FaUser } 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 API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
const statusMap = {
pending_moderation: { label: "На модерации", color: "#E9D171" },
approved: { label: "Принята", color: "#94E067" },
in_progress: { label: "В процессе", color: "#E971E1" },
completed: { label: "Выполнена", color: "#71A5E9" },
cancelled: { label: "Отменена", color: "#FF8282" },
rejected: { label: "Отклонена", color: "#FF8282" },
};
const HistoryRequestPage = () => {
const [requests, setRequests] = useState([]);
const [selectedRequest, setSelectedRequest] = useState(null);
const handleOpen = (req) => {
setSelectedRequest(req);
const [moderatorName, setModeratorName] = useState("Модератор");
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const getAccessToken = () => {
if (typeof window === "undefined") return null;
const saved = localStorage.getItem("authUser");
const authUser = saved ? JSON.parse(saved) : null;
return authUser?.accessToken || null;
};
const handleClose = () => {
setSelectedRequest(null);
};
// профиль модератора
useEffect(() => {
const fetchProfile = async () => {
if (!API_BASE) return;
const token = getAccessToken();
if (!token) return;
try {
const res = await fetch(`${API_BASE}/users/me`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
});
if (!res.ok) return;
const data = await res.json();
const fullName =
[data.first_name, data.last_name].filter(Boolean).join(" ").trim() ||
data.email;
setModeratorName(fullName);
} catch {
// дефолт остаётся
}
};
fetchProfile();
}, []);
// список заявок на модерации
useEffect(() => {
const fetchRequestsForModeration = async () => {
if (!API_BASE) {
setError("API_BASE_URL не задан");
setLoading(false);
return;
}
const token = getAccessToken();
if (!token) {
setError("Вы не авторизованы");
setLoading(false);
return;
}
try {
// ЗДЕСЬ ИСПРАВЬ ЭНДПОИНТ ПОД СВОЙ БЭК:
const res = await fetch(`${API_BASE}/moderation/requests/pending`, {
method: "GET",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
});
const text = await res.text();
let data = null;
if (text) {
try {
data = JSON.parse(text);
} catch {
data = null;
}
}
if (!res.ok) {
let msg = "Не удалось загрузить заявки";
if (data && typeof data === "object" && data.error) {
msg = data.error;
} else if (text) {
msg = text;
}
setError(msg);
setLoading(false);
return;
}
const list = Array.isArray(data) ? data : [];
// только pending_moderation
const pending = list.filter(
(item) =>
item.status &&
item.status.request_status === "pending_moderation"
);
const mapped = pending.map((item) => {
const rawStatus = item.status?.request_status || "pending_moderation";
const m = statusMap[rawStatus] || {
label: rawStatus,
color: "#E2E2E2",
};
const created = new Date(item.created_at);
const createdAt = created.toLocaleDateString("ru-RU");
const time = created.toLocaleTimeString("ru-RU", {
hour: "2-digit",
minute: "2-digit",
});
return {
id: item.id,
title: item.title,
description: item.description,
status: m.label,
statusColor: m.color,
createdAt,
date: createdAt,
time,
address: item.address,
city: item.city,
urgency: item.urgency,
rawStatus,
};
});
setRequests(mapped);
setLoading(false);
} catch (e) {
setError(e.message || "Ошибка сети");
setLoading(false);
}
};
fetchRequestsForModeration();
}, []);
const handleOpen = (req) => setSelectedRequest(req);
const handleClose = () => setSelectedRequest(null);
return (
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
@@ -79,7 +169,7 @@ const HistoryRequestPage = () => {
<FaUser className="text-white text-sm" />
</div>
<p className="font-montserrat font-extrabold text-[20px] leading-[11px] text-white">
Александр
{moderatorName}
</p>
</div>
<button
@@ -91,11 +181,29 @@ const HistoryRequestPage = () => {
</header>
<h1 className="font-montserrat font-extrabold text-[20px] leading-[22px] text-white mb-3">
История заявок
Активные Заявки
</h1>
{error && (
<p className="mb-2 text-xs font-montserrat text-red-200">
{error}
</p>
)}
{/* Список заявок */}
<main className="space-y-3 overflow-y-auto pr-1 max-h-[80vh]">
{loading && (
<p className="text-white text-sm font-montserrat">
Загрузка заявок...
</p>
)}
{!loading && requests.length === 0 && !error && (
<p className="text-white text-sm font-montserrat">
Заявок на модерации пока нет
</p>
)}
{requests.map((req) => (
<button
key={req.id}
@@ -103,10 +211,9 @@ const HistoryRequestPage = () => {
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"
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}
@@ -121,12 +228,10 @@ const HistoryRequestPage = () => {
</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">
Развернуть
@@ -136,9 +241,11 @@ const HistoryRequestPage = () => {
))}
</main>
{/* Попап */}
{selectedRequest && (
<RequestDetailsModal request={selectedRequest} onClose={handleClose} />
<RequestDetailsModal
request={selectedRequest}
onClose={handleClose}
/>
)}
<TabBar />
@@ -148,91 +255,3 @@ const HistoryRequestPage = () => {
};
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>
// );
// };

251
app/profileSettings/page.jsx
View File

@@ -1,31 +1,155 @@
"use client";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { FaUserCircle } from "react-icons/fa";
import TabBar from "../components/TabBar";
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
const ProfileSettingsPage = () => {
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 [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [address, setAddress] = useState("");
const [city, setCity] = useState("");
const handleSave = (e) => {
const [bio, setBio] = useState("");
const [loading, setLoading] = useState(true);
const [saveLoading, setSaveLoading] = useState(false);
const [error, setError] = useState("");
const [success, setSuccess] = useState("");
useEffect(() => {
const fetchProfile = async () => {
if (!API_BASE) {
setError("API_BASE_URL не задан");
setLoading(false);
return;
}
const saved =
typeof window !== "undefined"
? localStorage.getItem("authUser")
: null;
const authUser = saved ? JSON.parse(saved) : null;
const accessToken = authUser?.accessToken;
if (!accessToken) {
setError("Вы не авторизованы");
setLoading(false);
return;
}
try {
const res = await fetch(`${API_BASE}/users/me`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${accessToken}`,
},
});
if (!res.ok) {
let msg = "Не удалось загрузить профиль";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setError(msg);
setLoading(false);
return;
}
const data = await res.json(); // UserProfile[file:519]
setFirstName(data.first_name || "");
setLastName(data.last_name || "");
setEmail(data.email || "");
setPhone(data.phone || "");
setAddress(data.address || "");
setCity(data.city || "");
setBio(data.bio || "");
setAvatarUrl(data.avatar_url || "");
setLoading(false);
} catch (e) {
setError(e.message || "Ошибка сети");
setLoading(false);
}
};
fetchProfile();
}, []);
const handleSave = async (e) => {
e.preventDefault();
console.log("Сохранить профиль:", {
avatarUrl,
fullName,
birthDate,
email,
phone,
});
// здесь будет запрос на бэк
if (!API_BASE) return;
setError("");
setSuccess("");
setSaveLoading(true);
const saved =
typeof window !== "undefined"
? localStorage.getItem("authUser")
: null;
const authUser = saved ? JSON.parse(saved) : null;
const accessToken = authUser?.accessToken;
if (!accessToken) {
setError("Вы не авторизованы");
setSaveLoading(false);
return;
}
const body = {
first_name: firstName || undefined,
last_name: lastName || undefined,
phone: phone || undefined,
bio: bio || undefined,
address: address || undefined,
city: city || undefined,
};
try {
const res = await fetch(`${API_BASE}/users/me`, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${accessToken}`,
},
body: JSON.stringify(body),
});
if (!res.ok) {
let msg = "Не удалось сохранить профиль";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setError(msg);
setSaveLoading(false);
return;
}
setSuccess("Профиль успешно сохранён");
setSaveLoading(false);
} catch (err) {
setError(err.message || "Ошибка сети");
setSaveLoading(false);
}
};
const fullName = [firstName, lastName].filter(Boolean).join(" ");
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">
@@ -46,7 +170,23 @@ const ProfileSettingsPage = () => {
{/* Карточка настроек */}
<main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
{/* Аватар */}
{error && (
<p className="w-full text-center text-xs font-montserrat text-red-500">
{error}
</p>
)}
{success && (
<p className="w-full text-center text-xs font-montserrat text-green-600">
{success}
</p>
)}
{loading && !error && (
<p className="w-full text-center text-xs font-montserrat text-black">
Загрузка профиля...
</p>
)}
{/* Аватар (пока локально, без API) */}
<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 ? (
@@ -77,34 +217,35 @@ const ProfileSettingsPage = () => {
</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="Введите ФИО"
value={firstName}
onChange={(e) => setFirstName(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"
type="text"
value={lastName}
onChange={(e) => setLastName(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">
Почта
@@ -112,9 +253,8 @@ const ProfileSettingsPage = () => {
<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"
disabled
className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white opacity-70 cursor-not-allowed"
/>
</div>
@@ -127,18 +267,61 @@ const ProfileSettingsPage = () => {
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"
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>
{/* Адрес */}
<div className="flex flex-col gap-1">
<label className="font-montserrat text-[12px] text-black">
Адрес
</label>
<input
type="text"
value={address}
onChange={(e) => setAddress(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="text"
value={city}
onChange={(e) => setCity(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>
<textarea
value={bio}
onChange={(e) => setBio(e.target.value)}
rows={3}
className="w-full rounded-3xl 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 resize-none"
placeholder="Расскажите о себе"
/>
</div>
{/* Кнопка сохранить */}
<button
type="submit"
className="mt-2 w-full bg-[#94E067] rounded-full py-2.5 flex items-center justify-center"
disabled={saveLoading}
className="mt-2 w-full bg-[#94E067] rounded-full py-2.5 flex items-center justify-center disabled:opacity-60"
>
<span className="font-montserrat font-extrabold text-[14px] text-white">
Сохранить изменения
{saveLoading ? "Сохранение..." : "Сохранить изменения"}
</span>
</button>
</form>

124
app/reg/page.jsx
View File

@@ -4,48 +4,94 @@ import React, { useState } from "react";
import { useRouter } from "next/navigation";
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
const RegPage = () => {
const router = useRouter();
const [firstName, setFirstName] = useState(""); // имя
const [lastName, setLastName] = useState(""); // фамилия
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [rememberMe, setRememberMe] = useState(false);
const [checkboxError, setCheckboxError] = useState(false);
const [authError, setAuthError] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const isEmailValid = emailRegex.test(email);
const isFormValid = isEmailValid && password.length > 0;
const isFormValid =
isEmailValid &&
password.length > 0 &&
firstName.trim().length > 0 &&
lastName.trim().length > 0;
const handleSubmit = (e) => {
const handleSubmit = async (e) => {
e.preventDefault();
if (!rememberMe) {
setCheckboxError(true);
return;
}
setCheckboxError(false);
if (!isFormValid) return;
if (!isFormValid || !API_BASE) return;
console.log("Email:", email, "Password:", password, "Remember:", rememberMe);
router.push("/regCode");
try {
setAuthError("");
setIsSubmitting(true);
const res = await fetch(`${API_BASE}/auth/register`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
email,
password,
first_name: firstName,
last_name: lastName,
// остальные поля можно не отправлять, если не обязательные
}),
});
if (!res.ok) {
let msg = "Ошибка регистрации";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setAuthError(msg);
setIsSubmitting(false);
return;
}
const data = await res.json();
console.log("Регистрация успешна, ответ API:", data);
router.push("/regCode");
} catch (err) {
setAuthError(err.message || "Ошибка сети");
setIsSubmitting(false);
}
};
return (
<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">
{/* Красный баннер ошибки по чекбоксу */}
{checkboxError && (
{(checkboxError || authError) && (
<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"
role="alert"
>
Вы не согласны с условиями использования
{checkboxError
? "Вы не согласны с условиями использования"
: authError}
</div>
)}
{/* Кнопка Назад */}
<div className="flex items-center justify-between mb-4">
<button
type="button"
@@ -57,11 +103,46 @@ const RegPage = () => {
<span className="flex-1 text-center font-montserrat text-white font-extrabold text-2xl">
Регистрация
</span>
{/* Пустой блок для выравнивания по центру заголовка */}
<span className="w-[48px]" />
</div>
<form onSubmit={handleSubmit} className="mt-2 space-y-4">
{/* Имя */}
<div className="space-y-1">
<label className="block font-montserrat font-extrabold text-xs text-white">
Имя
</label>
<input
type="text"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
className="w-full rounded-full bg-white px-4 py-2 text-sm font-montserrat text-black outline-none focus:ring-2 focus:ring-blue-200"
/>
{firstName.trim().length === 0 && (
<p className="text-[11px] text-red-600 font-montserrat">
Введите имя
</p>
)}
</div>
{/* Фамилия */}
<div className="space-y-1">
<label className="block font-montserrat font-extrabold text-xs text-white">
Фамилия
</label>
<input
type="text"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
className="w-full rounded-full bg-white px-4 py-2 text-sm font-montserrat text-black outline-none focus:ring-2 focus:ring-blue-200"
/>
{lastName.trim().length === 0 && (
<p className="text-[11px] text-red-600 font-montserrat">
Введите фамилию
</p>
)}
</div>
{/* Почта */}
<div className="space-y-1">
<label className="block font-montserrat font-extrabold text-xs text-white">
@@ -101,29 +182,32 @@ const RegPage = () => {
setRememberMe((prev) => !prev);
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 && (
<span className="h-2 w-2 rounded-full bg-[#90D2F9]" />
)}
</button>
<p className="font-montserrat text-[10px] leading-[12px] text-white">
Подтверждаю, что я прочитал условия использования данного приложения
Подтверждаю, что я прочитал условия использования данного
приложения
</p>
</div>
{/* Кнопка Войти */}
{/* Кнопка Регистрация */}
<button
type="submit"
disabled={!isFormValid}
disabled={!isFormValid || isSubmitting}
className={`mt-4 w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
${isFormValid
? "bg-green-500 text-white hover:bg-green-600"
: "bg-white text-[#C4C4C4] cursor-not-allowed"
${
isFormValid && !isSubmitting
? "bg-green-500 text-white hover:bg-green-600"
: "bg-white text-[#C4C4C4] cursor-not-allowed"
}`}
>
Регистрация
{isSubmitting ? "Отправка..." : "Регистрация"}
</button>
</form>
</div>

292
app/valounterHistoryRequest/page.jsx
View File

@@ -1,56 +1,148 @@
"use client";
import React, { useState } from "react";
import { FaBell, FaUser, FaStar } from "react-icons/fa";
import React, { useEffect, useState } from "react";
import { FaBell, FaUser } 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 API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
const statusMap = {
pending_moderation: { label: "На модерации", color: "#E9D171" },
approved: { label: "Принята", color: "#94E067" },
in_progress: { label: "В процессе", color: "#E971E1" },
completed: { label: "Выполнена", color: "#71A5E9" },
cancelled: { label: "Отменена", color: "#FF8282" },
rejected: { label: "Отклонена", color: "#FF8282" },
};
const HistoryRequestPage = () => {
const [userName, setUserName] = useState("Волонтёр");
const [requests, setRequests] = useState([]); // истории заявок волонтёра
const [selectedRequest, setSelectedRequest] = useState(null);
const [error, setError] = useState("");
const [loading, setLoading] = useState(true);
const getAccessToken = () => {
if (typeof window === "undefined") return null;
const saved = localStorage.getItem("authUser");
const authUser = saved ? JSON.parse(saved) : null;
return authUser?.accessToken || null;
};
// подгружаем имя
useEffect(() => {
const fetchProfile = async () => {
if (!API_BASE) return;
const token = getAccessToken();
if (!token) return;
try {
const res = await fetch(`${API_BASE}/users/me`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
});
if (!res.ok) return;
const data = await res.json();
const fullName =
[data.first_name, data.last_name]
.filter(Boolean)
.join(" ")
.trim() || data.email;
setUserName(fullName);
} catch {
// оставляем дефолт
}
};
fetchProfile();
}, []);
// загружаем историю заявок волонтёра
useEffect(() => {
const fetchVolunteerRequests = async () => {
if (!API_BASE) {
setError("API_BASE_URL не задан");
setLoading(false);
return;
}
const token = getAccessToken();
if (!token) {
setError("Вы не авторизованы");
setLoading(false);
return;
}
try {
// вариант 1 (рекомендуется на бэке): отдельный эндпоинт, здесь предположим, что бек отдаёт RequestListItem[]
const res = await fetch(`${API_BASE}/requests/my?role=volunteer`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
});
if (!res.ok) {
let msg = "Не удалось загрузить историю заявок";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setError(msg);
setLoading(false);
return;
}
const data = await res.json(); // массив RequestListItem[file:519]
const mapped = data.map((item) => {
const m = statusMap[item.status] || {
label: item.status,
color: "#E2E2E2",
};
const created = new Date(item.created_at);
const createdAt = created.toLocaleDateString("ru-RU");
const time = created.toLocaleTimeString("ru-RU", {
hour: "2-digit",
minute: "2-digit",
});
return {
id: item.id,
title: item.title,
status: m.label,
statusColor: m.color,
createdAt,
date: createdAt,
time,
description: item.description,
address: item.address,
city: item.city,
requesterName: item.requester_name,
requestTypeName: item.request_type_name,
rawStatus: item.status,
};
});
setRequests(mapped);
setLoading(false);
} catch (e) {
setError(e.message || "Ошибка сети");
setLoading(false);
}
};
fetchVolunteerRequests();
}, []);
const handleOpen = (req) => {
setSelectedRequest(req);
};
@@ -69,7 +161,7 @@ const HistoryRequestPage = () => {
<FaUser className="text-white text-sm" />
</div>
<p className="font-montserrat font-extrabold text-[20px] leading-[11px] text-white">
Александр
{userName}
</p>
</div>
<button
@@ -84,14 +176,32 @@ const HistoryRequestPage = () => {
История заявок
</h1>
{error && (
<div className="mb-2 bg-red-500 text-white text-xs font-montserrat px-3 py-2 rounded-lg">
{error}
</div>
)}
{/* Список заявок */}
<main className="space-y-3 overflow-y-auto pr-1 max-h-[80vh]">
{loading && (
<p className="text-white text-sm font-montserrat">
Загрузка заявок...
</p>
)}
{!loading && requests.length === 0 && !error && (
<p className="text-white text-sm font-montserrat">
У вас пока нет заявок
</p>
)}
{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"
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">
@@ -117,7 +227,7 @@ const HistoryRequestPage = () => {
</p>
{/* Кнопка "Развернуть" */}
<div className="mt-2 w-full bg-[#94E067] rounded-lg py-3 flex items-center justify-center">
<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>
@@ -138,91 +248,3 @@ const HistoryRequestPage = () => {
};
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>
// );
// };

234
app/valounterProfilePage/page.jsx
View File

@@ -1,21 +1,95 @@
"use client";
import React from "react";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { FaUserCircle, FaStar } from "react-icons/fa";
import TabBar from "../components/TabBar";
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
const ValounterProfilePage = () => {
const router = useRouter();
const fullName = "Иванов Александр Сергеевич";
const birthDate = "12.03.1990";
const rating = 4.8;
const [profile, setProfile] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const getAccessToken = () => {
if (typeof window === "undefined") return null;
const saved = localStorage.getItem("authUser");
const authUser = saved ? JSON.parse(saved) : null;
return authUser?.accessToken || null;
};
useEffect(() => {
const fetchProfile = async () => {
if (!API_BASE) {
setError("API_BASE_URL не задан");
setLoading(false);
return;
}
const token = getAccessToken();
if (!token) {
setError("Вы не авторизованы");
setLoading(false);
return;
}
try {
const res = await fetch(`${API_BASE}/users/me`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
});
if (!res.ok) {
let msg = "Не удалось загрузить профиль";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setError(msg);
setLoading(false);
return;
}
const data = await res.json(); // UserProfile[file:519]
setProfile(data);
setLoading(false);
} catch (e) {
setError(e.message || "Ошибка сети");
setLoading(false);
}
};
fetchProfile();
}, []);
const fullName =
profile &&
([profile.first_name, profile.last_name].filter(Boolean).join(" ") ||
profile.email);
const rating =
profile && profile.volunteer_rating != null
? Number(profile.volunteer_rating)
: null;
const birthDateText = profile?.created_at
? new Date(profile.created_at).toLocaleDateString("ru-RU")
: "—";
const email = profile?.email || "—";
const phone = profile?.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 */}
<header className="flex items-center mb-4">
<button
type="button"
@@ -30,74 +104,100 @@ const ValounterProfilePage = () => {
<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}
{loading && (
<p className="font-montserrat text-[14px] text-black">
Загрузка профиля...
</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"
}
/>
))}
{error && !loading && (
<p className="font-montserrat text-[12px] text-red-500">
{error}
</p>
)}
{!loading && profile && (
<>
{/* Аватар */}
{profile.avatar_url ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={profile.avatar_url}
alt="Аватар"
className="w-20 h-20 rounded-full object-cover"
/>
) : (
<FaUserCircle className="text-[#72B8E2] w-20 h-20" />
)}
{/* ФИО и рейтинг */}
<div className="text-center space-y-1">
<p className="font-montserrat font-bold text-[20px] text-black">
{fullName}
</p>
{rating != null && (
<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>
</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 bg-[#72B8E2] rounded-2xl p-3 text-white space-y-1">
<p className="font-montserrat text-[12px]">
Дата регистрации: {birthDateText}
</p>
<p className="font-montserrat text-[12px]">Почта: {email}</p>
<p className="font-montserrat text-[12px]">
Телефон: {phone}
</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>
{/* Кнопки */}
<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"
onClick={() => {
if (typeof window !== "undefined") {
localStorage.removeItem("authUser");
}
router.push("/");
}}
>
<span className="font-montserrat font-extrabold text-[14px] text-white">
Выйти из аккаунта
</span>
</button>
</div>
</>
)}
</main>
<TabBar />

347
app/valounterProfileSettings/page.jsx
View File

@@ -1,31 +1,146 @@
"use client";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { FaUserCircle } from "react-icons/fa";
import TabBar from "../components/TabBar";
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
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 [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const handleSave = (e) => {
e.preventDefault();
console.log("Сохранить профиль:", {
avatarUrl,
fullName,
birthDate,
email,
phone,
});
// здесь будет запрос на бэк
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [error, setError] = useState("");
const [saveMessage, setSaveMessage] = useState("");
const getAccessToken = () => {
if (typeof window === "undefined") return null;
const saved = localStorage.getItem("authUser");
const authUser = saved ? JSON.parse(saved) : null;
return authUser?.accessToken || null;
};
// загрузить профиль
useEffect(() => {
const fetchProfile = async () => {
if (!API_BASE) {
setError("API_BASE_URL не задан");
setLoading(false);
return;
}
const token = getAccessToken();
if (!token) {
setError("Вы не авторизованы");
setLoading(false);
return;
}
try {
const res = await fetch(`${API_BASE}/users/me`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
});
if (!res.ok) {
let msg = "Не удалось загрузить профиль";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setError(msg);
setLoading(false);
return;
}
const data = await res.json(); // UserProfile[file:519]
setFirstName(data.first_name || "");
setLastName(data.last_name || "");
setEmail(data.email || "");
setPhone(data.phone || "");
setAvatarUrl(data.avatar_url || "");
setLoading(false);
} catch (e) {
setError(e.message || "Ошибка сети");
setLoading(false);
}
};
fetchProfile();
}, []);
const handleSave = async (e) => {
e.preventDefault();
if (!API_BASE) return;
const token = getAccessToken();
if (!token) {
setError("Вы не авторизованы");
return;
}
try {
setSaving(true);
setError("");
setSaveMessage("");
const body = {
first_name: firstName || null,
last_name: lastName || null,
phone: phone || null,
// email обычно не меняют через этот эндпоинт, но если бек разрешает — можно добавить
};
const res = await fetch(`${API_BASE}/users/me`, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify(body),
});
if (!res.ok) {
let msg = "Не удалось сохранить профиль";
try {
const data = await res.json();
if (data.error) msg = data.error;
} catch {
const text = await res.text();
if (text) msg = text;
}
setError(msg);
setSaving(false);
return;
}
const updated = await res.json();
setSaveMessage("Изменения сохранены");
setSaving(false);
setFirstName(updated.first_name || "");
setLastName(updated.last_name || "");
setPhone(updated.phone || "");
} catch (e) {
setError(e.message || "Ошибка сети");
setSaving(false);
}
};
const fullName = [firstName, lastName].filter(Boolean).join(" ");
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">
@@ -46,102 +161,124 @@ const ValounterProfileSettingsPage = () => {
{/* Карточка настроек */}
<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" />
{loading && (
<p className="font-montserrat text-[14px] text-black">
Загрузка профиля...
</p>
)}
{!loading && (
<>
{/* Аватар */}
<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>
{error && (
<p className="font-montserrat text-[12px] text-red-500">
{error}
</p>
)}
{saveMessage && (
<p className="font-montserrat text-[12px] text-green-600">
{saveMessage}
</p>
)}
</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>
<form onSubmit={handleSave} className="w-full flex flex-col gap-3">
{/* ФИО -> first_name + last_name */}
<div className="flex flex-col gap-1">
<label className="font-montserrat text-[12px] text-black">
Имя
</label>
<input
type="text"
value={firstName}
onChange={(e) => setFirstName(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="text"
value={lastName}
onChange={(e) => setLastName(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="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="email"
value={email}
disabled
className="w-full rounded-full bg-[#72B8E2]/60 px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent cursor-not-allowed"
/>
</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>
{/* Телефон */}
<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>
{/* Кнопка сохранить */}
<button
type="submit"
disabled={saving}
className="mt-2 w-full bg-[#94E067] rounded-full py-2.5 flex.items-center justify-center disabled:opacity-60"
>
<span className="font-montserrat font-extrabold text-[14px] text-white">
{saving ? "Сохранение..." : "Сохранить изменения"}
</span>
</button>
</form>
</>
)}
</main>
<TabBar />