1069 lines
64 KiB
TypeScript
1069 lines
64 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { authFetch } from '../../services/apiClient';
|
|||
|
|
import { Monitor, Coffee, Package, Clock, CheckCircle2, QrCode, Plus, X, Trash2, ArrowRightLeft, History } from 'lucide-react';
|
|||
|
|
import { OfficeEquipment, Employee, OfficeEquipmentHistoryItem } from '../../types';
|
|||
|
|
|
|||
|
|
// Компонент для отображения количества на складе
|
|||
|
|
const InventoryCountDisplay: React.FC<{ equipmentName: string }> = ({ equipmentName }) => {
|
|||
|
|
const [inventoryCount, setInventoryCount] = useState<string>('Проверка...');
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const fetchCount = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await authFetch('/api/office/inventory');
|
|||
|
|
if (response.ok) {
|
|||
|
|
const data = await response.json();
|
|||
|
|
const matchingItem = data.find((item: any) =>
|
|||
|
|
(item.name || '').toLowerCase() === (equipmentName || '').toLowerCase()
|
|||
|
|
);
|
|||
|
|
if (matchingItem) {
|
|||
|
|
setInventoryCount(`${matchingItem.quantity} ${matchingItem.unit || 'шт.'}`);
|
|||
|
|
} else {
|
|||
|
|
setInventoryCount('0 шт.');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Ошибка загрузки склада:', error);
|
|||
|
|
setInventoryCount('Ошибка');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
fetchCount();
|
|||
|
|
}, [equipmentName]);
|
|||
|
|
|
|||
|
|
return <span className="text-sm font-bold text-slate-800">{inventoryCount}</span>;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export const FacilityManagement: React.FC = () => {
|
|||
|
|
const [equipment, setEquipment] = useState<OfficeEquipment[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [showCreateModal, setShowCreateModal] = useState(false);
|
|||
|
|
const [showViewModal, setShowViewModal] = useState(false);
|
|||
|
|
const [showWriteOffModal, setShowWriteOffModal] = useState(false);
|
|||
|
|
const [showTransferModal, setShowTransferModal] = useState(false);
|
|||
|
|
const [selectedEquipment, setSelectedEquipment] = useState<OfficeEquipment | null>(null);
|
|||
|
|
const [writeOffFormData, setWriteOffFormData] = useState({
|
|||
|
|
reason: ''
|
|||
|
|
});
|
|||
|
|
const [employees, setEmployees] = useState<{ id: string; name: string; position?: string }[]>([]);
|
|||
|
|
const [assignedToDropdownOpen, setAssignedToDropdownOpen] = useState(false);
|
|||
|
|
const [assignedToFilter, setAssignedToFilter] = useState('');
|
|||
|
|
const [equipmentHistory, setEquipmentHistory] = useState<OfficeEquipmentHistoryItem[]>([]);
|
|||
|
|
const [transferToFilter, setTransferToFilter] = useState('');
|
|||
|
|
const [transferDropdownOpen, setTransferDropdownOpen] = useState(false);
|
|||
|
|
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
name: '',
|
|||
|
|
type: 'pc' as 'pc' | 'laptop' | 'air_conditioner' | 'printer' | 'other',
|
|||
|
|
brand: '',
|
|||
|
|
model: '',
|
|||
|
|
serialNumber: '',
|
|||
|
|
assignedTo: '',
|
|||
|
|
purchaseDate: '',
|
|||
|
|
warrantyUntil: '',
|
|||
|
|
condition: 'good' as 'good' | 'fair' | 'poor',
|
|||
|
|
notes: '',
|
|||
|
|
nextMaintenanceDate: ''
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchEquipment();
|
|||
|
|
fetchEmployees();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (showViewModal && selectedEquipment?.id) {
|
|||
|
|
fetchEquipmentHistory(selectedEquipment.id);
|
|||
|
|
}
|
|||
|
|
}, [showViewModal, selectedEquipment?.id]);
|
|||
|
|
|
|||
|
|
const fetchEmployees = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await authFetch('/api/employees');
|
|||
|
|
if (response.ok) {
|
|||
|
|
const data = await response.json();
|
|||
|
|
const activeEmployees = data
|
|||
|
|
.filter((emp: Employee) => !emp.status || emp.status === 'active')
|
|||
|
|
.map((emp: Employee) => ({
|
|||
|
|
id: emp.id,
|
|||
|
|
name: emp.name,
|
|||
|
|
position: emp.position || ''
|
|||
|
|
}))
|
|||
|
|
.sort((a: { name: string }, b: { name: string }) => a.name.localeCompare(b.name));
|
|||
|
|
setEmployees(activeEmployees);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Ошибка загрузки сотрудников:', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const fetchEquipment = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await authFetch('/api/office/equipment');
|
|||
|
|
if (response.ok) {
|
|||
|
|
const data = await response.json();
|
|||
|
|
// Преобразуем snake_case в camelCase
|
|||
|
|
const normalizedData = data.map((eq: any) => ({
|
|||
|
|
id: eq.id,
|
|||
|
|
name: eq.name || '',
|
|||
|
|
type: eq.type || 'other',
|
|||
|
|
brand: eq.brand,
|
|||
|
|
model: eq.model,
|
|||
|
|
serialNumber: eq.serial_number || eq.serialNumber || '',
|
|||
|
|
assignedTo: eq.assigned_to || eq.assignedTo,
|
|||
|
|
purchaseDate: eq.purchase_date || eq.purchaseDate,
|
|||
|
|
warrantyUntil: eq.warranty_until || eq.warrantyUntil,
|
|||
|
|
nextMaintenanceDate: eq.next_maintenance_date || eq.nextMaintenanceDate,
|
|||
|
|
condition: eq.condition || 'good',
|
|||
|
|
notes: eq.notes,
|
|||
|
|
createdAt: eq.created_at,
|
|||
|
|
updatedAt: eq.updated_at
|
|||
|
|
}));
|
|||
|
|
setEquipment(normalizedData);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Ошибка загрузки оборудования:', error);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCreateEquipment = async () => {
|
|||
|
|
try {
|
|||
|
|
if (!formData.name || !formData.name.trim()) {
|
|||
|
|
alert('Пожалуйста, укажите название оборудования');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const response = await authFetch('/api/office/equipment', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
name: formData.name,
|
|||
|
|
type: formData.type,
|
|||
|
|
brand: formData.brand || null,
|
|||
|
|
model: formData.model || null,
|
|||
|
|
serial_number: formData.serialNumber || null,
|
|||
|
|
assigned_to: formData.assignedTo || null,
|
|||
|
|
purchase_date: formData.purchaseDate || null,
|
|||
|
|
warranty_until: formData.warrantyUntil || null,
|
|||
|
|
next_maintenance_date: formData.nextMaintenanceDate || null,
|
|||
|
|
condition: formData.condition || 'good',
|
|||
|
|
notes: formData.notes || null
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
const newEquipment = await response.json();
|
|||
|
|
// Преобразуем snake_case в camelCase
|
|||
|
|
const normalizedEquipment = {
|
|||
|
|
id: newEquipment.id,
|
|||
|
|
name: newEquipment.name || formData.name,
|
|||
|
|
type: newEquipment.type || formData.type,
|
|||
|
|
brand: newEquipment.brand || formData.brand,
|
|||
|
|
model: newEquipment.model || formData.model,
|
|||
|
|
serialNumber: newEquipment.serial_number || formData.serialNumber || '',
|
|||
|
|
assignedTo: newEquipment.assigned_to || formData.assignedTo,
|
|||
|
|
purchaseDate: newEquipment.purchase_date || formData.purchaseDate,
|
|||
|
|
warrantyUntil: newEquipment.warranty_until || formData.warrantyUntil,
|
|||
|
|
nextMaintenanceDate: newEquipment.next_maintenance_date || formData.nextMaintenanceDate,
|
|||
|
|
condition: newEquipment.condition || formData.condition,
|
|||
|
|
notes: newEquipment.notes || formData.notes,
|
|||
|
|
createdAt: newEquipment.created_at,
|
|||
|
|
updatedAt: newEquipment.updated_at
|
|||
|
|
};
|
|||
|
|
setEquipment([normalizedEquipment, ...equipment]);
|
|||
|
|
setShowCreateModal(false);
|
|||
|
|
setFormData({
|
|||
|
|
name: '',
|
|||
|
|
type: 'pc',
|
|||
|
|
brand: '',
|
|||
|
|
model: '',
|
|||
|
|
serialNumber: '',
|
|||
|
|
assignedTo: '',
|
|||
|
|
purchaseDate: '',
|
|||
|
|
warrantyUntil: '',
|
|||
|
|
condition: 'good',
|
|||
|
|
notes: '',
|
|||
|
|
nextMaintenanceDate: ''
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
|
|||
|
|
alert(`Ошибка создания оборудования: ${errorData.error || 'Неизвестная ошибка'}`);
|
|||
|
|
}
|
|||
|
|
} catch (error: any) {
|
|||
|
|
console.error('Ошибка создания оборудования:', error);
|
|||
|
|
alert(`Ошибка создания оборудования: ${error.message || 'Неизвестная ошибка'}`);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const fetchEquipmentHistory = async (equipmentId: number) => {
|
|||
|
|
try {
|
|||
|
|
const response = await authFetch(`/api/office/equipment/${equipmentId}/history`);
|
|||
|
|
if (response.ok) {
|
|||
|
|
const data = await response.json();
|
|||
|
|
setEquipmentHistory(Array.isArray(data) ? data : []);
|
|||
|
|
} else {
|
|||
|
|
setEquipmentHistory([]);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Ошибка загрузки истории:', error);
|
|||
|
|
setEquipmentHistory([]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCheckEquipment = (eq: OfficeEquipment) => {
|
|||
|
|
setSelectedEquipment(eq);
|
|||
|
|
setFormData({
|
|||
|
|
name: eq.name || '',
|
|||
|
|
type: eq.type || 'other',
|
|||
|
|
brand: eq.brand || '',
|
|||
|
|
model: eq.model || '',
|
|||
|
|
serialNumber: eq.serialNumber || '',
|
|||
|
|
assignedTo: eq.assignedTo || '',
|
|||
|
|
purchaseDate: eq.purchaseDate || '',
|
|||
|
|
warrantyUntil: eq.warrantyUntil || '',
|
|||
|
|
condition: eq.condition || 'good',
|
|||
|
|
notes: eq.notes || '',
|
|||
|
|
nextMaintenanceDate: eq.nextMaintenanceDate || ''
|
|||
|
|
});
|
|||
|
|
setShowViewModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleUpdateEquipment = async () => {
|
|||
|
|
if (!selectedEquipment) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
if (!formData.name || !formData.name.trim()) {
|
|||
|
|
alert('Пожалуйста, укажите название оборудования');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const response = await authFetch(`/api/office/equipment/${selectedEquipment.id}`, {
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
name: formData.name,
|
|||
|
|
type: formData.type,
|
|||
|
|
brand: formData.brand || null,
|
|||
|
|
model: formData.model || null,
|
|||
|
|
serialNumber: formData.serialNumber || null,
|
|||
|
|
purchaseDate: formData.purchaseDate || null,
|
|||
|
|
warrantyUntil: formData.warrantyUntil || null,
|
|||
|
|
nextMaintenanceDate: formData.nextMaintenanceDate || null,
|
|||
|
|
condition: formData.condition || 'good',
|
|||
|
|
notes: formData.notes || null
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
fetchEquipment();
|
|||
|
|
setShowViewModal(false);
|
|||
|
|
setSelectedEquipment(null);
|
|||
|
|
alert('Оборудование успешно обновлено');
|
|||
|
|
} else {
|
|||
|
|
const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
|
|||
|
|
alert(`Ошибка обновления: ${errorData.error || 'Неизвестная ошибка'}`);
|
|||
|
|
}
|
|||
|
|
} catch (error: any) {
|
|||
|
|
console.error('Ошибка обновления оборудования:', error);
|
|||
|
|
alert(`Ошибка: ${error.message || 'Неизвестная ошибка'}`);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getEquipmentIcon = (type: string) => {
|
|||
|
|
switch (type) {
|
|||
|
|
case 'laptop':
|
|||
|
|
return <Monitor className="w-6 h-6"/>;
|
|||
|
|
case 'air_conditioner':
|
|||
|
|
return <Coffee className="w-6 h-6"/>;
|
|||
|
|
default:
|
|||
|
|
return <Package className="w-6 h-6"/>;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getTypeLabel = (type: string) => {
|
|||
|
|
const labels = {
|
|||
|
|
pc: 'ПК',
|
|||
|
|
laptop: 'Ноутбук',
|
|||
|
|
air_conditioner: 'Кондиционер',
|
|||
|
|
printer: 'Принтер',
|
|||
|
|
other: 'Другое'
|
|||
|
|
};
|
|||
|
|
return labels[type as keyof typeof labels] || type;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6 animate-fade-in">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<h3 className="font-black text-slate-500 text-[10px] uppercase tracking-[0.2em]">Основные средства (ОС)</h3>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateModal(true)}
|
|||
|
|
className="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-primary-700 transition-colors flex items-center gap-2"
|
|||
|
|
>
|
|||
|
|
<Plus className="w-4 h-4" />
|
|||
|
|
Создать
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{loading ? (
|
|||
|
|
<div className="text-center py-8 text-slate-500">Загрузка...</div>
|
|||
|
|
) : equipment && equipment.length > 0 ? (
|
|||
|
|
<div className="grid grid-cols-1 gap-3">
|
|||
|
|
{equipment.map(asset => {
|
|||
|
|
if (!asset || !asset.id) return null;
|
|||
|
|
const needsMaintenance = asset.nextMaintenanceDate &&
|
|||
|
|
new Date(asset.nextMaintenanceDate) <= new Date();
|
|||
|
|
return (
|
|||
|
|
<div key={asset.id} className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex justify-between items-center group hover:border-primary-300 transition-all">
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-400 group-hover:bg-primary-50 group-hover:text-primary-600 transition-colors border border-slate-100">
|
|||
|
|
{getEquipmentIcon(asset.type)}
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-bold text-slate-800 text-sm">{asset.name}</h4>
|
|||
|
|
<div className="flex items-center gap-2 mt-0.5">
|
|||
|
|
<p className="text-[10px] text-slate-400 font-bold uppercase tracking-tighter">
|
|||
|
|
{asset.serialNumber ? `S/N: ${asset.serialNumber}` : getTypeLabel(asset.type)}
|
|||
|
|
</p>
|
|||
|
|
<span className="w-1 h-1 rounded-full bg-slate-300"/>
|
|||
|
|
<p className="text-[10px] text-primary-600 font-black">{asset.assignedTo || 'Свободен'}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-right flex items-center gap-3">
|
|||
|
|
<div>
|
|||
|
|
<span className={`text-[9px] font-black px-2 py-0.5 rounded uppercase tracking-tighter ${
|
|||
|
|
asset.condition === 'good' ? 'bg-emerald-50 text-emerald-600' :
|
|||
|
|
asset.condition === 'fair' ? 'bg-amber-50 text-amber-600' :
|
|||
|
|
'bg-red-50 text-red-600'
|
|||
|
|
}`}>
|
|||
|
|
{asset.condition === 'good' ? 'Исправен' : asset.condition === 'fair' ? 'Требует ТО' : 'Неисправен'}
|
|||
|
|
</span>
|
|||
|
|
{needsMaintenance && (
|
|||
|
|
<span className="block text-[8px] font-black text-red-500 uppercase tracking-tighter mt-1">
|
|||
|
|
Требуется ТО
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleCheckEquipment(asset)}
|
|||
|
|
className="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors border border-blue-100"
|
|||
|
|
title="Открыть карточку"
|
|||
|
|
>
|
|||
|
|
<CheckCircle2 className="w-4 h-4"/>
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setSelectedEquipment(asset);
|
|||
|
|
setWriteOffFormData({ reason: '' });
|
|||
|
|
setShowWriteOffModal(true);
|
|||
|
|
}}
|
|||
|
|
className="p-1.5 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors border border-red-100"
|
|||
|
|
title="Списать оборудование"
|
|||
|
|
>
|
|||
|
|
<Trash2 className="w-4 h-4"/>
|
|||
|
|
</button>
|
|||
|
|
<button className="block p-1.5 bg-slate-50 rounded-lg text-slate-400 hover:text-primary-600 transition-colors border border-slate-100">
|
|||
|
|
<QrCode className="w-4 h-4"/>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}).filter(Boolean)}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="text-center py-8 text-slate-500">Нет оборудования</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Create Equipment Modal */}
|
|||
|
|
{showCreateModal && (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|||
|
|
<div className="bg-white rounded-2xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h3 className="text-lg font-bold text-slate-800">Добавить оборудование</h3>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateModal(false)}
|
|||
|
|
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
|||
|
|
>
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Название *</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.name}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
placeholder="Например: Ноутбук Dell"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Тип *</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.type}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="pc">ПК</option>
|
|||
|
|
<option value="laptop">Ноутбук</option>
|
|||
|
|
<option value="air_conditioner">Кондиционер</option>
|
|||
|
|
<option value="printer">Принтер</option>
|
|||
|
|
<option value="other">Другое</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Бренд</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.brand}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Модель</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.model}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, model: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Серийный номер</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.serialNumber}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, serialNumber: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="relative">
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Назначено</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={assignedToDropdownOpen ? assignedToFilter : formData.assignedTo}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
setAssignedToFilter(e.target.value);
|
|||
|
|
setAssignedToDropdownOpen(true);
|
|||
|
|
}}
|
|||
|
|
onFocus={() => {
|
|||
|
|
setAssignedToFilter(formData.assignedTo);
|
|||
|
|
setAssignedToDropdownOpen(true);
|
|||
|
|
}}
|
|||
|
|
onBlur={() => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
setAssignedToDropdownOpen(false);
|
|||
|
|
setAssignedToFilter(formData.assignedTo);
|
|||
|
|
}, 200);
|
|||
|
|
}}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
placeholder="Начните вводить имя..."
|
|||
|
|
/>
|
|||
|
|
{assignedToDropdownOpen && (
|
|||
|
|
<div className="absolute z-10 mt-1 w-full bg-white border border-slate-300 rounded-lg shadow-lg max-h-48 overflow-y-auto">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => {
|
|||
|
|
setFormData({ ...formData, assignedTo: '' });
|
|||
|
|
setAssignedToFilter('');
|
|||
|
|
setAssignedToDropdownOpen(false);
|
|||
|
|
}}
|
|||
|
|
className="w-full px-3 py-2 text-left text-sm text-slate-500 hover:bg-slate-100"
|
|||
|
|
>
|
|||
|
|
— Не назначено —
|
|||
|
|
</button>
|
|||
|
|
{employees
|
|||
|
|
.filter((emp) =>
|
|||
|
|
emp.name.toLowerCase().includes(assignedToFilter.toLowerCase()) ||
|
|||
|
|
(emp.position && emp.position.toLowerCase().includes(assignedToFilter.toLowerCase()))
|
|||
|
|
)
|
|||
|
|
.map((emp) => (
|
|||
|
|
<button
|
|||
|
|
key={emp.id}
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => {
|
|||
|
|
setFormData({ ...formData, assignedTo: emp.name });
|
|||
|
|
setAssignedToFilter(emp.name);
|
|||
|
|
setAssignedToDropdownOpen(false);
|
|||
|
|
}}
|
|||
|
|
className="w-full px-3 py-2 text-left text-sm hover:bg-slate-100"
|
|||
|
|
>
|
|||
|
|
{emp.name}{emp.position ? ` — ${emp.position}` : ''}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
{formData.assignedTo && !employees.some((e) => e.name === formData.assignedTo) &&
|
|||
|
|
(formData.assignedTo.toLowerCase().includes(assignedToFilter.toLowerCase()) || !assignedToFilter) && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => {
|
|||
|
|
setAssignedToFilter(formData.assignedTo);
|
|||
|
|
setAssignedToDropdownOpen(false);
|
|||
|
|
}}
|
|||
|
|
className="w-full px-3 py-2 text-left text-sm hover:bg-slate-100 border-t border-slate-200"
|
|||
|
|
>
|
|||
|
|
{formData.assignedTo}
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{employees.length === 0 && (
|
|||
|
|
<p className="text-xs text-slate-400 mt-1">Загрузка списка сотрудников...</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Дата покупки</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={formData.purchaseDate}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, purchaseDate: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Гарантия до</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={formData.warrantyUntil}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, warrantyUntil: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Следующее ТО</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={formData.nextMaintenanceDate}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, nextMaintenanceDate: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Состояние *</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.condition}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, condition: e.target.value as any })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="good">Исправен</option>
|
|||
|
|
<option value="fair">Требует ТО</option>
|
|||
|
|
<option value="poor">Неисправен</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Примечания</label>
|
|||
|
|
<textarea
|
|||
|
|
value={formData.notes}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
rows={3}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex gap-3 pt-4">
|
|||
|
|
<button
|
|||
|
|
onClick={handleCreateEquipment}
|
|||
|
|
disabled={!formData.name}
|
|||
|
|
className="flex-1 bg-primary-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-primary-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed"
|
|||
|
|
>
|
|||
|
|
Создать
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateModal(false)}
|
|||
|
|
className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-colors"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* View/Edit Equipment Modal */}
|
|||
|
|
{showViewModal && selectedEquipment && (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|||
|
|
<div className="bg-white rounded-2xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h3 className="text-lg font-bold text-slate-800">Карточка оборудования</h3>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setShowViewModal(false);
|
|||
|
|
setSelectedEquipment(null);
|
|||
|
|
}}
|
|||
|
|
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
|||
|
|
>
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Название *</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.name}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Тип *</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.type}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="pc">ПК</option>
|
|||
|
|
<option value="laptop">Ноутбук</option>
|
|||
|
|
<option value="air_conditioner">Кондиционер</option>
|
|||
|
|
<option value="printer">Принтер</option>
|
|||
|
|
<option value="other">Другое</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Бренд</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.brand}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Модель</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.model}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, model: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Серийный номер</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.serialNumber}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, serialNumber: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Закреплено за</label>
|
|||
|
|
<div className="flex gap-2 items-center">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
readOnly
|
|||
|
|
value={formData.assignedTo || '— Свободен —'}
|
|||
|
|
className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-50"
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setShowTransferModal(true)}
|
|||
|
|
className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium bg-primary-100 text-primary-700 hover:bg-primary-200 transition-colors"
|
|||
|
|
>
|
|||
|
|
<ArrowRightLeft className="w-4 h-4" />
|
|||
|
|
Перемещение
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Дата покупки</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={formData.purchaseDate}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, purchaseDate: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Гарантия до</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={formData.warrantyUntil}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, warrantyUntil: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Следующее ТО</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={formData.nextMaintenanceDate}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, nextMaintenanceDate: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Состояние *</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.condition}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, condition: e.target.value as any })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="good">Исправен</option>
|
|||
|
|
<option value="fair">Требует ТО</option>
|
|||
|
|
<option value="poor">Неисправен</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Примечания</label>
|
|||
|
|
<textarea
|
|||
|
|
value={formData.notes}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
rows={3}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="border-t border-slate-200 pt-4">
|
|||
|
|
<h4 className="flex items-center gap-2 text-sm font-bold text-slate-700 mb-2">
|
|||
|
|
<History className="w-4 h-4" />
|
|||
|
|
История
|
|||
|
|
</h4>
|
|||
|
|
<div className="max-h-40 overflow-y-auto space-y-2">
|
|||
|
|
{equipmentHistory.length === 0 && (
|
|||
|
|
<p className="text-xs text-slate-400">Нет записей</p>
|
|||
|
|
)}
|
|||
|
|
{equipmentHistory.map((item) => {
|
|||
|
|
const d = item.event_date ? new Date(item.event_date).toLocaleDateString('ru-RU') : '';
|
|||
|
|
if (item.event_type === 'purchase') {
|
|||
|
|
return <div key={item.id} className="text-xs text-slate-600 py-1 border-b border-slate-100">Закупка — {d}</div>;
|
|||
|
|
}
|
|||
|
|
if (item.event_type === 'issue') {
|
|||
|
|
return <div key={item.id} className="text-xs text-slate-600 py-1 border-b border-slate-100">Выдача — {d} → {item.assigned_to || ''}</div>;
|
|||
|
|
}
|
|||
|
|
if (item.event_type === 'transfer') {
|
|||
|
|
return <div key={item.id} className="text-xs text-slate-600 py-1 border-b border-slate-100">Перемещение — {d}: {item.assigned_from || '—'} → {item.assigned_to || '—'}</div>;
|
|||
|
|
}
|
|||
|
|
if (item.event_type === 'repair') {
|
|||
|
|
return <div key={item.id} className="text-xs text-slate-600 py-1 border-b border-slate-100">На ремонте — {d}. {item.reason ? `Причина: ${item.reason}` : ''}</div>;
|
|||
|
|
}
|
|||
|
|
if (item.event_type === 'write_off') {
|
|||
|
|
return <div key={item.id} className="text-xs text-red-600 py-1 border-b border-slate-100">Списание — {d}. {item.reason || ''}</div>;
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex gap-3 pt-4">
|
|||
|
|
<button
|
|||
|
|
onClick={handleUpdateEquipment}
|
|||
|
|
disabled={!formData.name}
|
|||
|
|
className="flex-1 bg-primary-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-primary-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed"
|
|||
|
|
>
|
|||
|
|
Сохранить
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setShowViewModal(false);
|
|||
|
|
setSelectedEquipment(null);
|
|||
|
|
}}
|
|||
|
|
className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-colors"
|
|||
|
|
>
|
|||
|
|
Закрыть
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Transfer Modal */}
|
|||
|
|
{showTransferModal && selectedEquipment && (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[60] p-4">
|
|||
|
|
<div className="bg-white rounded-2xl p-6 max-w-sm w-full">
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h3 className="text-lg font-bold text-slate-800">Перемещение</h3>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setShowTransferModal(false);
|
|||
|
|
setTransferToFilter('');
|
|||
|
|
setTransferDropdownOpen(false);
|
|||
|
|
}}
|
|||
|
|
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
|||
|
|
>
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-slate-600 mb-2">{selectedEquipment.name}</p>
|
|||
|
|
<p className="text-xs text-slate-500 mb-3">Сейчас: {formData.assignedTo || '— Свободен —'}</p>
|
|||
|
|
<div className="relative mb-4">
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Передать</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={transferDropdownOpen ? transferToFilter : (transferToFilter || '')}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
setTransferToFilter(e.target.value);
|
|||
|
|
setTransferDropdownOpen(true);
|
|||
|
|
}}
|
|||
|
|
onFocus={() => setTransferDropdownOpen(true)}
|
|||
|
|
onBlur={() => setTimeout(() => setTransferDropdownOpen(false), 200)}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
placeholder="Начните вводить имя..."
|
|||
|
|
/>
|
|||
|
|
{transferDropdownOpen && (
|
|||
|
|
<div
|
|||
|
|
className="absolute z-10 mt-1 w-full bg-white border border-slate-300 rounded-lg shadow-lg max-h-40 overflow-y-auto"
|
|||
|
|
onMouseDown={(e) => e.preventDefault()}
|
|||
|
|
>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onMouseDown={(e) => e.preventDefault()}
|
|||
|
|
onClick={async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await authFetch(`/api/office/equipment/${selectedEquipment.id}/transfer`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ assignedTo: '' })
|
|||
|
|
});
|
|||
|
|
if (res.ok) {
|
|||
|
|
const updated = await res.json();
|
|||
|
|
setFormData((f) => ({ ...f, assignedTo: updated.assigned_to ?? '' }));
|
|||
|
|
setSelectedEquipment((e) => e ? { ...e, assignedTo: updated.assigned_to ?? '' } : null);
|
|||
|
|
fetchEquipment();
|
|||
|
|
fetchEquipmentHistory(selectedEquipment.id);
|
|||
|
|
setShowTransferModal(false);
|
|||
|
|
setTransferToFilter('');
|
|||
|
|
} else {
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
alert(data?.error || `Ошибка перемещения (${res.status})`);
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
alert('Ошибка перемещения');
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
className="w-full px-3 py-2 text-left text-sm text-slate-500 hover:bg-slate-100"
|
|||
|
|
>
|
|||
|
|
— Свободен (снять с сотрудника) —
|
|||
|
|
</button>
|
|||
|
|
{employees
|
|||
|
|
.filter((emp) =>
|
|||
|
|
emp.name.toLowerCase().includes(transferToFilter.toLowerCase()) ||
|
|||
|
|
(emp.position && emp.position.toLowerCase().includes(transferToFilter.toLowerCase()))
|
|||
|
|
)
|
|||
|
|
.map((emp) => (
|
|||
|
|
<button
|
|||
|
|
key={emp.id}
|
|||
|
|
type="button"
|
|||
|
|
onMouseDown={(e) => e.preventDefault()}
|
|||
|
|
onClick={async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await authFetch(`/api/office/equipment/${selectedEquipment.id}/transfer`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ assignedTo: emp.name })
|
|||
|
|
});
|
|||
|
|
if (res.ok) {
|
|||
|
|
const updated = await res.json();
|
|||
|
|
setFormData((f) => ({ ...f, assignedTo: updated.assigned_to ?? emp.name }));
|
|||
|
|
setSelectedEquipment((e) => e ? { ...e, assignedTo: updated.assigned_to ?? emp.name } : null);
|
|||
|
|
fetchEquipment();
|
|||
|
|
fetchEquipmentHistory(selectedEquipment.id);
|
|||
|
|
setShowTransferModal(false);
|
|||
|
|
setTransferToFilter('');
|
|||
|
|
} else {
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
alert(data?.error || `Ошибка перемещения (${res.status})`);
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
alert('Ошибка перемещения');
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
className="w-full px-3 py-2 text-left text-sm hover:bg-slate-100"
|
|||
|
|
>
|
|||
|
|
{emp.name}{emp.position ? ` — ${emp.position}` : ''}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Write Off Modal - Unified for Equipment and Inventory */}
|
|||
|
|
{showWriteOffModal && selectedEquipment && (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|||
|
|
<div className="bg-white rounded-2xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h3 className="text-lg font-bold text-slate-800">Списать оборудование</h3>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setShowWriteOffModal(false);
|
|||
|
|
setSelectedEquipment(null);
|
|||
|
|
}}
|
|||
|
|
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
|||
|
|
>
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Оборудование</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={selectedEquipment.name}
|
|||
|
|
disabled
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-slate-50"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-slate-50 p-4 rounded-lg space-y-2">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<span className="text-sm text-slate-600">В имуществе:</span>
|
|||
|
|
<span className="text-sm font-bold text-slate-800">1 шт.</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<span className="text-sm text-slate-600">На складе:</span>
|
|||
|
|
<InventoryCountDisplay equipmentName={selectedEquipment.name} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Причина списания *</label>
|
|||
|
|
<textarea
|
|||
|
|
value={writeOffFormData.reason}
|
|||
|
|
onChange={(e) => setWriteOffFormData({ reason: e.target.value })}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
|||
|
|
rows={3}
|
|||
|
|
placeholder="Укажите причину списания (порча, поломка, истечение срока годности, и т.д.)"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-xs text-amber-800">
|
|||
|
|
<p className="font-bold mb-1">⚠️ Внимание:</p>
|
|||
|
|
<p>При списании оборудование будет удалено из имущества и со склада одновременно.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex gap-3 pt-4">
|
|||
|
|
<button
|
|||
|
|
onClick={async () => {
|
|||
|
|
if (!writeOffFormData.reason || !writeOffFormData.reason.trim()) {
|
|||
|
|
alert('Укажите причину списания');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const writeOffNote = `Списано. Причина: ${writeOffFormData.reason}. Дата: ${new Date().toLocaleDateString('ru-RU')}`;
|
|||
|
|
const today = new Date().toISOString().slice(0, 10);
|
|||
|
|
|
|||
|
|
await authFetch(`/api/office/equipment/${selectedEquipment.id}/history`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
event_type: 'write_off',
|
|||
|
|
event_date: today,
|
|||
|
|
reason: writeOffFormData.reason.trim()
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const existingEqNotes = selectedEquipment.notes || '';
|
|||
|
|
const updatedEqNotes = existingEqNotes ? `${existingEqNotes}\n${writeOffNote}` : writeOffNote;
|
|||
|
|
|
|||
|
|
await authFetch(`/api/office/equipment/${selectedEquipment.id}`, {
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
condition: 'poor',
|
|||
|
|
notes: updatedEqNotes
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Ищем и списываем со склада
|
|||
|
|
try {
|
|||
|
|
const inventoryResponse = await authFetch('/api/office/inventory');
|
|||
|
|
if (inventoryResponse.ok) {
|
|||
|
|
const inventoryData = await inventoryResponse.json();
|
|||
|
|
const matchingInventory = inventoryData.find((item: any) =>
|
|||
|
|
(item.name || '').toLowerCase() === (selectedEquipment.name || '').toLowerCase()
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (matchingInventory) {
|
|||
|
|
const newQuantity = Math.max(0, (parseFloat(matchingInventory.quantity) || 0) - 1);
|
|||
|
|
const existingInvNotes = matchingInventory.notes || '';
|
|||
|
|
const updatedInvNotes = existingInvNotes ? `${existingInvNotes}\n${writeOffNote}` : writeOffNote;
|
|||
|
|
|
|||
|
|
await authFetch(`/api/office/inventory/${matchingInventory.id}`, {
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
quantity: newQuantity,
|
|||
|
|
notes: updatedInvNotes
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (invError) {
|
|||
|
|
console.error('Ошибка обновления склада:', invError);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fetchEquipment();
|
|||
|
|
setShowWriteOffModal(false);
|
|||
|
|
setSelectedEquipment(null);
|
|||
|
|
alert('Оборудование списано из имущества и со склада');
|
|||
|
|
} catch (error: any) {
|
|||
|
|
console.error('Ошибка списания:', error);
|
|||
|
|
alert(`Ошибка: ${error.message || 'Неизвестная ошибка'}`);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
disabled={!writeOffFormData.reason || !writeOffFormData.reason.trim()}
|
|||
|
|
className="flex-1 bg-red-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-red-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|||
|
|
>
|
|||
|
|
<Trash2 className="w-4 h-4" />
|
|||
|
|
Списать
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setShowWriteOffModal(false);
|
|||
|
|
setSelectedEquipment(null);
|
|||
|
|
}}
|
|||
|
|
className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-colors"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|