40 lines
2.3 KiB
TypeScript
40 lines
2.3 KiB
TypeScript
|
|
|||
|
|
import React from 'react';
|
|||
|
|
import { Employee, District } from '../../types';
|
|||
|
|
import { User, Phone, MessageCircle, MapPin } from 'lucide-react';
|
|||
|
|
import { MOCK_EMPLOYEES } from '../../constants';
|
|||
|
|
|
|||
|
|
export const StaffRegistry: React.FC<{ districts: District[] }> = ({ districts }) => {
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4 animate-fade-in">
|
|||
|
|
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm mb-6">
|
|||
|
|
<h3 className="font-bold text-slate-700 text-sm mb-4">Штат сотрудников по участкам</h3>
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{MOCK_EMPLOYEES.map(emp => {
|
|||
|
|
const district = districts.find(d => d.id === emp.assignedDistrictId);
|
|||
|
|
return (
|
|||
|
|
<div key={emp.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-xl border border-slate-100">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-primary-600 font-black border border-slate-200">
|
|||
|
|
{emp.name.split(' ').map(n => n[0]).join('')}
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="font-bold text-slate-800 text-sm">{emp.name}</p>
|
|||
|
|
<p className="text-[10px] text-slate-500 flex items-center gap-1">
|
|||
|
|
<MapPin className="w-3 h-3"/> {district?.name || 'Не привязан'} • {emp.position}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-1">
|
|||
|
|
<button className="p-2 text-emerald-600 hover:bg-emerald-50 rounded-lg"><Phone className="w-4 h-4"/></button>
|
|||
|
|
<button className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg"><MessageCircle className="w-4 h-4"/></button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|