43 lines
2.6 KiB
TypeScript
Executable File
43 lines
2.6 KiB
TypeScript
Executable File
|
||
import React from 'react';
|
||
import { Users, Search, Filter } from 'lucide-react';
|
||
import { Debtor } from '../../types';
|
||
|
||
export const DebtorsList: React.FC<{ debtors: (Debtor & { address: string })[] }> = ({ debtors }) => {
|
||
return (
|
||
<div className="space-y-4 animate-fade-in">
|
||
<div className="flex gap-4">
|
||
<div className="relative flex-1">
|
||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||
<input type="text" placeholder="Поиск должника..." className="w-full pl-9 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm" />
|
||
</div>
|
||
<button className="p-2.5 bg-white border border-slate-200 rounded-xl text-slate-500 hover:bg-slate-50"><Filter className="w-5 h-5"/></button>
|
||
</div>
|
||
|
||
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm space-y-3">
|
||
<div className="flex justify-between items-center mb-2 px-1">
|
||
<h3 className="font-bold text-slate-700 text-sm">Реестр неплательщиков</h3>
|
||
<span className="text-[10px] font-black text-slate-400 uppercase">Всего: {debtors.length}</span>
|
||
</div>
|
||
{debtors.map((d, i) => (
|
||
<div key={i} className="flex items-center justify-between p-3 bg-slate-50 hover:bg-slate-100 transition-colors rounded-xl border border-slate-100">
|
||
<div className="flex items-center gap-3">
|
||
<div className={`p-2 rounded-lg ${d.months > 3 ? 'bg-red-100 text-red-600' : 'bg-amber-100 text-amber-600'}`}>
|
||
<Users className="w-4 h-4"/>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-bold text-slate-700">{d.address}, кв. {d.apartment}</p>
|
||
<p className="text-xs text-slate-500">{d.months} мес. долга • {d.status === 'legal' ? 'В суде' : 'Уведомлен'}</p>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<p className="text-sm font-black text-red-600">{d.amount.toLocaleString()} ₽</p>
|
||
<button className="text-[9px] font-black text-primary-600 uppercase hover:underline">Выписать претензию</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|