WIP API

app/components/ModeratorRequestDetailsModal.jsx

@@ -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]">