+-good

app/AuthPage.jsx

@@ -31,21 +31,25 @@ const AuthPage = () => {
     if (!isFormValid) return;
 
     try {
-      login(email, password); // редирект сделает сам контекст
+      setAuthError("");
+      login(email, password);
     } catch (err) {
-      setAuthError(err.message);
+      setAuthError(err.message || "Неверный логин или пароль");
     }
   };
 
   return (
     <div className="min-h-screen w-full bg-[#90D2F9] flex items-center justify-center px-4">
       <div className="w-full max-w-md bg-white/10 rounded-2xl p-6 sm:p-8 shadow-lg relative">
-        {checkboxError && (
+        {/* Красный баннер ошибок */}
+        {(checkboxError || authError) && (
           <div
             className="absolute -top-10 left-0 w-full bg-red-500 text-white text-xs sm:text-sm font-montserrat px-3 py-2 rounded-t-2xl flex items-center justify-center shadow-md"
             role="alert"
           >
-            Вы не согласны с условиями использования
+            {checkboxError
+              ? "Вы не согласны с условиями использования"
+              : authError || "Неверный логин или пароль"}
           </div>
         )}
 
@@ -107,31 +111,6 @@ const AuthPage = () => {
             </p>
           </div>
 
-          {/* Ошибка авторизации */}
-          {authError && (
-            <p className="text-[11px] text-red-600 font-montserrat">
-              {authError}
-            </p>
-          )}
-
-          {/* Ссылки */}
-          <div className="flex justify-between text-[11px] font-montserrat font-bold text-[#FF6363] mt-1">
-            <button
-              type="button"
-              className="hover:underline"
-              onClick={() => router.push("/recPassword")}
-            >
-              Забыли пароль?
-            </button>
-            <button
-              type="button"
-              className="hover:underline"
-              onClick={() => router.push("/reg")}
-            >
-              Регистрация
-            </button>
-          </div>
-
           {/* Кнопка Войти */}
           <button
             type="submit"
@@ -148,7 +127,7 @@ const AuthPage = () => {
         </form>
 
         {/* Подсказка по тестовым логинам */}
-        <div className="mt-4 text-[10px] text-white font-montserrat space-y-1">
+        <div className="mt-4 text-[15px] text-white font-mонтserrat space-y-1">
           <p>Тестовые аккаунты:</p>
           <p>Пользователь: user@mail.com / user123</p>
           <p>Волонтёр: vol@mail.com / vol123</p>

app/components/ModeratorRequestDetailsModal.jsx

@@ -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;

app/components/TabBar.jsx

@@ -24,13 +24,13 @@ const TabBar = () => {
       { key: "home", icon: FaHome, href: "/mainValounter" },
       { key: "history", icon: FaClock, href: "/valounterHistoryRequest" },
       { key: "news", icon: FaNewspaper, href: "/volunteer/news" },
-      { key: "profile", icon: FaCog, href: "/volunterProfile" },
+      { key: "profile", icon: FaCog, href: "/valounterProfilePage" },
     ],
     moderator: [
-      { key: "queue", icon: FaHome, href: "/moderator/home" },
+      { key: "queue", icon: FaHome, href: "/moderatorMain" },
-      { key: "history", icon: FaClock, href: "/moderator/history" },
+      { key: "history", icon: FaClock, href: "/moderatorHistoryRequest" },
       { key: "news", icon: FaNewspaper, href: "/moderator/news" },
-      { key: "profile", icon: FaCog, href: "/moderator/profile" },
+      { key: "profile", icon: FaCog, href: "/moderatorProfilePage" },
     ],
   };
 

app/components/ValounterRequestDetailsModal.jsx

@@ -107,7 +107,7 @@ const RequestDetailsModal = ({ request, onClose }) => {
 
                             <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) => (

app/context/AuthContext.jsx

@@ -66,7 +66,7 @@ export const AuthProvider = ({ children }) => {
     // после логина перенаправляем на стартовую страницу по роли
     if (found.role === "user") router.push("/home");
     if (found.role === "volunteer") router.push("/mainValounter");
-    if (found.role === "moderator") router.push("/mainModerator");
+    if (found.role === "moderator") router.push("/moderatorMain");
   };
 
   const logout = () => {

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;

app/moderatorMain/page.jsx

@@ -0,0 +1,238 @@
+"use client";
+
+import React, { useState } from "react";
+import { FaBell, FaUser, FaStar } from "react-icons/fa";
+import TabBar from "../components/TabBar";
+import RequestDetailsModal from "../components/ModeratorRequestDetailsModal";
+
+const requests = [
+  {
+    id: 1,
+    title: "Приобрести продукты пенсионерке",
+    status: "На модерации",
+    statusColor: "#E9D171",
+    date: "До 28.11.2025",
+    time: "13:00",
+    createdAt: "28.11.2025",
+    description: "Купить продукты и принести по адресу.",
+  },
+  {
+    id: 2,
+    title: "Приобрести продукты пенсионерке",
+    status: "На модерации",
+    statusColor: "#E9D171",
+    date: "До 28.11.2025",
+    time: "13:00",
+    createdAt: "28.11.2025",
+    description: "Купить продукты и принести по адресу.",
+  },
+  {
+    id: 3,
+    title: "Приобрести продукты пенсионерке",
+    status: "На модерации",
+    statusColor: "#E9D171",
+    date: "До 28.11.2025",
+    time: "13:00",
+    createdAt: "28.11.2025",
+    description: "Купить продукты и принести по адресу.",
+  },
+  {
+    id: 4,
+    title: "Приобрести продукты пенсионерке",
+    status: "На модерации",
+    statusColor: "#E9D171",
+    date: "До 28.11.2025",
+    time: "13:00",
+    createdAt: "28.11.2025",
+    description: "Купить продукты и принести по адресу.",
+  },
+  {
+    id: 5,
+    title: "Приобрести продукты пенсионерке",
+    status: "На модерации",
+    statusColor: "#E9D171",
+    date: "До 28.11.2025",
+    time: "13:00",
+    createdAt: "28.11.2025",
+    description: "Купить продукты и принести по адресу.",
+  }
+];
+
+const HistoryRequestPage = () => {
+  const [selectedRequest, setSelectedRequest] = useState(null);
+
+  const handleOpen = (req) => {
+    setSelectedRequest(req);
+  };
+
+  const handleClose = () => {
+    setSelectedRequest(null);
+  };
+
+  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-[11px] 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-light text-black"
+                  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>
+
+              {/* Кнопка "Развернуть" */}
+              <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 && (
+          <RequestDetailsModal request={selectedRequest} onClose={handleClose} />
+        )}
+
+        <TabBar />
+      </div>
+    </div>
+  );
+};
+
+export default HistoryRequestPage;
+
+// const RequestDetailsModal = ({ request, onClose }) => {
+//   const isDone = request.status === "Выполнена";
+
+//   return (
+//     <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/40 px-4">
+//       <div className="w-full max-w-sm bg-[#90D2F9] rounded-2xl p-3 relative">
+//         {/* Белая карточка */}
+//         <div className="bg-white rounded-xl p-3 flex flex-col gap-3">
+//           {/* Шапка попапа */}
+//           <div className="flex items-center justify-between mb-1">
+//             <button
+//               type="button"
+//               onClick={onClose}
+//               className="text-white bg-[#90D2F9] w-7 h-7 rounded-full flex items-center justify-center text-sm"
+//             >
+//               ←
+//             </button>
+//             <p className="flex-1 text-center font-montserrat font-extrabold text-[15px] text-white">
+//               Заявка от {request.createdAt}
+//             </p>
+//             <span className="w-7" />
+//           </div>
+
+//           {/* Статус + срок */}
+//           <div className="flex items-center justify-between">
+//             <span
+//               className="inline-flex items-center justify-center px-2 py-0.5 rounded-full font-montserrat text-[8px] font-light text-black"
+//               style={{ backgroundColor: "#71A5E9" }}
+//             >
+//               Выполнена
+//             </span>
+//             <div className="text-right leading-tight">
+//               <p className="font-montserrat text-[8px] text-black">
+//                 До {request.date.replace("До ", "")}
+//               </p>
+//               <p className="font-montserrat text-[8px] text-black">
+//                 {request.time}
+//               </p>
+//             </div>
+//           </div>
+
+//           {/* Название задачи */}
+//           <p className="font-montserrat font-semibold text-[12px] leading-[15px] text-black">
+//             {request.title}
+//           </p>
+
+//           {/* Блок отзыва */}
+//           {isDone && (
+//             <div className="bg-[#72B8E2] rounded-lg p-2 flex flex-col gap-2">
+//               <p className="font-montserrat font-bold text-[10px] text-white">
+//                 Отзыв
+//               </p>
+//               <p className="font-montserrat text-[10px] text-white">
+//                 Здесь будет текст отзыва с бэка.
+//               </p>
+//             </div>
+//           )}
+
+//           {/* Оценка волонтера */}
+//           <div className="mt-1">
+//             <p className="font-montserrat font-semibold text-[12px] text-black mb-1">
+//               Оценить волонтера
+//             </p>
+//             <div className="flex gap-1">
+//               {[1, 2, 3, 4, 5].map((star) => (
+//                 <FaStar key={star} className="text-[#F6E168]" size={20} />
+//               ))}
+//             </div>
+//           </div>
+
+//           {/* Кнопка оставить отзыв */}
+//           {isDone && (
+//             <button
+//               type="button"
+//               className="mt-3 w-full bg-[#94E067] rounded-lg py-2 flex items-center justify-center"
+//             >
+//               <span className="font-montserrat font-bold text-[14px] text-white">
+//                 Оставить отзыв
+//               </span>
+//             </button>
+//           )}
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+

app/moderatorProfilePage/page.jsx

@@ -0,0 +1,109 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import { FaUserCircle, FaStar } from "react-icons/fa";
+import TabBar from "../components/TabBar";
+
+const ModeratorProfilePage = () => {
+  const router = useRouter();
+
+  const fullName = "Иванов Александр Сергеевич";
+  const birthDate = "12.03.1990";
+  const rating = 4.8;
+
+  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 mb-4">
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
+          >
+            ←
+          </button>
+          <h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
+            Профиль
+          </h1>
+          <span className="w-8" />
+        </header>
+
+        {/* Карточка профиля */}
+        <main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
+          {/* Аватар */}
+          <FaUserCircle className="text-[#72B8E2] w-20 h-20" />
+
+          {/* ФИО и рейтинг */}
+          <div className="text-center space-y-1">
+            {/* <p className="font-montserrat font-extrabold text-[16px] text-black">
+              ФИО
+            </p> */}
+            <p className="font-montserrat font-bold text-[20px] text-black">
+              {fullName}
+            </p>
+
+            {/* Рейтинг + звезды */}
+            <div className="mt-2 flex items-center justify-center gap-2">
+              <span className="font-montserrat font-semibold text-[14px] text-black">
+                Рейтинг: {rating.toFixed(1)}
+              </span>
+              <div className="flex gap-1">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <FaStar
+                    key={star}
+                    size={18}
+                    className={
+                      star <= Math.round(rating)
+                        ? "text-[#F6E168] fill-[#F6E168]"
+                        : "text-[#F6E168] fill-[#F6E168]/30"
+                    }
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Контакты и день рождения */}
+          <div className="w-full bg-[#72B8E2] rounded-2xl p-3 text-white space-y-1">
+            <p className="font-montserrat text-[12px]">
+              Дата рождения: {birthDate}
+            </p>
+            <p className="font-montserrat text-[12px]">
+              Почта: example@mail.com
+            </p>
+            <p className="font-montserrat text-[12px]">
+              Телефон: +7 (900) 000-00-00
+            </p>
+          </div>
+
+          {/* Кнопки */}
+          <div className="w-full flex flex-col gap-2 mt-2">
+            <button
+              type="button"
+              onClick={() => router.push("/valounterProfileSettings")}
+              className="w-full bg-[#E0B267] rounded-full py-2 flex items-center justify-center"
+            >
+              <span className="font-montserrat font-extrabold text-[14px] text-white">
+                Редактировать профиль
+              </span>
+            </button>
+            <button
+              type="button"
+              className="w-full bg-[#E07567] rounded-full py-2 flex items-center justify-center"
+            >
+              <span className="font-montserrat font-extrabold text-[14px] text-white">
+                Выйти из аккаунта
+              </span>
+            </button>
+          </div>
+        </main>
+
+        <TabBar />
+      </div>
+    </div>
+  );
+};
+
+export default ModeratorProfilePage;

app/moderatorProfileSettings/page.jsx

@@ -0,0 +1,153 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { FaUserCircle } from "react-icons/fa";
+import TabBar from "../components/TabBar";
+
+const ValounterProfileSettingsPage = () => {
+  const router = useRouter();
+
+  const [avatarUrl, setAvatarUrl] = useState("");
+  const [fullName, setFullName] = useState("Иванов Александр Сергеевич");
+  const [birthDate, setBirthDate] = useState("1990-03-12");
+  const [email, setEmail] = useState("example@mail.com");
+  const [phone, setPhone] = useState("+7 (900) 000-00-00");
+
+  const handleSave = (e) => {
+    e.preventDefault();
+    console.log("Сохранить профиль:", {
+      avatarUrl,
+      fullName,
+      birthDate,
+      email,
+      phone,
+    });
+    // здесь будет запрос на бэк
+  };
+
+  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 mb-4">
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
+          >
+            ←
+          </button>
+          <h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
+            Настройки профиля
+          </h1>
+          <span className="w-8" />
+        </header>
+
+        {/* Карточка настроек */}
+        <main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
+          {/* Аватар */}
+          <div className="flex flex-col items-center gap-2">
+            <div className="w-24 h-24 rounded-full bg-[#E5F3FB] flex items-center justify-center overflow-hidden">
+              {avatarUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={avatarUrl}
+                  alt="Аватар"
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <FaUserCircle className="text-[#72B8E2] w-20 h-20" />
+              )}
+            </div>
+            <label className="font-montserrat text-[12px] text-[#72B8E2] underline cursor-pointer">
+              Загрузить аватар
+              <input
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={(e) => {
+                  const file = e.target.files?.[0];
+                  if (!file) return;
+                  const url = URL.createObjectURL(file);
+                  setAvatarUrl(url);
+                }}
+              />
+            </label>
+          </div>
+
+          <form onSubmit={handleSave} className="w-full flex flex-col gap-3">
+            {/* ФИО */}
+            <div className="flex flex-col gap-1">
+              <label className="font-montserrat text-[12px] text-black">
+                ФИО
+              </label>
+              <input
+                type="text"
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value)}
+                className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
+                placeholder="Введите ФИО"
+              />
+            </div>
+
+            {/* Дата рождения */}
+            <div className="flex flex-col gap-1">
+              <label className="font-montserrat text-[12px] text-black">
+                Дата рождения
+              </label>
+              <input
+                type="date"
+                value={birthDate}
+                onChange={(e) => setBirthDate(e.target.value)}
+                className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white outline-none border border-transparent focus:border-white/70"
+              />
+            </div>
+
+            {/* Почта */}
+            <div className="flex flex-col gap-1">
+              <label className="font-montserrat text-[12px] text-black">
+                Почта
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
+                placeholder="example@mail.com"
+              />
+            </div>
+
+            {/* Телефон */}
+            <div className="flex flex-col gap-1">
+              <label className="font-montserrat text-[12px] text-black">
+                Телефон
+              </label>
+              <input
+                type="tel"
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text:white.placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
+                placeholder="+7 (900) 000-00-00"
+              />
+            </div>
+
+            {/* Кнопка сохранить */}
+            <button
+              type="submit"
+              className="mt-2 w-full bg-[#94E067] rounded-full py-2.5 flex items-center justify-center"
+            >
+              <span className="font-montserrat font-extrabold text-[14px] text-white">
+                Сохранить изменения
+              </span>
+            </button>
+          </form>
+        </main>
+
+        <TabBar />
+      </div>
+    </div>
+  );
+};
+
+export default ValounterProfileSettingsPage;

