+-good

app/AuthPage.jsx

@@ -2,16 +2,19 @@
 
 import React, { useState } from "react";
 import { useRouter } from "next/navigation";
-
+import { useAuth } from "../app/context/AuthContext";
 
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 const AuthPage = () => {
   const router = useRouter();
+  const { login } = useAuth();
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [rememberMe, setRememberMe] = useState(false);
   const [checkboxError, setCheckboxError] = useState(false);
+  const [authError, setAuthError] = useState("");
 
   const isEmailValid = emailRegex.test(email);
   const isFormValid = isEmailValid && password.length > 0;
@@ -19,39 +22,40 @@ const AuthPage = () => {
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    // проверка чекбокса
     if (!rememberMe) {
       setCheckboxError(true);
       return;
     }
-
     setCheckboxError(false);
 
     if (!isFormValid) return;
 
-    console.log("Email:", email, "Password:", password, "Remember:", rememberMe);
-    router.push('./home');
+    try {
+      setAuthError("");
+      login(email, password);
+    } catch (err) {
+      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>
         )}
 
         <h1 className="font-montserrat text-white font-extrabold text-2xl text-center">
           Авторизация
         </h1>
-        {/* <p className="font-montserrat text-white text-sm text-center mt-1">
-          как пользователь
-        </p> */}
 
         <form onSubmit={handleSubmit} className="mt-6 space-y-4">
           {/* Почта */}
@@ -93,7 +97,8 @@ const AuthPage = () => {
                 setRememberMe((prev) => !prev);
                 if (!rememberMe) setCheckboxError(false);
               }}
