+-good

app/moderatorHistoryRequest/page.jsx

@@ -0,0 +1,158 @@
+"use client";
+
+import React, { 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 HistoryRequestModeratorPage = () => {
+  const [selectedRequest, setSelectedRequest] = useState(null);
+
+  const handleOpen = (req) => {
+    setSelectedRequest(req);
+  };
+
+  const handleClose = () => {
+    setSelectedRequest(null);
+  };
+
+  const handleApprove = (req) => {
+    console.log("Подтверждение принятой заявки (история):", req.id);
+  };
+
+  const handleReject = ({ request, reason }) => {
+    console.log("Просмотр отклонённой заявки (история):", request.id, reason);
+  };
+
+  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 className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <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-[22px] text-white">
+              Модератор
+            </p>
+          </div>
+          <button
+            type="button"
+            className="w-8 h-8 rounded-full border border-white flex items-center justify-center"
+          >
+            <FaBell className="text-white text-sm" />
+          </button>
+        </header>
+
+        <h1 className="font-montserrat font-extrabold text-[20px] leading-[22px] text-white mb-3">
+          История заявок
+        </h1>
+
+        {/* Список заявок */}
+        <main className="space-y-3 overflow-y-auto pr-1 max-h-[80vh]">
+          {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"
+            >
+              {/* верхняя строка: статус + дата/время */}
+              <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"
+                  style={{ backgroundColor: req.statusColor }}
+                >
+                  {req.status}
+                </span>
+                <div className="text-right leading-tight">
+                  <p className="font-montserrat text-[10px] text-black">
+                    {req.date}
+                  </p>
+                  <p className="font-montserrat text-[10px] text-black">
+                    {req.time}
+                  </p>
+                </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>
+              <p className="font-montserrat text-[10px] text-black/70">
+                {req.address}
+              </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">
+                  Развернуть
+                </span>
+              </div>
+            </button>
+          ))}
+        </main>
+
+        {/* Попап модератора */}
+        {selectedRequest && (
+          <ModeratorRequestModal
+            request={selectedRequest}
+            onClose={handleClose}
+            onApprove={handleApprove}
+            onReject={handleReject}
+          />
+        )}
+
+        <TabBar />
+      </div>
+    </div>
+  );
+};
+
+export default HistoryRequestModeratorPage;