Реализованы задачи бэклога 1-5 (1я не до конца)
This commit is contained in:
mi
@@ -0,0 +1,182 @@
|
||||
import { useNavigate, useParams } from 'react-router';
|
||||
import { ArrowLeft, Calendar, FileText, CheckCircle, EyeOff, Clock } from 'lucide-react';
|
||||
|
||||
interface NotificationData {
|
||||
id: string;
|
||||
type: 'urgent' | 'reminder';
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
fullContent: string;
|
||||
deadline?: string;
|
||||
steps?: string[];
|
||||
}
|
||||
|
||||
const notificationDetails: Record<string, NotificationData> = {
|
||||
'1': {
|
||||
id: '1',
|
||||
type: 'urgent',
|
||||
icon: <Calendar className="w-6 h-6" />,
|
||||
title: 'Продление патента через 14 дней',
|
||||
description: 'Не забудьте подать документы заранее',
|
||||
fullContent: 'Ваш патент на работу истекает 19 июня 2026 года. Рекомендуем начать процесс продления заранее, чтобы избежать перерыва в легальном статусе.',
|
||||
deadline: '19 июня 2026',
|
||||
steps: [
|
||||
'Подготовьте пакет документов (паспорт, миграционная карта, текущий патент)',
|
||||
'Оплатите госпошлину и НДФЛ',
|
||||
'Подайте документы в МФЦ или МВД',
|
||||
'Получите новый патент в течение 10 рабочих дней'
|
||||
]
|
||||
},
|
||||
'2': {
|
||||
id: '2',
|
||||
type: 'reminder',
|
||||
icon: <FileText className="w-6 h-6" />,
|
||||
title: 'Проверьте статус РВП',
|
||||
description: 'Возможно, уже готово к получению',
|
||||
fullContent: 'Прошло более 6 месяцев с момента подачи документов на РВП. Рекомендуем проверить готовность документа на сайте МВД или обратиться в отделение лично.',
|
||||
steps: [
|
||||
'Зайдите на сайт гувм.мвд.рф',
|
||||
'Проверьте статус по номеру заявления',
|
||||
'При готовности запишитесь на получение',
|
||||
'Подготовьте документы для получения РВП'
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export function NotificationDetail() {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
const notification = id ? notificationDetails[id] : null;
|
||||
|
||||
if (!notification) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full p-4">
|
||||
<p className="text-muted-foreground">Уведомление не найдено</p>
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="mt-4 text-primary font-medium"
|
||||
>
|
||||
Вернуться на главную
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleComplete = () => {
|
||||
// В реальном приложении здесь будет логика отметки уведомления как выполненного
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
const handleHide = () => {
|
||||
// В реальном приложении здесь будет логика скрытия уведомления
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
const handleLater = () => {
|
||||
// В реальном приложении здесь будет логика напоминания позже
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Хедер с кнопкой назад */}
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-b border-border/40">
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="p-1.5 -ml-1.5 hover:bg-muted/50 rounded-lg transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<h1 className="font-medium">Уведомление</h1>
|
||||
</div>
|
||||
|
||||
{/* Контент */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Иконка и заголовок */}
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`flex items-center justify-center w-12 h-12 rounded-full flex-shrink-0 ${
|
||||
notification.type === 'urgent'
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'bg-muted text-muted-foreground'
|
||||
}`}>
|
||||
{notification.icon}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 pt-1">
|
||||
<h2 className="font-semibold text-base mb-1">{notification.title}</h2>
|
||||
<p className="text-sm text-muted-foreground">{notification.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Срок, если есть */}
|
||||
{notification.deadline && (
|
||||
<div className="bg-primary/5 border border-primary/20 rounded-lg p-3">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Calendar className="w-4 h-4 text-primary" />
|
||||
<span className="font-medium">Срок:</span>
|
||||
<span className="text-primary font-semibold">{notification.deadline}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Полное описание */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-medium text-sm">Подробности</h3>
|
||||
<p className="text-sm text-foreground/90 leading-relaxed">
|
||||
{notification.fullContent}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Шаги к действию */}
|
||||
{notification.steps && notification.steps.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-medium text-sm">Что нужно сделать</h3>
|
||||
<div className="space-y-2">
|
||||
{notification.steps.map((step, index) => (
|
||||
<div key={index} className="flex gap-2.5">
|
||||
<div className="flex items-center justify-center w-5 h-5 rounded-full bg-primary/10 text-primary text-xs font-medium flex-shrink-0 mt-0.5">
|
||||
{index + 1}
|
||||
</div>
|
||||
<p className="text-sm text-foreground/90 leading-relaxed flex-1">
|
||||
{step}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Кнопки управления */}
|
||||
<div className="border-t border-border/40 p-4 space-y-2 bg-background">
|
||||
<button
|
||||
onClick={handleComplete}
|
||||
className="w-full bg-primary text-primary-foreground rounded-lg px-4 py-3 font-medium flex items-center justify-center gap-2 hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
Готово
|
||||
</button>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleLater}
|
||||
className="flex-1 bg-muted text-foreground rounded-lg px-4 py-2.5 text-sm font-medium flex items-center justify-center gap-2 hover:bg-muted/80 transition-colors"
|
||||
>
|
||||
<Clock className="w-4 h-4" />
|
||||
Сделаю позже
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleHide}
|
||||
className="flex-1 bg-muted text-muted-foreground rounded-lg px-4 py-2.5 text-sm font-medium flex items-center justify-center gap-2 hover:bg-muted/80 transition-colors"
|
||||
>
|
||||
<EyeOff className="w-4 h-4" />
|
||||
Скрыть уведомление
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user