Initial commit MKD fixes

components/hr/PayrollModule.tsx

@@ -0,0 +1,69 @@
+
+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>
+    );
+};