76 lines
4.7 KiB
TypeScript
76 lines
4.7 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import { DomaApplication } from '../../types';
|
|||
|
|
// Added CheckCircle2 to the imports from lucide-react
|
|||
|
|
import { AlertTriangle, MapPin, Phone, User, Clock, ChevronRight, Siren, ShieldAlert, CheckCircle2 } from 'lucide-react';
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
applications: DomaApplication[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const DispatcherControl: React.FC<Props> = ({ applications }) => {
|
|||
|
|
const overdue = applications.filter(a => a.status !== 'done' && a.status !== 'canceled' && new Date(a.deadlineAt) < new Date());
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6 animate-fade-in">
|
|||
|
|
{/* Urgent Alert Bar */}
|
|||
|
|
<div className="bg-red-600 rounded-[2rem] p-6 text-white shadow-xl shadow-red-500/20 flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<div className="p-3 bg-white/20 rounded-2xl animate-pulse">
|
|||
|
|
<Siren className="w-8 h-8 text-white"/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-xl font-black leading-none">Внимание: Просрочка</h3>
|
|||
|
|
<p className="text-red-100 text-xs mt-1 font-medium opacity-80">Требуется немедленное вмешательство в {overdue.length} заявках</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button className="bg-white text-red-600 px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest shadow-lg active:scale-95 transition-all">
|
|||
|
|
Связаться со всеми
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Overdue List */}
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<h4 className="font-black text-slate-500 text-[10px] uppercase tracking-[0.2em] px-1">Журнал инцидентов</h4>
|
|||
|
|
{overdue.map(app => (
|
|||
|
|
<div key={app.id} className="bg-white p-5 rounded-[2rem] border-2 border-red-100 shadow-sm flex flex-col md:flex-row justify-between gap-6 hover:border-red-300 transition-all">
|
|||
|
|
<div className="flex items-start gap-4">
|
|||
|
|
<div className="p-4 bg-red-50 text-red-600 rounded-2xl">
|
|||
|
|
<ShieldAlert className="w-7 h-7"/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div className="flex items-center gap-2 mb-1">
|
|||
|
|
<span className="text-[10px] font-black text-red-600 bg-red-100 px-2 py-0.5 rounded uppercase">SLA Breach</span>
|
|||
|
|
<span className="text-[10px] font-bold text-slate-400">№ {app.number}</span>
|
|||
|
|
</div>
|
|||
|
|
<h4 className="font-black text-slate-800 text-base">{app.address}, кв. {app.apartment}</h4>
|
|||
|
|
<p className="text-xs text-slate-500 mt-1 font-medium italic">«{app.description}»</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center justify-between md:justify-end gap-6 border-t md:border-t-0 border-slate-50 pt-4 md:pt-0">
|
|||
|
|
<div className="text-right">
|
|||
|
|
<p className="text-red-600 font-black text-sm">Просрочено на 4ч.</p>
|
|||
|
|
<p className="text-[9px] text-slate-400 font-bold uppercase mt-1">Дедлайн: {new Date(app.deadlineAt).toLocaleTimeString()}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<button className="p-3 bg-slate-900 text-white rounded-xl hover:bg-slate-800 transition-colors shadow-lg">
|
|||
|
|
<Phone className="w-4 h-4"/>
|
|||
|
|
</button>
|
|||
|
|
<button className="p-3 bg-slate-50 text-slate-400 rounded-xl hover:text-primary-600 transition-colors">
|
|||
|
|
<ChevronRight className="w-4 h-4"/>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
{overdue.length === 0 && (
|
|||
|
|
<div className="py-20 text-center text-slate-400">
|
|||
|
|
{/* FIX: CheckCircle2 is now imported correctly from lucide-react */}
|
|||
|
|
<CheckCircle2 className="w-12 h-12 mx-auto mb-3 opacity-20 text-emerald-500"/>
|
|||
|
|
<p className="font-bold uppercase tracking-widest text-xs">Все заявки в рамках нормативов</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|