-              className={`w-5 h-5 rounded-full border border-white flex items-center justify-center ${rememberMe ? "bg-white" : "bg-transparent"
+              className={`w-5 h-5 rounded-full border border-white flex items-center justify-center ${
+                rememberMe ? "bg-white" : "bg-transparent"
               }`}
             >
               {rememberMe && (
@@ -101,31 +106,18 @@ const AuthPage = () => {
               )}
             </button>
             <p className="font-montserrat text-[10px] leading-[12px] text-white">
-              Подтверждаю, что я прочитал условия использования данного приложения
+              Подтверждаю, что я прочитал условия использования данного
+              приложения
             </p>
           </div>
 
-
-          {/* Ссылки */}
-          <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"
             disabled={!isFormValid}
             className={`mt-4 w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
-              ${isFormValid
+              ${
+                isFormValid
                   ? "bg-green-500 text-white hover:bg-green-600"
                   : "bg-white text-[#C4C4C4] cursor-not-allowed"
               }`}
@@ -133,6 +125,14 @@ const AuthPage = () => {
             Войти
           </button>
         </form>
+
+        {/* Подсказка по тестовым логинам */}
+        <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>
+          <p>Модератор: mod@mail.com / mod123</p>
+        </div>
       </div>
     </div>
   );

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

@@ -2,41 +2,59 @@
 
 import React from "react";
 import { FaClock, FaNewspaper, FaHome, FaCog } from "react-icons/fa";
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
+import { useAuth } from "../context/AuthContext";
 
 const TabBar = () => {
   const router = useRouter();
+  const pathname = usePathname();
+  const { user } = useAuth();
+
+  if (!user) return null; // не показываем таббар, если не залогинен
+
+  // маршруты по ролям
+  const routesByRole = {
+    user: [
+      { key: "home", icon: FaHome, href: "/createRequest" },
+      { key: "history", icon: FaClock, href: "/historyRequest" },
+      { key: "news", icon: FaNewspaper, href: "/news" },
+      { key: "profile", icon: FaCog, href: "/ProfilePage" },
+    ],
+    volunteer: [
+      { key: "home", icon: FaHome, href: "/mainValounter" },
+      { key: "history", icon: FaClock, href: "/valounterHistoryRequest" },
+      { key: "news", icon: FaNewspaper, href: "/volunteer/news" },
+      { key: "profile", icon: FaCog, href: "/valounterProfilePage" },
+    ],
+    moderator: [
+      { key: "queue", icon: FaHome, href: "/moderatorMain" },
+      { key: "history", icon: FaClock, href: "/moderatorHistoryRequest" },
+      { key: "news", icon: FaNewspaper, href: "/moderator/news" },
+      { key: "profile", icon: FaCog, href: "/moderatorProfilePage" },
+    ],
+  };
+
+  const tabs = routesByRole[user.role] || [];
 
   return (
     <nav className="fixed bottom-0 left-0 right-0 flex justify-center">
       <div className="w-full max-w-md bg-white rounded-t-xl flex items-center justify-around py-4 shadow-inner">
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          const active = pathname === tab.href;
+          return (
             <button
+              key={tab.key}
               type="button"
-          onClick={() => router.push("/createRequest")}
-          className="flex flex-col items-center gap-1 text-[#90D2F9]"
+              onClick={() => router.push(tab.href)}
+              className={`flex flex-col items-center gap-1 ${
+                active ? "text-[#90D2F9]" : "text-gray-400"
+              }`}
             >
-          <FaHome size={20} />
-        </button>
-        <button
-          type="button"
-          onClick={() => router.push("/historyRequest")}
-          className="flex flex-col items-center gap-1 text-[#90D2F9]"
-        >
-          <FaClock size={20} />
-        </button>
-        <button
-          type="button"
-          className="flex flex-col items-center gap-1 text-[#90D2F9]"
-        >
-          <FaNewspaper size={20} />
-        </button>
-        <button
-          type="button"
-          onClick={() => router.push("/ProfilePage")}
-          className="flex flex-col items-center gap-1 text-[#90D2F9]"
-        >
-          <FaCog size={20} />
+              <Icon size={20} />
             </button>
+          );
+        })}
       </div>
     </nav>
   );

app/components/ValounterRequestDetailsModal.jsx

@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+import { FaStar } from "react-icons/fa";
+
+const RequestDetailsModal = ({ request, onClose }) => {
+    const isDone = request.status === "Выполнена";
+    const isInProgress = request.status === "В процессе";
+
+    const [rating, setRating] = useState(0);
+    const [review, setReview] = useState("");
+
+    const handleStarClick = (value) => {
+        setRating(value);
+    };
+
+    const handleSubmit = () => {
+        console.log("Отправить отзыв:", {
+            id: request.id,
+            status: request.status,
+            rating,
+            review,
+        });
+        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-7 h-7 rounded-full flex items-center justify-center text-lg"
+                >
+                    ←
+                </button>
+                <p className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
+                    Заявка от {request.createdAt}
+                </p>
+                <span className="w-7" />
+            </div>
+
+            {/* Карточка */}
+            <div className="flex-1 flex items-start justify-center">
+                <div className="w-full max-w-[360px] bg-white rounded-2xl p-4 flex flex-col gap-4 shadow-lg">
+                    {/* Статус + дата/время */}
+                    <div className="flex items-start justify-between">
+                        <span
+                            className="inline-flex items-center justify-center px-3 py-1 rounded-full font-montserrat text-[10px] font-semibold text-white"
+                            style={{ backgroundColor: request.statusColor }}
+                        >
+                            {request.status}
+                        </span>
+                        <div className="text-right leading-tight">
+                            <p className="font-montserrat text-[10px] text-black">
+                                {request.date}
+                            </p>
+                            <p className="font-montserrat text-[10px] text-black">
+                                {request.time}
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Название задачи */}
+                    <p className="font-montserrat font-semibold text-[16px] leading-[20px] text-black">
+                        {request.title}
+                    </p>
+
+                    {/* Полная информация о заявке */}
+                    <div className="flex flex-col gap-1 text-[12px] font-montserrat text-black">
+                        <p>ФИО: {request.fullName}</p>
+                        <p>Адрес: {request.address}</p>
+                        {request.flat && <p>Квартира: {request.flat}</p>}
+                        {request.floor && <p>Этаж: {request.floor}</p>}
+                        {request.phone && <p>Телефон: {request.phone}</p>}
+                        {request.amount && <p>Сумма: {request.amount}</p>}
+                        {request.deadline && <p>Выполнить до: {request.deadline}</p>}
+                    </div>
+
+                    {/* Описание / список покупок */}
+                    {request.description && (
+                        <div className="bg-[#E4E4E4] rounded-2xl px-3 py-2 max-h-[140px] overflow-y-auto">
+                            <p className="text-[11px] leading-[13px] font-montserrat whitespace-pre-line">
+                                {request.description}
+                            </p>
+                        </div>
+                    )}
+
+                    {/* Блок отзыва + рейтинг — и для Выполнена, и для В процессе */}
+                    {(isDone || isInProgress) && (
+                        <>
+                            <div className="bg-[#72B8E2] rounded-3xl p-3 flex flex-col gap-2">
+                                <p className="font-montserrat font-bold text-[12px] text-white">
+                                    Отзыв
+                                </p>
+                                <textarea
+                                    value={review}
+                                    onChange={(e) => setReview(e.target.value)}
+                                    rows={4}
+                                    className="w-full bg-[#72B8E2] rounded-2xl px-3 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none resize-none border border-white/20"
+                                    placeholder={
+                                        isDone
+                                            ? "Напишите, как прошла помощь"
+                                            : "Напишите, как сейчас идёт выполнение"
+                                    }
+                                />
+                            </div>
+
+                            <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) => (
+                                        <button
+                                            key={star}
+                                            type="button"
+                                            onClick={() => handleStarClick(star)}
+                                            className="text-[#F6E168]"
+                                        >
+                                            <FaStar
+                                                size={26}
+                                                className={
+                                                    star <= rating
+                                                        ? "fill-[#F6E168]"
+                                                        : "fill-[#F6E168]/40"
+                                                }
+                                            />
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+
+            {/* Кнопка внизу */}
+            {(isDone || isInProgress) && (
+                <button
+                    type="button"
+                    onClick={handleSubmit}
+                    className="mt-4 w-full max-w-[360px] mx-auto bg-[#94E067] rounded-2xl py-3 flex items-center justify-center"
+                >
+                    <span className="font-montserrat font-extrabold text-[16px] text-white">
+                        {isDone ? "Оставить отзыв" : "Сохранить прогресс"}
+                    </span>
+                </button>
+            )}
+        </div>
+    );
+};
+
+export default RequestDetailsModal;

app/context/AuthContext.jsx

@@ -0,0 +1,89 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+const AuthContext = createContext(null);
+
+// фейковые пользователи (3 логина/пароля)
+const USERS = [
+  {
+    id: 1,
+    role: "user", // обычный пользователь
+    name: "Пользователь",
+    login: "user@mail.com",
+    password: "user123",
+  },
+  {
+    id: 2,
+    role: "volunteer",
+    name: "Волонтёр",
+    login: "vol@mail.com",
+    password: "vol123",
+  },
+    {
+    id: 3,
+    role: "moderator",
+    name: "Модератор",
+    login: "mod@mail.com",
+    password: "mod123",
+  },
+];
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null); // {id, role, name, login}
+  const [loading, setLoading] = useState(true);
+  const router = useRouter();
+
+  // Поднимаем пользователя из localStorage, чтобы контекст сохранялся между перезагрузками
+  useEffect(() => {
+    const saved = typeof window !== "undefined" ? localStorage.getItem("authUser") : null;
+    if (saved) {
+      setUser(JSON.parse(saved));
+    }
+    setLoading(false);
+  }, []);
+
+  const login = async (login, password) => {
+    // имитация запроса на бэк
+    const found = USERS.find(
+      (u) => u.login === login && u.password === password
+    );
+    if (!found) {
+      throw new Error("Неверный логин или пароль");
+    }
+
+    const authUser = {
+      id: found.id,
+      role: found.role,
+      name: found.name,
+      login: found.login,
+    };
+
+    setUser(authUser);
+    localStorage.setItem("authUser", JSON.stringify(authUser));
+
+    // после логина перенаправляем на стартовую страницу по роли
+    if (found.role === "user") router.push("/home");
+    if (found.role === "volunteer") router.push("/mainValounter");
+    if (found.role === "moderator") router.push("/moderatorMain");
+  };
+
+  const logout = () => {
+    setUser(null);
+    localStorage.removeItem("authUser");
+    router.push("/login");
+  };
+
+  const value = {
+    user,
+    loading,
+    isAuthenticated: !!user,
+    login,
+    logout,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = () => useContext(AuthContext);

app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { AuthProvider } from "../app/context/AuthContext";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -14,7 +15,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className="antialiased">
-        {children}
+        <AuthProvider>{children}</AuthProvider>
       </body>
     </html>
   );

app/mainValounter/page.jsx

@@ -109,7 +109,7 @@ const MainVolunteerPage = () => {
                         <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-[11px] leading-[11px] text-white">
+                        <p className="font-montserrat font-extrabold text-[20px] leading-[11px] text-white">
                             Александр
                         </p>
                     </div>
@@ -121,7 +121,7 @@ const MainVolunteerPage = () => {
                     </button>
                 </header>
 
-                <h1 className="font-montserrat font-extrabold text-[16px] leading-[20px] text-white mb-2">
+                <h1 className="font-montserrat font-extrabold text-[20px] leading-[20px] text-white mb-2">
                     Кому нужна помощь
                 </h1>
 
@@ -161,14 +161,14 @@ const MainVolunteerPage = () => {
                             className="bg-white rounded-xl px-3 py-2 flex flex-col gap-1"
                             onClick={() => openPopup(req)}
                         >
-                            <p className="font-montserrat font-semibold text-[12px] leading-[14px] text-black">
+                            <p className="font-montserrat font-semibold text-[15px] leading-[14px] text-black">
                                 {req.title}
                             </p>
-                            <p className="font-montserrat text-[10px] text-black">
+                            <p className="font-montserrat text-[15px] text-black">
                                 {req.address}
                             </p>
                             {req.distance && (
-                                <p className="font-montserrat text-[9px] text-gray-500">
+                                <p className="font-montserrat text-[12px] text-gray-500">
                                     Расстояние: {req.distance}
                                 </p>
                             )}

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/valounterHistoryRequest/page.jsx

@@ -0,0 +1,228 @@
+"use client";
+
+import React, { useState } from "react";
+import { FaBell, FaUser, FaStar } from "react-icons/fa";
+import TabBar from "../components/TabBar";
+import RequestDetailsModal from "../components/ValounterRequestDetailsModal";
+
+const requests = [
+  {
+    id: 4,
+    title: "Приобрести продукты пенсионерке",
+    status: "Выполнена",
+    statusColor: "#71A5E9",
+    date: "До 28.11.2025",
+    time: "13:00",
+    createdAt: "28.11.2025",
+    description: "Купить продукты и принести по адресу.",
+  },
+  {
+    id: 5,
+    title: "Приобрести продукты пенсионерке",
+    status: "В процессе",
+    statusColor: "#E971E1",
+    date: "До 28.11.2025",
+    time: "13:00",
+    createdAt: "28.11.2025",
+    description: "Купить продукты и принести по адресу.",
+  },
+  {
+    id: 6,
+    title: "Приобрести продукты пенсионерке",
+    status: "В процессе",
+    statusColor: "#E971E1",
+    date: "До 28.11.2025",
+    time: "13:00",
+    createdAt: "28.11.2025",
+    description: "Купить продукты и принести по адресу.",
+  },
+  {
+    id: 7,
+    title: "Приобрести продукты пенсионерке",
+    status: "В процессе",
+    statusColor: "#E971E1",
+    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/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;