app/valounterProfilePage/page.jsx

@@ -0,0 +1,109 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import { FaUserCircle, FaStar } from "react-icons/fa";
+import TabBar from "../components/TabBar";
+
+const ValounterProfilePage = () => {
+  const router = useRouter();
+
+  const fullName = "Иванов Александр Сергеевич";
+  const birthDate = "12.03.1990";
+  const rating = 4.8;
+
+  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 mb-4">
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
+          >
+            ←
+          </button>
+          <h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
+            Профиль
+          </h1>
+          <span className="w-8" />
+        </header>
+
+        {/* Карточка профиля */}
+        <main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
+          {/* Аватар */}
+          <FaUserCircle className="text-[#72B8E2] w-20 h-20" />
+
+          {/* ФИО и рейтинг */}
+          <div className="text-center space-y-1">
+            {/* <p className="font-montserrat font-extrabold text-[16px] text-black">
+              ФИО
+            </p> */}
+            <p className="font-montserrat font-bold text-[20px] text-black">
+              {fullName}
+            </p>
+
+            {/* Рейтинг + звезды */}
+            <div className="mt-2 flex items-center justify-center gap-2">
+              <span className="font-montserrat font-semibold text-[14px] text-black">
+                Рейтинг: {rating.toFixed(1)}
+              </span>
+              <div className="flex gap-1">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <FaStar
+                    key={star}
+                    size={18}
+                    className={
+                      star <= Math.round(rating)
+                        ? "text-[#F6E168] fill-[#F6E168]"
+                        : "text-[#F6E168] fill-[#F6E168]/30"
+                    }
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Контакты и день рождения */}
+          <div className="w-full bg-[#72B8E2] rounded-2xl p-3 text-white space-y-1">
+            <p className="font-montserrat text-[12px]">
+              Дата рождения: {birthDate}
+            </p>
+            <p className="font-montserrat text-[12px]">
+              Почта: example@mail.com
+            </p>
+            <p className="font-montserrat text-[12px]">
+              Телефон: +7 (900) 000-00-00
+            </p>
+          </div>
+
+          {/* Кнопки */}
+          <div className="w-full flex flex-col gap-2 mt-2">
+            <button
+              type="button"
+              onClick={() => router.push("/valounterProfileSettings")}
+              className="w-full bg-[#E0B267] rounded-full py-2 flex items-center justify-center"
+            >
+              <span className="font-montserrat font-extrabold text-[14px] text-white">
+                Редактировать профиль
+              </span>
+            </button>
+            <button
+              type="button"
+              className="w-full bg-[#E07567] rounded-full py-2 flex items-center justify-center"
+            >
+              <span className="font-montserrat font-extrabold text-[14px] text-white">
+                Выйти из аккаунта
+              </span>
+            </button>
+          </div>
+        </main>
+
+        <TabBar />
+      </div>
+    </div>
+  );
+};
+
+export default ValounterProfilePage;

