70 lines
4.2 KiB
TypeScript
70 lines
4.2 KiB
TypeScript
|
|
|||
|
|
import React from 'react';
|
|||
|
|
import { MOCK_EMPLOYEES } from '../../constants';
|
|||
|
|
import { Banknote, TrendingUp, Wallet, ArrowDownRight, PieChart, Calendar } from 'lucide-react';
|
|||
|
|
|
|||
|
|
export const PayrollModule: React.FC = () => {
|
|||
|
|
const totalPayroll = MOCK_EMPLOYEES.reduce((sum, e) => sum + e.salary, 0);
|
|||
|
|
const avgSalary = Math.round(totalPayroll / MOCK_EMPLOYEES.length);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6 animate-fade-in">
|
|||
|
|
{/* Visual Header */}
|
|||
|
|
<div className="bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-[2.5rem] p-8 text-white shadow-xl relative overflow-hidden">
|
|||
|
|
<Banknote className="absolute -top-4 -right-4 w-48 h-48 opacity-10 rotate-12" />
|
|||
|
|
<div className="relative z-10">
|
|||
|
|
<p className="text-emerald-100 text-[10px] font-black uppercase tracking-[0.2em] mb-2">Фонд Оплаты Труда (Месяц)</p>
|
|||
|
|
<h3 className="text-4xl font-black mb-6">{totalPayroll.toLocaleString()} ₽</h3>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-8">
|
|||
|
|
<div>
|
|||
|
|
<p className="text-[9px] text-emerald-200 font-bold uppercase mb-1">Средний оклад</p>
|
|||
|
|
<p className="text-xl font-black">{avgSalary.toLocaleString()} ₽</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-[9px] text-emerald-200 font-bold uppercase mb-1">Выплата в срок</p>
|
|||
|
|
<p className="text-xl font-black text-white flex items-center gap-2">
|
|||
|
|
100% <TrendingUp className="w-5 h-5 text-emerald-300" />
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* List by Department */}
|
|||
|
|
<div className="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
|
|||
|
|
<div className="p-4 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
|
|||
|
|
<h3 className="font-black text-slate-700 text-[10px] uppercase tracking-widest">Детализация начислений</h3>
|
|||
|
|
<div className="flex items-center gap-1.5 text-[10px] font-black text-primary-600 uppercase">
|
|||
|
|
<Calendar className="w-3.5 h-3.5"/> Май 2024
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="divide-y divide-slate-100">
|
|||
|
|
{MOCK_EMPLOYEES.map(emp => (
|
|||
|
|
<div key={emp.id} className="p-4 flex items-center justify-between hover:bg-slate-50 transition-colors">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-500 text-xs">{emp.name[0]}</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs font-bold text-slate-800">{emp.name}</p>
|
|||
|
|
<p className="text-[9px] text-slate-400 font-bold uppercase">{emp.position}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-right">
|
|||
|
|
<p className="text-sm font-black text-slate-900">{emp.salary.toLocaleString()} ₽</p>
|
|||
|
|
<span className="text-[8px] font-black text-emerald-500 uppercase">Оклад + Премия</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center gap-3 p-4 bg-blue-50 rounded-2xl border border-blue-100">
|
|||
|
|
<PieChart className="w-5 h-5 text-blue-500 shrink-0" />
|
|||
|
|
<p className="text-[11px] text-blue-700 leading-snug font-medium">
|
|||
|
|
Расходы на персонал составляют 42% от операционного бюджета УК. Рекомендуемый лимит: не более 45%.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|