241 lines
8.7 KiB
TypeScript
241 lines
8.7 KiB
TypeScript
|
import React, { useEffect, useState } from 'react';
|
|||
|
|
import { apiClient } from '../../services/apiClient';
|
|||
|
|
import { Building2, Loader2 } from 'lucide-react';
|
|||
|
|
|
|||
|
|
type CompanySettings = {
|
|||
|
|
name: string;
|
|||
|
|
fullName?: string | null;
|
|||
|
|
address?: string | null;
|
|||
|
|
phone?: string | null;
|
|||
|
|
email?: string | null;
|
|||
|
|
website?: string | null;
|
|||
|
|
licenseNumber?: string | null;
|
|||
|
|
licenseValidUntil?: string | null;
|
|||
|
|
logoUrl?: string | null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const emptyCompany: CompanySettings = {
|
|||
|
|
name: '',
|
|||
|
|
fullName: '',
|
|||
|
|
address: '',
|
|||
|
|
phone: '',
|
|||
|
|
email: '',
|
|||
|
|
website: '',
|
|||
|
|
licenseNumber: '',
|
|||
|
|
licenseValidUntil: '',
|
|||
|
|
logoUrl: '',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export const CompanySection: React.FC = () => {
|
|||
|
|
const [form, setForm] = useState<CompanySettings>(emptyCompany);
|
|||
|
|
const [isLoading, setIsLoading] = useState(true);
|
|||
|
|
const [isSaving, setIsSaving] = useState(false);
|
|||
|
|
|
|||
|
|
const load = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoading(true);
|
|||
|
|
const data = await apiClient.get<any>('/settings/company');
|
|||
|
|
setForm({
|
|||
|
|
name: data.name || '',
|
|||
|
|
fullName: data.fullName ?? '',
|
|||
|
|
address: data.address ?? '',
|
|||
|
|
phone: data.phone ?? '',
|
|||
|
|
email: data.email ?? '',
|
|||
|
|
website: data.website ?? '',
|
|||
|
|
licenseNumber: data.licenseNumber ?? '',
|
|||
|
|
licenseValidUntil: data.licenseValidUntil
|
|||
|
|
? String(data.licenseValidUntil).substring(0, 10)
|
|||
|
|
: '',
|
|||
|
|
logoUrl: data.logoUrl ?? '',
|
|||
|
|
});
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading company settings:', err);
|
|||
|
|
} finally {
|
|||
|
|
setIsLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
load();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const handleChange = (field: keyof CompanySettings, value: string) => {
|
|||
|
|
setForm((prev) => ({ ...prev, [field]: value }));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSave = async () => {
|
|||
|
|
if (!form.name) return;
|
|||
|
|
try {
|
|||
|
|
setIsSaving(true);
|
|||
|
|
await apiClient.put('/settings/company', {
|
|||
|
|
name: form.name,
|
|||
|
|
fullName: form.fullName || null,
|
|||
|
|
address: form.address || null,
|
|||
|
|
phone: form.phone || null,
|
|||
|
|
email: form.email || null,
|
|||
|
|
website: form.website || null,
|
|||
|
|
licenseNumber: form.licenseNumber || null,
|
|||
|
|
licenseValidUntil: form.licenseValidUntil || null,
|
|||
|
|
logoUrl: form.logoUrl || null,
|
|||
|
|
});
|
|||
|
|
alert('Данные управляющей компании сохранены');
|
|||
|
|
} catch (err: any) {
|
|||
|
|
console.error('Error saving company settings:', err);
|
|||
|
|
alert(`Не удалось сохранить: ${err?.message || 'Неизвестная ошибка'}`);
|
|||
|
|
} finally {
|
|||
|
|
setIsSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (isLoading) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center justify-center py-12">
|
|||
|
|
<Loader2 className="w-8 h-8 animate-spin text-primary-600" />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div className="flex items-center gap-3 mb-6">
|
|||
|
|
<div className="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center">
|
|||
|
|
<Building2 className="w-5 h-5 text-primary-600" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-lg font-bold text-slate-800">Управляющая компания</h3>
|
|||
|
|
<p className="text-xs text-slate-500">
|
|||
|
|
Эти данные сохраняются в базе и подставляются в отчеты жителям и PR-отчеты
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-4 max-w-2xl">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-500 uppercase mb-1">
|
|||
|
|
Краткое наименование
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={form.name}
|
|||
|
|
onChange={(e) => handleChange('name', e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm"
|
|||
|
|
placeholder='Например: УК "Дружба"'
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-500 uppercase mb-1">
|
|||
|
|
Полное наименование
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={form.fullName || ''}
|
|||
|
|
onChange={(e) => handleChange('fullName', e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm"
|
|||
|
|
placeholder='Например: ООО "Управляющая компания Дружба"'
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="md:col-span-2">
|
|||
|
|
<label className="block text-xs font-black text-slate-500 uppercase mb-1">
|
|||
|
|
Адрес
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={form.address || ''}
|
|||
|
|
onChange={(e) => handleChange('address', e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm"
|
|||
|
|
placeholder="Юридический / фактический адрес"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-500 uppercase mb-1">
|
|||
|
|
Телефон
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={form.phone || ''}
|
|||
|
|
onChange={(e) => handleChange('phone', e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm"
|
|||
|
|
placeholder="+7 (___) ___-__-__"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-500 uppercase mb-1">
|
|||
|
|
Email
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="email"
|
|||
|
|
value={form.email || ''}
|
|||
|
|
onChange={(e) => handleChange('email', e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm"
|
|||
|
|
placeholder="info@company.ru"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-500 uppercase mb-1">
|
|||
|
|
Сайт
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={form.website || ''}
|
|||
|
|
onChange={(e) => handleChange('website', e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm"
|
|||
|
|
placeholder="https://..."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-500 uppercase mb-1">
|
|||
|
|
Номер лицензии
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={form.licenseNumber || ''}
|
|||
|
|
onChange={(e) => handleChange('licenseNumber', e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm"
|
|||
|
|
placeholder="Лицензия №..."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-500 uppercase mb-1">
|
|||
|
|
Лицензия действительна до
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={form.licenseValidUntil || ''}
|
|||
|
|
onChange={(e) => handleChange('licenseValidUntil', e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-500 uppercase mb-1">
|
|||
|
|
Логотип (URL)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={form.logoUrl || ''}
|
|||
|
|
onChange={(e) => handleChange('logoUrl', e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm"
|
|||
|
|
placeholder="https://.../logo.png"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="pt-4">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleSave}
|
|||
|
|
disabled={isSaving || !form.name}
|
|||
|
|
className="px-5 py-2 rounded-xl text-xs font-black uppercase tracking-wider bg-primary-600 text-white hover:bg-primary-700 disabled:opacity-60 disabled:cursor-not-allowed flex items-center gap-2"
|
|||
|
|
>
|
|||
|
|
{isSaving && <Loader2 className="w-4 h-4 animate-spin" />}
|
|||
|
|
{isSaving ? 'Сохранение...' : 'Сохранить реквизиты'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|