app/valounterProfileSettings/page.jsx

@@ -0,0 +1,153 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { FaUserCircle } from "react-icons/fa";
+import TabBar from "../components/TabBar";
+
+const ValounterProfileSettingsPage = () => {
+  const router = useRouter();
+
+  const [avatarUrl, setAvatarUrl] = useState("");
+  const [fullName, setFullName] = useState("Иванов Александр Сергеевич");
+  const [birthDate, setBirthDate] = useState("1990-03-12");
+  const [email, setEmail] = useState("example@mail.com");
+  const [phone, setPhone] = useState("+7 (900) 000-00-00");
+
+  const handleSave = (e) => {
+    e.preventDefault();
+    console.log("Сохранить профиль:", {
+      avatarUrl,
+      fullName,
+      birthDate,
+      email,
+      phone,
+    });
+    // здесь будет запрос на бэк
+  };
+
+  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 mb-4">
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
+          >
+            ←
+          </button>
+          <h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
+            Настройки профиля
+          </h1>
+          <span className="w-8" />
+        </header>
+
+        {/* Карточка настроек */}
+        <main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
+          {/* Аватар */}
+          <div className="flex flex-col items-center gap-2">
+            <div className="w-24 h-24 rounded-full bg-[#E5F3FB] flex items-center justify-center overflow-hidden">
+              {avatarUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={avatarUrl}
+                  alt="Аватар"
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <FaUserCircle className="text-[#72B8E2] w-20 h-20" />
+              )}
+            </div>
+            <label className="font-montserrat text-[12px] text-[#72B8E2] underline cursor-pointer">
+              Загрузить аватар
+              <input
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={(e) => {
+                  const file = e.target.files?.[0];
+                  if (!file) return;
+                  const url = URL.createObjectURL(file);
+                  setAvatarUrl(url);
+                }}
+              />
+            </label>
+          </div>
+
+          <form onSubmit={handleSave} className="w-full flex flex-col gap-3">
+            {/* ФИО */}
+            <div className="flex flex-col gap-1">
+              <label className="font-montserrat text-[12px] text-black">
+                ФИО
+              </label>
+              <input
+                type="text"
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value)}
+                className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
+                placeholder="Введите ФИО"
+              />
+            </div>
+
+            {/* Дата рождения */}
+            <div className="flex flex-col gap-1">
+              <label className="font-montserrat text-[12px] text-black">
+                Дата рождения
+              </label>
+              <input
+                type="date"
+                value={birthDate}
+                onChange={(e) => setBirthDate(e.target.value)}
+                className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white outline-none border border-transparent focus:border-white/70"
+              />
+            </div>
+
+            {/* Почта */}
+            <div className="flex flex-col gap-1">
+              <label className="font-montserrat text-[12px] text-black">
+                Почта
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
+                placeholder="example@mail.com"
+              />
+            </div>
+
+            {/* Телефон */}
+            <div className="flex flex-col gap-1">
+              <label className="font-montserrat text-[12px] text-black">
+                Телефон
+              </label>
+              <input
+                type="tel"
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                className="w-full rounded-full bg-[#72B8E2] px-4 py-2 text-sm font-montserrat text:white.placeholder:text-white/70 outline-none border border-transparent focus:border-white/70"
+                placeholder="+7 (900) 000-00-00"
+              />
+            </div>
+
+            {/* Кнопка сохранить */}
+            <button
+              type="submit"
+              className="mt-2 w-full bg-[#94E067] rounded-full py-2.5 flex items-center justify-center"
+            >
+              <span className="font-montserrat font-extrabold text-[14px] text-white">
+                Сохранить изменения
+              </span>
+            </button>
+          </form>
+        </main>
+
+        <TabBar />
+      </div>
+    </div>
+  );
+};
+
+export default ValounterProfileSettingsPage;