Init front
This commit is contained in:
fullofempt
259
app/historyRequest/page.jsx
Normal file
259
app/historyRequest/page.jsx
Normal file
@@ -0,0 +1,259 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { FaBell, FaUser, FaStar } from "react-icons/fa";
|
||||
import TabBar from "../components/TabBar";
|
||||
import RequestDetailsModal from "../components/RequestDetailsModal";
|
||||
|
||||
const requests = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Приобрести продукты пенсионерке",
|
||||
status: "Отклонена",
|
||||
statusColor: "#FF8282",
|
||||
date: "До 28.11.2025",
|
||||
time: "13:00",
|
||||
createdAt: "28.11.2025",
|
||||
rejectReason: "Адрес вне зоны обслуживания",
|
||||
description: "Купить продукты и принести по адресу.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Приобрести продукты пенсионерке",
|
||||
status: "Принята",
|
||||
statusColor: "#94E067",
|
||||
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: "#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-[11px] 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-[18px] 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>
|
||||
// );
|
||||
// };
|
||||
|
||||
Reference in New Issue
Block a user