WIP API
This commit is contained in:
fullofempt
@@ -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]">
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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" },
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user