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

+-good

Browse Source
This commit is contained in:
fullofempt
2025-12-13 19:33:57 +05:00
parent b1cab4a2ab
commit bb833d956e
11 changed files with 1151 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
app/components/ModeratorRequestDetailsModal.jsx Normal file
View File

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