833 lines
31 KiB
TypeScript
833 lines
31 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { getAllOrganizations, verifySiret, approveSiret, rejectSiret } from '@/lib/api/admin';
|
|
import { createOrganization, updateOrganization } from '@/lib/api/organizations';
|
|
import { PageHeader } from '@/components/ui/PageHeader';
|
|
|
|
interface Organization {
|
|
id: string;
|
|
name: string;
|
|
type: string;
|
|
scac?: string;
|
|
siren?: string;
|
|
siret?: string;
|
|
siretVerified?: boolean;
|
|
statusBadge?: string;
|
|
eori?: string;
|
|
contact_phone?: string;
|
|
contact_email?: string;
|
|
address: {
|
|
street: string;
|
|
city: string;
|
|
state?: string;
|
|
postalCode: string;
|
|
country: string;
|
|
};
|
|
logoUrl?: string;
|
|
isActive: boolean;
|
|
createdAt: string;
|
|
}
|
|
|
|
interface FormData {
|
|
name: string;
|
|
type: string;
|
|
scac: string;
|
|
siren: string;
|
|
siret: string;
|
|
eori: string;
|
|
contact_phone: string;
|
|
contact_email: string;
|
|
address: {
|
|
street: string;
|
|
city: string;
|
|
state: string;
|
|
postalCode: string;
|
|
country: string;
|
|
};
|
|
logoUrl: string;
|
|
isActive: boolean;
|
|
}
|
|
|
|
const EMPTY_FORM: FormData = {
|
|
name: '',
|
|
type: 'FREIGHT_FORWARDER',
|
|
scac: '',
|
|
siren: '',
|
|
siret: '',
|
|
eori: '',
|
|
contact_phone: '',
|
|
contact_email: '',
|
|
address: { street: '', city: '', state: '', postalCode: '', country: 'FR' },
|
|
logoUrl: '',
|
|
isActive: true,
|
|
};
|
|
|
|
function FieldHint({ children }: { children: React.ReactNode }) {
|
|
return <p className="mt-1 text-xs text-gray-400">{children}</p>;
|
|
}
|
|
|
|
function FieldError({ message }: { message?: string }) {
|
|
if (!message) return null;
|
|
return <p className="mt-1 text-xs text-red-600">{message}</p>;
|
|
}
|
|
|
|
export default function AdminOrganizationsPage() {
|
|
const t = useTranslations('dashboard.admin.organizations');
|
|
|
|
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
|
|
const [showCreateModal, setShowCreateModal] = useState(false);
|
|
const [showEditModal, setShowEditModal] = useState(false);
|
|
const [verifyingId, setVerifyingId] = useState<string | null>(null);
|
|
const [formData, setFormData] = useState<FormData>(EMPTY_FORM);
|
|
const [formError, setFormError] = useState<string | null>(null);
|
|
const [fieldErrors, setFieldErrors] = useState<Partial<Record<string, string>>>({});
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetchOrganizations();
|
|
}, []);
|
|
|
|
const fetchOrganizations = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await getAllOrganizations();
|
|
setOrganizations(response.organizations || []);
|
|
setError(null);
|
|
} catch (err: any) {
|
|
setError(err.message || t('loadError'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const validateForm = (isCreate: boolean): boolean => {
|
|
const errors: Partial<Record<string, string>> = {};
|
|
|
|
if (!formData.name.trim() || formData.name.trim().length < 2) {
|
|
errors.name = t('validation.nameTooShort');
|
|
}
|
|
|
|
if (isCreate && formData.type === 'CARRIER') {
|
|
if (!formData.scac) {
|
|
errors.scac = t('validation.scacRequired');
|
|
} else if (!/^[A-Z]{4}$/.test(formData.scac)) {
|
|
errors.scac = t('validation.scacFormat');
|
|
}
|
|
}
|
|
|
|
if (formData.siren && !/^[0-9]{9}$/.test(formData.siren)) {
|
|
errors.siren = t('validation.sirenFormat');
|
|
}
|
|
|
|
if (formData.siret && !/^[0-9]{14}$/.test(formData.siret)) {
|
|
errors.siret = t('validation.siretFormat');
|
|
}
|
|
|
|
if (!formData.address.street.trim()) errors.street = t('validation.required');
|
|
if (!formData.address.city.trim()) errors.city = t('validation.required');
|
|
if (!formData.address.postalCode.trim()) errors.postalCode = t('validation.required');
|
|
if (!/^[A-Z]{2}$/.test(formData.address.country)) {
|
|
errors.country = t('validation.countryFormat');
|
|
}
|
|
|
|
setFieldErrors(errors);
|
|
return Object.keys(errors).length === 0;
|
|
};
|
|
|
|
const buildApiAddress = () => ({
|
|
street: formData.address.street,
|
|
city: formData.address.city,
|
|
postalCode: formData.address.postalCode,
|
|
country: formData.address.country,
|
|
...(formData.address.state ? { state: formData.address.state } : {}),
|
|
});
|
|
|
|
const handleCreate = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setFormError(null);
|
|
if (!validateForm(true)) return;
|
|
|
|
setSubmitting(true);
|
|
try {
|
|
await createOrganization({
|
|
name: formData.name.trim(),
|
|
type: formData.type as any,
|
|
address: buildApiAddress(),
|
|
contact_email: formData.contact_email || undefined,
|
|
contact_phone: formData.contact_phone || undefined,
|
|
logoUrl: formData.logoUrl || undefined,
|
|
...(formData.siren ? { siren: formData.siren } : {}),
|
|
...(formData.siret ? { siret: formData.siret } : {}),
|
|
...(formData.eori ? { eori: formData.eori } : {}),
|
|
...(formData.scac ? { scac: formData.scac } : {}),
|
|
});
|
|
await fetchOrganizations();
|
|
setShowCreateModal(false);
|
|
resetForm();
|
|
} catch (err: any) {
|
|
setFormError(err.message || t('createError'));
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleUpdate = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!selectedOrg) return;
|
|
setFormError(null);
|
|
if (!validateForm(false)) return;
|
|
|
|
setSubmitting(true);
|
|
try {
|
|
await updateOrganization(selectedOrg.id, {
|
|
name: formData.name.trim(),
|
|
address: buildApiAddress(),
|
|
contact_email: formData.contact_email || undefined,
|
|
contact_phone: formData.contact_phone || undefined,
|
|
logoUrl: formData.logoUrl || undefined,
|
|
isActive: formData.isActive,
|
|
...(formData.siren ? { siren: formData.siren } : {}),
|
|
...(formData.siret ? { siret: formData.siret } : {}),
|
|
...(formData.eori ? { eori: formData.eori } : {}),
|
|
});
|
|
await fetchOrganizations();
|
|
setShowEditModal(false);
|
|
setSelectedOrg(null);
|
|
resetForm();
|
|
} catch (err: any) {
|
|
setFormError(err.message || t('updateError'));
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setFormData(EMPTY_FORM);
|
|
setFormError(null);
|
|
setFieldErrors({});
|
|
};
|
|
|
|
const handleTypeChange = (newType: string) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
type: newType,
|
|
scac: newType !== 'CARRIER' ? '' : prev.scac,
|
|
}));
|
|
setFieldErrors(prev => ({ ...prev, scac: undefined }));
|
|
};
|
|
|
|
const handleVerifySiret = async (orgId: string) => {
|
|
try {
|
|
setVerifyingId(orgId);
|
|
const result = await verifySiret(orgId);
|
|
if (result.verified) {
|
|
alert(
|
|
t('siretVerified', {
|
|
companyName: result.companyName || 'N/A',
|
|
address: result.address || 'N/A',
|
|
})
|
|
);
|
|
await fetchOrganizations();
|
|
} else {
|
|
alert(result.message || t('siretInvalid'));
|
|
}
|
|
} catch (err: any) {
|
|
alert(err.message || t('siretError'));
|
|
} finally {
|
|
setVerifyingId(null);
|
|
}
|
|
};
|
|
|
|
const handleApproveSiret = async (orgId: string) => {
|
|
if (!confirm(t('confirmApprove'))) return;
|
|
try {
|
|
setVerifyingId(orgId);
|
|
const result = await approveSiret(orgId);
|
|
alert(result.message);
|
|
await fetchOrganizations();
|
|
} catch (err: any) {
|
|
alert(err.message || t('siretApproveError'));
|
|
} finally {
|
|
setVerifyingId(null);
|
|
}
|
|
};
|
|
|
|
const handleRejectSiret = async (orgId: string) => {
|
|
if (!confirm(t('confirmReject'))) return;
|
|
try {
|
|
setVerifyingId(orgId);
|
|
const result = await rejectSiret(orgId);
|
|
alert(result.message);
|
|
await fetchOrganizations();
|
|
} catch (err: any) {
|
|
alert(err.message || t('siretRejectError'));
|
|
} finally {
|
|
setVerifyingId(null);
|
|
}
|
|
};
|
|
|
|
const openEditModal = (org: Organization) => {
|
|
setSelectedOrg(org);
|
|
setFormData({
|
|
name: org.name,
|
|
type: org.type,
|
|
scac: org.scac || '',
|
|
siren: org.siren || '',
|
|
siret: org.siret || '',
|
|
eori: org.eori || '',
|
|
contact_phone: org.contact_phone || '',
|
|
contact_email: org.contact_email || '',
|
|
address: {
|
|
street: org.address.street,
|
|
city: org.address.city,
|
|
state: org.address.state || '',
|
|
postalCode: org.address.postalCode,
|
|
country: org.address.country,
|
|
},
|
|
logoUrl: org.logoUrl || '',
|
|
isActive: org.isActive,
|
|
});
|
|
setFormError(null);
|
|
setFieldErrors({});
|
|
setShowEditModal(true);
|
|
};
|
|
|
|
const closeModal = () => {
|
|
setShowCreateModal(false);
|
|
setShowEditModal(false);
|
|
setSelectedOrg(null);
|
|
resetForm();
|
|
};
|
|
|
|
const getTypeLabel = (type: string) => {
|
|
const allowed = ['FREIGHT_FORWARDER', 'CARRIER', 'SHIPPER'];
|
|
if (allowed.includes(type)) return t(`types.${type}` as any);
|
|
return type.replace('_', ' ');
|
|
};
|
|
|
|
const inputClass = (hasError?: string) =>
|
|
`mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none text-sm ${
|
|
hasError
|
|
? 'border-red-400 focus:border-red-500 focus:ring-red-500'
|
|
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
|
|
}`;
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-96">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
|
|
<p className="mt-4 text-gray-600">{t('loading')}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
title={t('title')}
|
|
description={t('subtitle')}
|
|
actions={
|
|
<button
|
|
onClick={() => setShowCreateModal(true)}
|
|
className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
{t('create')}
|
|
</button>
|
|
}
|
|
/>
|
|
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Organizations Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{organizations.map(org => (
|
|
<div key={org.id} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-semibold text-gray-900">{org.name}</h3>
|
|
<span
|
|
className={`inline-block mt-2 px-2 py-1 text-xs font-semibold rounded-full ${
|
|
org.type === 'FREIGHT_FORWARDER'
|
|
? 'bg-blue-100 text-blue-800'
|
|
: org.type === 'CARRIER'
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-purple-100 text-purple-800'
|
|
}`}
|
|
>
|
|
{getTypeLabel(org.type)}
|
|
</span>
|
|
</div>
|
|
<span
|
|
className={`px-2 py-1 text-xs font-semibold rounded-full ${
|
|
org.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
|
}`}
|
|
>
|
|
{org.isActive ? t('active') : t('inactive')}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-2 text-sm text-gray-600 mb-4">
|
|
{org.scac && (
|
|
<div>
|
|
<span className="font-medium">{t('scac')}:</span> {org.scac}
|
|
</div>
|
|
)}
|
|
{org.siren && (
|
|
<div>
|
|
<span className="font-medium">{t('siren')}:</span> {org.siren}
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium">{t('siret')}:</span>
|
|
{org.siret ? (
|
|
<>
|
|
<span>{org.siret}</span>
|
|
{org.siretVerified ? (
|
|
<span className="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800">
|
|
{t('verified')}
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
|
|
{t('notVerified')}
|
|
</span>
|
|
)}
|
|
</>
|
|
) : (
|
|
<span className="text-gray-400">{t('notProvided')}</span>
|
|
)}
|
|
</div>
|
|
{org.contact_email && (
|
|
<div>
|
|
<span className="font-medium">{t('email')}:</span> {org.contact_email}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<span className="font-medium">{t('location')}:</span> {org.address.city},{' '}
|
|
{org.address.country}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex space-x-2">
|
|
<button
|
|
onClick={() => openEditModal(org)}
|
|
className="flex-1 px-3 py-2 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 transition-colors text-sm font-medium"
|
|
>
|
|
{t('edit')}
|
|
</button>
|
|
{org.siret && !org.siretVerified && (
|
|
<button
|
|
onClick={() => handleVerifySiret(org.id)}
|
|
disabled={verifyingId === org.id}
|
|
className="flex-1 px-3 py-2 bg-purple-50 text-purple-700 rounded-md hover:bg-purple-100 transition-colors text-sm font-medium disabled:opacity-50"
|
|
>
|
|
{verifyingId === org.id ? t('verifying') : t('verifyApi')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
{(org.siret || org.siren) && (
|
|
<div className="flex space-x-2">
|
|
{!org.siretVerified ? (
|
|
<button
|
|
onClick={() => handleApproveSiret(org.id)}
|
|
disabled={verifyingId === org.id}
|
|
className="flex-1 px-3 py-2 bg-green-50 text-green-700 rounded-md hover:bg-green-100 transition-colors text-sm font-medium disabled:opacity-50"
|
|
>
|
|
{t('approveSiret')}
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={() => handleRejectSiret(org.id)}
|
|
disabled={verifyingId === org.id}
|
|
className="flex-1 px-3 py-2 bg-red-50 text-red-700 rounded-md hover:bg-red-100 transition-colors text-sm font-medium disabled:opacity-50"
|
|
>
|
|
{t('rejectSiret')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Create / Edit Modal */}
|
|
{(showCreateModal || showEditModal) && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto py-4">
|
|
<div className="bg-white rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
|
|
<h2 className="text-xl font-bold mb-6">
|
|
{showCreateModal ? t('modal.createTitle') : t('modal.editTitle')}
|
|
</h2>
|
|
|
|
<form
|
|
onSubmit={showCreateModal ? handleCreate : handleUpdate}
|
|
noValidate
|
|
className="space-y-5"
|
|
>
|
|
{/* ── Informations générales ── */}
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
|
|
{t('modal.sectionGeneral')}
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.name')} <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={e => {
|
|
setFormData({ ...formData, name: e.target.value });
|
|
setFieldErrors(prev => ({ ...prev, name: undefined }));
|
|
}}
|
|
minLength={2}
|
|
maxLength={200}
|
|
className={inputClass(fieldErrors.name)}
|
|
placeholder="Acme Freight Forwarding"
|
|
/>
|
|
<FieldError message={fieldErrors.name} />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.type')} <span className="text-red-500">*</span>
|
|
</label>
|
|
{showCreateModal ? (
|
|
<select
|
|
value={formData.type}
|
|
onChange={e => handleTypeChange(e.target.value)}
|
|
className={inputClass()}
|
|
>
|
|
<option value="FREIGHT_FORWARDER">{t('types.FREIGHT_FORWARDER')}</option>
|
|
<option value="CARRIER">{t('types.CARRIER')}</option>
|
|
<option value="SHIPPER">{t('types.SHIPPER')}</option>
|
|
</select>
|
|
) : (
|
|
<div className="mt-1 flex items-center gap-2">
|
|
<span
|
|
className={`px-2 py-1 text-xs font-semibold rounded-full ${
|
|
formData.type === 'FREIGHT_FORWARDER'
|
|
? 'bg-blue-100 text-blue-800'
|
|
: formData.type === 'CARRIER'
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-purple-100 text-purple-800'
|
|
}`}
|
|
>
|
|
{getTypeLabel(formData.type)}
|
|
</span>
|
|
<span className="text-xs text-gray-400">{t('modal.typeReadOnly')}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* SCAC — création uniquement, visible en lecture seule en édition si CARRIER */}
|
|
{showCreateModal && formData.type === 'CARRIER' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.scacLabel')} <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.scac}
|
|
onChange={e => {
|
|
const v = e.target.value.toUpperCase().replace(/[^A-Z]/g, '');
|
|
setFormData({ ...formData, scac: v });
|
|
setFieldErrors(prev => ({ ...prev, scac: undefined }));
|
|
}}
|
|
maxLength={4}
|
|
minLength={4}
|
|
className={inputClass(fieldErrors.scac)}
|
|
placeholder="MAEU"
|
|
/>
|
|
<FieldHint>{t('modal.scacHint')}</FieldHint>
|
|
<FieldError message={fieldErrors.scac} />
|
|
</div>
|
|
)}
|
|
{showEditModal && formData.type === 'CARRIER' && formData.scac && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.scacLabel')}
|
|
</label>
|
|
<div className="mt-1 px-3 py-2 bg-gray-50 border border-gray-200 rounded-md text-sm text-gray-700 font-mono">
|
|
{formData.scac}
|
|
</div>
|
|
<FieldHint>{t('modal.typeReadOnly')}</FieldHint>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Identifiants légaux ── */}
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
|
|
{t('modal.sectionLegal')}
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.sirenLabel')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.siren}
|
|
onChange={e => {
|
|
const v = e.target.value.replace(/\D/g, '').slice(0, 9);
|
|
setFormData({ ...formData, siren: v });
|
|
setFieldErrors(prev => ({ ...prev, siren: undefined }));
|
|
}}
|
|
maxLength={9}
|
|
className={inputClass(fieldErrors.siren)}
|
|
placeholder="123456789"
|
|
/>
|
|
<FieldHint>{t('modal.sirenHint')}</FieldHint>
|
|
<FieldError message={fieldErrors.siren} />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.siretLabel')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.siret}
|
|
onChange={e => {
|
|
const v = e.target.value.replace(/\D/g, '').slice(0, 14);
|
|
setFormData({ ...formData, siret: v });
|
|
setFieldErrors(prev => ({ ...prev, siret: undefined }));
|
|
}}
|
|
maxLength={14}
|
|
className={inputClass(fieldErrors.siret)}
|
|
placeholder="12345678901234"
|
|
/>
|
|
<FieldHint>{t('modal.siretHint')}</FieldHint>
|
|
<FieldError message={fieldErrors.siret} />
|
|
</div>
|
|
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.eoriLabel')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.eori}
|
|
onChange={e => setFormData({ ...formData, eori: e.target.value })}
|
|
className={inputClass()}
|
|
placeholder="FR123456789"
|
|
/>
|
|
<FieldHint>{t('modal.eoriHint')}</FieldHint>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Contact ── */}
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
|
|
{t('modal.sectionContact')}
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.contactEmail')}
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={formData.contact_email}
|
|
onChange={e => setFormData({ ...formData, contact_email: e.target.value })}
|
|
className={inputClass()}
|
|
placeholder="contact@exemple.com"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.contactPhone')}
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
value={formData.contact_phone}
|
|
onChange={e => setFormData({ ...formData, contact_phone: e.target.value })}
|
|
className={inputClass()}
|
|
placeholder="+33 6 00 00 00 00"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Adresse ── */}
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
|
|
{t('modal.sectionAddress')}
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.street')} <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.address.street}
|
|
onChange={e => {
|
|
setFormData({ ...formData, address: { ...formData.address, street: e.target.value } });
|
|
setFieldErrors(prev => ({ ...prev, street: undefined }));
|
|
}}
|
|
className={inputClass(fieldErrors.street)}
|
|
placeholder="123 Rue de la République"
|
|
/>
|
|
<FieldError message={fieldErrors.street} />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.city')} <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.address.city}
|
|
onChange={e => {
|
|
setFormData({ ...formData, address: { ...formData.address, city: e.target.value } });
|
|
setFieldErrors(prev => ({ ...prev, city: undefined }));
|
|
}}
|
|
className={inputClass(fieldErrors.city)}
|
|
placeholder="Paris"
|
|
/>
|
|
<FieldError message={fieldErrors.city} />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.postalCode')} <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.address.postalCode}
|
|
onChange={e => {
|
|
setFormData({ ...formData, address: { ...formData.address, postalCode: e.target.value } });
|
|
setFieldErrors(prev => ({ ...prev, postalCode: undefined }));
|
|
}}
|
|
className={inputClass(fieldErrors.postalCode)}
|
|
placeholder="75001"
|
|
/>
|
|
<FieldError message={fieldErrors.postalCode} />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.state')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.address.state}
|
|
onChange={e =>
|
|
setFormData({ ...formData, address: { ...formData.address, state: e.target.value } })
|
|
}
|
|
className={inputClass()}
|
|
placeholder="Île-de-France"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.country')} <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.address.country}
|
|
onChange={e => {
|
|
const v = e.target.value.toUpperCase().replace(/[^A-Z]/g, '').slice(0, 2);
|
|
setFormData({ ...formData, address: { ...formData.address, country: v } });
|
|
setFieldErrors(prev => ({ ...prev, country: undefined }));
|
|
}}
|
|
maxLength={2}
|
|
minLength={2}
|
|
className={inputClass(fieldErrors.country)}
|
|
placeholder="FR"
|
|
/>
|
|
<FieldHint>{t('modal.countryHint')}</FieldHint>
|
|
<FieldError message={fieldErrors.country} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Autres ── */}
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
|
|
{t('modal.sectionOther')}
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{t('modal.logoUrl')}
|
|
</label>
|
|
<input
|
|
type="url"
|
|
value={formData.logoUrl}
|
|
onChange={e => setFormData({ ...formData, logoUrl: e.target.value })}
|
|
className={inputClass()}
|
|
placeholder="https://exemple.com/logo.png"
|
|
/>
|
|
</div>
|
|
|
|
{showEditModal && (
|
|
<div className="flex items-center gap-3">
|
|
<input
|
|
id="isActive"
|
|
type="checkbox"
|
|
checked={formData.isActive}
|
|
onChange={e => setFormData({ ...formData, isActive: e.target.checked })}
|
|
className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|
/>
|
|
<label htmlFor="isActive" className="text-sm font-medium text-gray-700">
|
|
{t('modal.isActive')}
|
|
</label>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Erreur globale */}
|
|
{formError && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm">
|
|
{formError}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end space-x-3 pt-2 border-t border-gray-100">
|
|
<button
|
|
type="button"
|
|
onClick={closeModal}
|
|
className="px-4 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50 transition-colors"
|
|
>
|
|
{t('modal.cancel')}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={submitting}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
{submitting
|
|
? t('modal.saving')
|
|
: showCreateModal
|
|
? t('modal.create')
|
|
: t('modal.update')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|