217 lines
12 KiB
JavaScript
217 lines
12 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState } from "react";
|
||
|
||
const ModeratorRequestModal = ({ request, onClose, onApprove, onReject }) => {
|
||
const [showRejectPopup, setShowRejectPopup] = useState(false);
|
||
const [rejectReason, setRejectReason] = useState("");
|
||
|
||
const isApproved = request.status === "Принята";
|
||
const isRejected = request.status === "Отклонена";
|
||
const isPending = !isApproved && !isRejected; // на модерации
|
||
|
||
const handleApprove = () => {
|
||
onApprove?.({ ...request, status: "Принята" });
|
||
onClose();
|
||
};
|
||
|
||
const handleRejectConfirm = () => {
|
||
onReject?.({
|
||
...request,
|
||
status: "Отклонена",
|
||
rejectReason: rejectReason,
|
||
});
|
||
setShowRejectPopup(false);
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{/* основной экран модерации во весь экран */}
|
||
<div className="fixed inset-0 z-40 flex flex-col bg-[#90D2F9] px-4 pt-4 pb-20">
|
||
{/* хедер */}
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="text-white w-8 h-8 rounded-full flex items-center justify-center text-xl"
|
||
>
|
||
←
|
||
</button>
|
||
<p className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
|
||
Заявка от {request.date || "28.11.25"}
|
||
</p>
|
||
<span className="w-8" />
|
||
</div>
|
||
|
||
{/* белая карточка во всю ширину контейнера */}
|
||
<div className="flex-1 flex items-start justify-center">
|
||
<div className="w-full max-w-[400px] bg-white rounded-2xl p-4 flex flex-col gap-4 shadow-lg">
|
||
{/* верхняя полоса: Описание + Дата + Время */}
|
||
<div className="flex flex-col gap-2">
|
||
<div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-2 flex items-center justify-between">
|
||
<span className="text-[14px] font-montserrat font-bold text-white">
|
||
Описание
|
||
</span>
|
||
<div className="flex gap-2">
|
||
<div className="min-w-[80px] bg-[#72B8E2] rounded-[10px] flex flex-col items-center justify-center border border-white/30 px-2 py-1">
|
||
<span className="text-[12px] font-montserrat font-bold text-white">
|
||
Дата
|
||
</span>
|
||
<span className="text-[10px] font-montserrat text-white">
|
||
{request.date || "28.11.2025"}
|
||
</span>
|
||
</div>
|
||
<div className="min-w-[80px] bg-[#72B8E2] rounded-[10px] flex flex-col items-center justify-center border border-white/30 px-2 py-1">
|
||
<span className="text-[12px] font-montserrat font-bold text-white">
|
||
Время
|
||
</span>
|
||
<span className="text-[10px] font-montserrat text-white">
|
||
{request.time || "13:00"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* блок ФИО / адрес */}
|
||
<div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-2 flex flex-col gap-1">
|
||
<span className="text-[14px] font-montserrat font-bold text-white">
|
||
ФИО
|
||
</span>
|
||
<p className="text-[12px] font-montserrat text-white leading-[16px]">
|
||
{request.fullName || "Клавдия Березова"}
|
||
</p>
|
||
<p className="text-[12px] font-montserrat text-white leading-[14px]">
|
||
{request.address || "г. Пермь, ул. Ленина 50"}
|
||
</p>
|
||
</div>
|
||
|
||
{/* статус + сроки */}
|
||
<div className="flex items-center justify-between">
|
||
<div
|
||
className={`px-3 py-1 rounded-[10px] flex items-center justify-center ${isApproved
|
||
? "bg-[#94E067]"
|
||
: isRejected
|
||
? "bg-[#E06767]"
|
||
: "bg-[#E9D171]"
|
||
}`}
|
||
>
|
||
<span className="text-[12px] font-montserrat font-semibold text-black">
|
||
{isApproved
|
||
? "Принята"
|
||
: isRejected
|
||
? "Отклонена"
|
||
: "Модерация"}
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col items-end text-[12px] font-montserrat font-light text-black leading-[14px]">
|
||
<span>До {request.deadline || "28.11.2025"}</span>
|
||
<span>{request.deadlineTime || "13:00"}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Заголовок задачи */}
|
||
<p className="text-[16px] leading-[20px] font-montserrat font-semibold text-black">
|
||
{request.title || "Приобрести продукты пенсионерке"}
|
||
</p>
|
||
|
||
{/* краткое описание / товары */}
|
||
{request.description && (
|
||
<div className="flex-1 bg-[#F2F2F2] rounded-[10px] px-3 py-2 overflow-y-auto">
|
||
<p className="text-[12px] leading-[16px] font-montserrat text-black whitespace-pre-line">
|
||
{request.description}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* если заявка уже отклонена — показать причину */}
|
||
{isRejected && (
|
||
<div className="w-full bg-[#FFE2E2] rounded-[10px] px-3 py-2">
|
||
<p className="text-[14px] font-montserrat font-bold text-[#E06767] mb-1">
|
||
Причина отклонения
|
||
</p>
|
||
<p className="text-[12px] font-montserrat text-black whitespace-pre-line">
|
||
{request.rejectReason && request.rejectReason.trim().length > 0
|
||
? request.rejectReason
|
||
: "Причина не указана"}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* нижняя панель с кнопками — только если заявка ещё на модерации */}
|
||
{isPending && (
|
||
<div className="mt-4 w-full max-w-[400px] mx-auto flex items-center justify-between gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={handleApprove}
|
||
className="flex-1 h-10 bg-[#94E067] rounded-[10px] flex items-center justify-center"
|
||
>
|
||
<span className="text-[14px] font-montserrat font-bold text-white">
|
||
Принять
|
||
</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowRejectPopup(true)}
|
||
className="flex-1 h-10 bg-[#E06767] rounded-[10px] flex items-center justify-center"
|
||
>
|
||
<span className="text-[14px] font-montserrat font-bold text-white">
|
||
Отклонить
|
||
</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* попап причины отказа во весь экран */}
|
||
{showRejectPopup && (
|
||
<div className="fixed inset-0 z-50 flex flex-col bg-[rgba(101,101,101,0.72)] px-4 pt-8 pb-6">
|
||
<div className="w-full max-w-[400px] mx-auto bg-white rounded-t-[15px] flex flex-col items-center px-4 pt-4 pb-4">
|
||
{/* заголовок */}
|
||
<p className="font-montserrat font-bold text-[20px] leading-[24px] text-black mb-3">
|
||
Причина
|
||
</p>
|
||
|
||
{/* голубой блок с текстом */}
|
||
<div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-3 mb-4 max-h-[50vh]">
|
||
<textarea
|
||
value={rejectReason}
|
||
onChange={(e) => setRejectReason(e.target.value)}
|
||
className="w-full h-full bg-transparent text-[14px] leading-[18px] font-montserrat text-black placeholder:text-black/60 outline-none resize-none"
|
||
placeholder="Опишите причину отклонения заявки"
|
||
/>
|
||
</div>
|
||
|
||
{/* кнопки */}
|
||
<div className="w-full flex flex-col gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={handleRejectConfirm}
|
||
className="w-full h-10 bg-[#E06767] rounded-[10px] flex items-center justify-center"
|
||
>
|
||
<span className="text-[16px] font-montserrat font-bold text-white">
|
||
Подтвердить
|
||
</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowRejectPopup(false)}
|
||
className="w-full h-10 bg-white rounded-[10px] border border-[#E06767] flex items-center justify-center"
|
||
>
|
||
<span className="text-[14px] font-montserrat font-semibold text-[#E06767]">
|
||
Отмена
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default ModeratorRequestModal;
|