Compare commits

..

No commits in common. "37c685d73f0babb72160511b55199d1439a10aa0" and "87bddcfb955abf4ce4bbec73c8294f8c83ffd528" have entirely different histories.

14 changed files with 393 additions and 1208 deletions

View File

@ -12,7 +12,6 @@ import {
UsePipes,
ValidationPipe,
NotFoundException,
BadRequestException,
ParseUUIDPipe,
ParseIntPipe,
DefaultValuePipe,
@ -42,16 +41,10 @@ import {
ORGANIZATION_REPOSITORY,
} from '@domain/ports/out/organization.repository';
import { Organization, OrganizationType } from '@domain/entities/organization.entity';
import {
NotificationType,
NotificationPriority,
} from '@domain/entities/notification.entity';
import { UserRepository, USER_REPOSITORY } from '@domain/ports/out/user.repository';
import { JwtAuthGuard } from '../guards/jwt-auth.guard';
import { RolesGuard } from '../guards/roles.guard';
import { CurrentUser, UserPayload } from '../decorators/current-user.decorator';
import { Roles } from '../decorators/roles.decorator';
import { NotificationService } from '../services/notification.service';
import { v4 as uuidv4 } from 'uuid';
/**
@ -71,9 +64,7 @@ export class OrganizationsController {
private readonly logger = new Logger(OrganizationsController.name);
constructor(
@Inject(ORGANIZATION_REPOSITORY) private readonly organizationRepository: OrganizationRepository,
@Inject(USER_REPOSITORY) private readonly userRepository: UserRepository,
private readonly notificationService: NotificationService
@Inject(ORGANIZATION_REPOSITORY) private readonly organizationRepository: OrganizationRepository
) {}
/**
@ -132,11 +123,6 @@ export class OrganizationsController {
name: dto.name,
type: dto.type,
scac: dto.scac,
siren: dto.siren,
siret: dto.siret,
eori: dto.eori,
contact_phone: dto.contact_phone,
contact_email: dto.contact_email,
address: OrganizationMapper.mapDtoToAddress(dto.address),
logoUrl: dto.logoUrl,
documents: [],
@ -266,10 +252,6 @@ export class OrganizationsController {
organization.updateSiren(dto.siren);
}
if (dto.siret) {
organization.updateSiret(dto.siret);
}
if (dto.eori) {
organization.updateEori(dto.eori);
}
@ -306,72 +288,6 @@ export class OrganizationsController {
return OrganizationMapper.toDto(updatedOrg);
}
/**
* Request SIRET/SIREN approval from admins
*
* Any authenticated user can call this to notify all admins
* that their organization's SIRET/SIREN needs approval.
*/
@Post('request-siret-approval')
@HttpCode(HttpStatus.OK)
@ApiOperation({
summary: 'Request SIRET/SIREN approval',
description: 'Sends a notification to all admins requesting manual SIRET/SIREN verification.',
})
@ApiResponse({ status: 200, description: 'Approval request sent to admins' })
@ApiResponse({ status: 400, description: 'No SIRET/SIREN registered or already verified' })
async requestSiretApproval(
@CurrentUser() user: UserPayload
): Promise<{ message: string }> {
const organization = await this.organizationRepository.findById(user.organizationId);
if (!organization) {
throw new NotFoundException('Organization not found');
}
if (!organization.siren && !organization.siret) {
throw new BadRequestException(
'Aucun SIRET ou SIREN renseigné sur votre organisation. Veuillez les ajouter avant de demander la validation.'
);
}
if (organization.siretVerified) {
throw new BadRequestException('Votre SIRET/SIREN est déjà vérifié.');
}
const admins = await this.userRepository.findByRole('ADMIN');
const identifier = organization.siret
? `SIRET ${organization.siret}`
: `SIREN ${organization.siren}`;
await Promise.all(
admins.map(admin =>
this.notificationService.createNotification({
userId: admin.id,
organizationId: admin.organizationId,
type: NotificationType.ORGANIZATION_UPDATE,
priority: NotificationPriority.HIGH,
title: 'Demande de validation SIRET/SIREN',
message: `L'organisation "${organization.name}" demande la validation de son ${identifier}.`,
metadata: {
organizationId: organization.id,
organizationName: organization.name,
siret: organization.siret,
siren: organization.siren,
requestedBy: user.email,
},
actionUrl: `/dashboard/admin/organizations`,
})
)
);
this.logger.log(
`[${user.email}] SIRET/SIREN approval requested for org ${organization.name} (${organization.id})`
);
return { message: 'Votre demande a été envoyée aux administrateurs.' };
}
/**
* List organizations
*

View File

@ -104,21 +104,16 @@ export class CreateOrganizationDto {
@ApiPropertyOptional({
example: '123456789',
description: 'French SIREN number (9 digits)',
minLength: 9,
maxLength: 9,
})
@IsString()
@IsOptional()
@MinLength(9)
@MaxLength(9)
@Matches(/^[0-9]{9}$/, { message: 'SIREN must be 9 digits' })
siren?: string;
@ApiPropertyOptional({
example: '12345678901234',
description: 'French SIRET number (14 digits)',
})
@IsString()
@IsOptional()
@Matches(/^[0-9]{14}$/, { message: 'SIRET must be 14 digits' })
siret?: string;
@ApiPropertyOptional({
example: 'FR123456789',
description: 'EU EORI number',
@ -179,18 +174,26 @@ export class UpdateOrganizationDto {
@ApiPropertyOptional({
example: '123456789',
description: 'French SIREN number (9 digits)',
minLength: 9,
maxLength: 9,
})
@IsString()
@IsOptional()
@MinLength(9)
@MaxLength(9)
@Matches(/^[0-9]{9}$/, { message: 'SIREN must be 9 digits' })
siren?: string;
@ApiPropertyOptional({
example: '12345678901234',
description: 'French SIRET number (14 digits)',
minLength: 14,
maxLength: 14,
})
@IsString()
@IsOptional()
@MinLength(14)
@MaxLength(14)
@Matches(/^[0-9]{14}$/, { message: 'SIRET must be 14 digits' })
siret?: string;

View File

@ -1,18 +1,15 @@
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { OrganizationsController } from '../controllers/organizations.controller';
import { UsersModule } from '../users/users.module';
import { NotificationsModule } from '../notifications/notifications.module';
// Import domain ports
import { ORGANIZATION_REPOSITORY } from '@domain/ports/out/organization.repository';
import { TypeOrmOrganizationRepository } from '../../infrastructure/persistence/typeorm/repositories/typeorm-organization.repository';
import { OrganizationOrmEntity } from '../../infrastructure/persistence/typeorm/entities/organization.orm-entity';
@Module({
imports: [
TypeOrmModule.forFeature([OrganizationOrmEntity]),
UsersModule,
NotificationsModule,
TypeOrmModule.forFeature([OrganizationOrmEntity]), // 👈 This line registers the repository provider
],
controllers: [OrganizationsController],
providers: [
@ -21,6 +18,8 @@ import { OrganizationOrmEntity } from '../../infrastructure/persistence/typeorm/
useClass: TypeOrmOrganizationRepository,
},
],
exports: [ORGANIZATION_REPOSITORY],
exports: [
ORGANIZATION_REPOSITORY, // optional, if other modules need it
],
})
export class OrganizationsModule {}

View File

@ -989,9 +989,7 @@ export class CsvBookingService {
for (const file of files) {
const documentId = uuidv4();
// Multer decodes originalname as latin1; re-encode to utf8 to preserve accented characters
const fileName = Buffer.from(file.originalname, 'latin1').toString('utf8');
const fileKey = `csv-bookings/${bookingId}/${documentId}-${fileName}`;
const fileKey = `csv-bookings/${bookingId}/${documentId}-${file.originalname}`;
// Upload to S3
const uploadResult = await this.storageAdapter.upload({
@ -1002,12 +1000,12 @@ export class CsvBookingService {
});
// Determine document type from filename or default to OTHER
const documentType = this.inferDocumentType(fileName);
const documentType = this.inferDocumentType(file.originalname);
const document = new CsvBookingDocumentImpl(
documentId,
documentType,
fileName,
file.originalname,
uploadResult.url,
file.mimetype,
file.size,
@ -1066,10 +1064,9 @@ export class CsvBookingService {
throw new NotFoundException(`Booking with ID ${bookingId} not found`);
}
// Allow adding documents to PENDING_PAYMENT, PENDING_BANK_TRANSFER, PENDING, or ACCEPTED bookings
// Allow adding documents to PENDING_PAYMENT, PENDING, or ACCEPTED bookings
if (
booking.status !== CsvBookingStatus.PENDING_PAYMENT &&
booking.status !== CsvBookingStatus.PENDING_BANK_TRANSFER &&
booking.status !== CsvBookingStatus.PENDING &&
booking.status !== CsvBookingStatus.ACCEPTED
) {

View File

@ -30,49 +30,6 @@ interface Organization {
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');
@ -83,10 +40,43 @@ export default function AdminOrganizationsPage() {
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);
// Form state
const [formData, setFormData] = useState<{
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;
}>({
name: '',
type: 'FREIGHT_FORWARDER',
scac: '',
siren: '',
siret: '',
eori: '',
contact_phone: '',
contact_email: '',
address: {
street: '',
city: '',
state: '',
postalCode: '',
country: 'FR',
},
logoUrl: '',
});
useEffect(() => {
fetchOrganizations();
@ -105,120 +95,63 @@ export default function AdminOrganizationsPage() {
}
};
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(),
const apiData = {
name: formData.name,
type: formData.type as any,
address: buildApiAddress(),
address_street: formData.address.street,
address_city: formData.address.city,
address_postal_code: formData.address.postalCode,
address_country: formData.address.country,
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 } : {}),
});
logo_url: formData.logoUrl || undefined,
};
await createOrganization(apiData);
await fetchOrganizations();
setShowCreateModal(false);
resetForm();
} catch (err: any) {
setFormError(err.message || t('createError'));
} finally {
setSubmitting(false);
alert(err.message || t('createError'));
}
};
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 updateOrganization(selectedOrg.id, formData);
await fetchOrganizations();
setShowEditModal(false);
setSelectedOrg(null);
resetForm();
} catch (err: any) {
setFormError(err.message || t('updateError'));
} finally {
setSubmitting(false);
alert(err.message || t('updateError'));
}
};
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 }));
setFormData({
name: '',
type: 'FREIGHT_FORWARDER',
scac: '',
siren: '',
siret: '',
eori: '',
contact_phone: '',
contact_email: '',
address: {
street: '',
city: '',
state: '',
postalCode: '',
country: 'FR',
},
logoUrl: '',
});
};
const handleVerifySiret = async (orgId: string) => {
@ -282,41 +215,20 @@ export default function AdminOrganizationsPage() {
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,
},
address: org.address,
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);
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">
@ -343,6 +255,7 @@ export default function AdminOrganizationsPage() {
}
/>
{/* Error Message */}
{error && (
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
{error}
@ -462,365 +375,247 @@ export default function AdminOrganizationsPage() {
))}
</div>
{/* Create / Edit Modal */}
{/* 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">
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto">
<div className="bg-white rounded-lg p-6 max-w-2xl w-full m-4 max-h-[90vh] overflow-y-auto">
<h2 className="text-xl font-bold mb-4">
{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>
)}
<form onSubmit={showCreateModal ? handleCreate : handleUpdate} className="space-y-4">
<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')}
</label>
<input
type="text"
required
value={formData.name}
onChange={e => setFormData({ ...formData, name: e.target.value })}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</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>
<label className="block text-sm font-medium text-gray-700">
{t('modal.type')}
</label>
<select
value={formData.type}
onChange={e => setFormData({ ...formData, type: e.target.value })}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
>
<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>
</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">
{formData.type === 'CARRIER' && (
<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>
{t('modal.scacLabel')}
</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}
required={formData.type === 'CARRIER'}
maxLength={4}
value={formData.scac}
onChange={e =>
setFormData({ ...formData, address: { ...formData.address, state: e.target.value } })
setFormData({ ...formData, scac: e.target.value.toUpperCase() })
}
className={inputClass()}
placeholder="Île-de-France"
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</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>
<label className="block text-sm font-medium text-gray-700">
{t('modal.sirenLabel')}
</label>
<input
type="text"
maxLength={9}
value={formData.siren}
onChange={e => setFormData({ ...formData, siren: e.target.value })}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</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>
<label className="block text-sm font-medium text-gray-700">
{t('modal.siretLabel')}
</label>
<input
type="text"
maxLength={14}
value={formData.siret}
onChange={e =>
setFormData({ ...formData, siret: e.target.value.replace(/\D/g, '') })
}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
placeholder={t('modal.siretPlaceholder')}
/>
</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>
<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="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</div>
)}
<div className="flex justify-end space-x-3 pt-2 border-t border-gray-100">
<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="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</div>
<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="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</div>
<div className="col-span-2">
<label className="block text-sm font-medium text-gray-700">
{t('modal.street')}
</label>
<input
type="text"
required
value={formData.address.street}
onChange={e =>
setFormData({
...formData,
address: { ...formData.address, street: e.target.value },
})
}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">
{t('modal.city')}
</label>
<input
type="text"
required
value={formData.address.city}
onChange={e =>
setFormData({
...formData,
address: { ...formData.address, city: e.target.value },
})
}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">
{t('modal.postalCode')}
</label>
<input
type="text"
required
value={formData.address.postalCode}
onChange={e =>
setFormData({
...formData,
address: { ...formData.address, postalCode: e.target.value },
})
}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</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="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">
{t('modal.country')}
</label>
<input
type="text"
required
maxLength={2}
value={formData.address.country}
onChange={e =>
setFormData({
...formData,
address: { ...formData.address, country: e.target.value.toUpperCase() },
})
}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</div>
<div className="col-span-2">
<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="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
/>
</div>
</div>
<div className="flex justify-end space-x-2 pt-4">
<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"
onClick={() => {
setShowCreateModal(false);
setShowEditModal(false);
setSelectedOrg(null);
resetForm();
}}
className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
>
{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"
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
>
{submitting
? t('modal.saving')
: showCreateModal
? t('modal.create')
: t('modal.update')}
{showCreateModal ? t('modal.create') : t('modal.update')}
</button>
</div>
</form>

View File

@ -19,12 +19,8 @@ import {
CheckCircle,
Copy,
Clock,
ShieldCheck,
Send,
} from 'lucide-react';
import { getCsvBooking, payBookingCommission, declareBankTransfer } from '@/lib/api/bookings';
import { getOrganization, requestSiretApproval } from '@/lib/api/organizations';
import { useAuth } from '@/lib/context/auth-context';
interface BookingData {
id: string;
@ -46,13 +42,6 @@ interface BookingData {
commissionAmountEur?: number;
}
interface OrgData {
siren?: string | null;
siret?: string | null;
siretVerified?: boolean;
name: string;
}
type PaymentMethod = 'card' | 'transfer' | null;
const BANK_DETAILS = {
@ -65,32 +54,21 @@ export default function PayCommissionPage() {
const router = useRouter();
const params = useParams();
const bookingId = params.id as string;
const { user } = useAuth();
const [booking, setBooking] = useState<BookingData | null>(null);
const [org, setOrg] = useState<OrgData | null>(null);
const [loading, setLoading] = useState(true);
const [paying, setPaying] = useState(false);
const [declaring, setDeclaring] = useState(false);
const [error, setError] = useState<string | null>(null);
const [selectedMethod, setSelectedMethod] = useState<PaymentMethod>(null);
const [copied, setCopied] = useState<string | null>(null);
const [requestingApproval, setRequestingApproval] = useState(false);
const [approvalSent, setApprovalSent] = useState(false);
const [approvalError, setApprovalError] = useState<string | null>(null);
useEffect(() => {
async function fetchData() {
async function fetchBooking() {
try {
const [bookingData, orgData] = await Promise.all([
getCsvBooking(bookingId),
user?.organizationId ? getOrganization(user.organizationId) : Promise.resolve(null),
]);
setBooking(bookingData as any);
if (orgData) setOrg(orgData);
if ((bookingData as any).status !== 'PENDING_PAYMENT') {
const data = await getCsvBooking(bookingId);
setBooking(data as any);
if (data.status !== 'PENDING_PAYMENT') {
router.replace('/dashboard/bookings');
}
} catch (err) {
@ -99,8 +77,8 @@ export default function PayCommissionPage() {
setLoading(false);
}
}
if (bookingId) fetchData();
}, [bookingId, router, user?.organizationId]);
if (bookingId) fetchBooking();
}, [bookingId, router]);
const handlePayByCard = async () => {
setPaying(true);
@ -126,21 +104,6 @@ export default function PayCommissionPage() {
}
};
const handleRequestApproval = async () => {
setRequestingApproval(true);
setApprovalError(null);
try {
await requestSiretApproval();
setApprovalSent(true);
} catch (err) {
setApprovalError(
err instanceof Error ? err.message : 'Erreur lors de l\'envoi de la demande'
);
} finally {
setRequestingApproval(false);
}
};
const copyToClipboard = (value: string, key: string) => {
navigator.clipboard.writeText(value);
setCopied(key);
@ -150,14 +113,6 @@ export default function PayCommissionPage() {
const formatPrice = (price: number, currency: string) =>
new Intl.NumberFormat('fr-FR', { style: 'currency', currency }).format(price);
const hasSiretOrSiren = org && (org.siret || org.siren);
const siretNotVerified = hasSiretOrSiren && !org.siretVerified;
const identifier = org?.siret
? `SIRET ${org.siret}`
: org?.siren
? `SIREN ${org.siren}`
: null;
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50">
@ -209,60 +164,6 @@ export default function PayCommissionPage() {
Finalisez votre booking en réglant la commission de service
</p>
{/* SIRET/SIREN non vérifié — bannière de demande */}
{siretNotVerified && (
<div className="mb-6 bg-amber-50 border border-amber-200 rounded-xl p-5">
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
<ShieldCheck className="h-5 w-5 text-amber-600" />
</div>
<div className="flex-1">
<h3 className="font-semibold text-amber-900 mb-1">
Votre {identifier} n&apos;est pas encore validé
</h3>
<p className="text-sm text-amber-700 mb-4">
Un administrateur doit vérifier votre numéro d&apos;identification avant de
finaliser certaines opérations. Vous pouvez lui envoyer une demande de validation
directement depuis cette page.
</p>
{approvalSent ? (
<div className="flex items-center space-x-2 text-green-700 bg-green-50 border border-green-200 rounded-lg px-4 py-3 text-sm">
<CheckCircle className="h-4 w-4 flex-shrink-0" />
<span>
Demande envoyée aux administrateurs. Vous serez notifié dès que votre{' '}
{identifier} sera validé.
</span>
</div>
) : (
<div className="space-y-2">
{approvalError && (
<p className="text-sm text-red-600">{approvalError}</p>
)}
<button
onClick={handleRequestApproval}
disabled={requestingApproval}
className="inline-flex items-center space-x-2 px-4 py-2.5 bg-amber-600 hover:bg-amber-700 disabled:bg-amber-400 text-white text-sm font-medium rounded-lg transition-colors disabled:cursor-not-allowed"
>
{requestingApproval ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
<span>Envoi en cours...</span>
</>
) : (
<>
<Send className="h-4 w-4" />
<span>Demander la validation à un administrateur</span>
</>
)}
</button>
</div>
)}
</div>
</div>
</div>
)}
{error && (
<div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4 flex items-start space-x-3">
<AlertTriangle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
@ -519,29 +420,6 @@ export default function PayCommissionPage() {
</p>
</div>
{/* Organisation info */}
{org && (
<div className="bg-white rounded-xl border border-gray-200 p-4 space-y-2 text-sm">
<p className="font-medium text-gray-700">{org.name}</p>
{identifier && (
<div className="flex items-center justify-between">
<span className="text-gray-500">{identifier}</span>
{org.siretVerified ? (
<span className="flex items-center space-x-1 text-green-600 text-xs font-medium">
<CheckCircle className="h-3.5 w-3.5" />
<span>Vérifié</span>
</span>
) : (
<span className="flex items-center space-x-1 text-amber-600 text-xs font-medium">
<AlertTriangle className="h-3.5 w-3.5" />
<span>Non vérifié</span>
</span>
)}
</div>
)}
</div>
)}
<div className="bg-white rounded-xl border border-gray-200 p-4 flex items-start space-x-3">
<CheckCircle className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
<p className="text-xs text-gray-500">

View File

@ -6,7 +6,7 @@
'use client';
import { useState, useEffect, useRef, Suspense } from 'react';
import { useState, useEffect, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { ClipboardList, Mail, AlertTriangle } from 'lucide-react';
import type { CsvRateSearchResult } from '@/types/rates';
@ -55,8 +55,6 @@ function NewBookingPageContent() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [termsAccepted, setTermsAccepted] = useState(false);
const [error, setError] = useState<string | null>(null);
const [isDragging, setIsDragging] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const [formData, setFormData] = useState<BookingForm>({
carrierName: '',
@ -421,30 +419,8 @@ function NewBookingPageContent() {
{/* File Upload */}
<div className="space-y-4 mb-8">
<div
className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer ${
isDragging
? 'border-blue-500 bg-blue-50'
: 'border-gray-300 hover:border-blue-400 hover:bg-gray-50'
}`}
onDragOver={e => {
e.preventDefault();
setIsDragging(true);
}}
onDragLeave={e => {
if (!e.currentTarget.contains(e.relatedTarget as Node)) {
setIsDragging(false);
}
}}
onDrop={e => {
e.preventDefault();
setIsDragging(false);
handleFileChange(e.dataTransfer.files);
}}
onClick={() => fileInputRef.current?.click()}
>
<div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 transition-colors">
<input
ref={fileInputRef}
type="file"
id="file-upload"
multiple
@ -452,9 +428,12 @@ function NewBookingPageContent() {
onChange={e => handleFileChange(e.target.files)}
className="hidden"
/>
<div className="flex flex-col items-center">
<label
htmlFor="file-upload"
className="cursor-pointer flex flex-col items-center"
>
<svg
className={`w-16 h-16 mb-4 transition-colors ${isDragging ? 'text-blue-500' : 'text-gray-400'}`}
className="w-16 h-16 text-gray-400 mb-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -467,10 +446,10 @@ function NewBookingPageContent() {
/>
</svg>
<p className="text-lg font-semibold text-gray-700 mb-2">
{isDragging ? 'Déposez vos fichiers ici' : 'Cliquez pour sélectionner des fichiers'}
Cliquez pour sélectionner des fichiers
</p>
<p className="text-sm text-gray-500">ou glissez-déposez vos documents ici</p>
</div>
</label>
</div>
{/* Document Type Suggestions */}

View File

@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { listCsvBookings } from '@/lib/api';
import { Link } from '@/i18n/navigation';
import { Plus, Clock, Eye, X, CreditCard } from 'lucide-react';
import { Plus, Clock } from 'lucide-react';
import ExportButton from '@/components/ExportButton';
import { useSearchParams } from 'next/navigation';
import { PageHeader } from '@/components/ui/PageHeader';
@ -22,7 +22,6 @@ export default function BookingsListPage() {
const [statusFilter, setStatusFilter] = useState('');
const [page, setPage] = useState(1);
const [showTransferBanner, setShowTransferBanner] = useState(false);
const [selectedBooking, setSelectedBooking] = useState<any | null>(null);
const ITEMS_PER_PAGE = 20;
useEffect(() => {
@ -342,32 +341,12 @@ export default function BookingsListPage() {
</div>
</div>
</div>
<div className="flex items-center justify-between">
<div className="text-xs text-gray-400">
{booking.type === 'csv'
? t('mobile.ref', {
id: booking.bookingId || booking.id.slice(0, 8).toUpperCase(),
})
: t('mobile.booking', { number: booking.bookingNumber || '-' })}
</div>
<div className="flex items-center gap-2">
{booking.status === 'PENDING_PAYMENT' && (
<Link
href={`/dashboard/booking/${booking.id}/pay`}
className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-white bg-orange-500 hover:bg-orange-600 rounded-lg transition-colors"
>
<CreditCard className="h-3.5 w-3.5" />
{t('actions.pay')}
</Link>
)}
<button
onClick={() => setSelectedBooking(booking)}
className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors"
>
<Eye className="h-3.5 w-3.5" />
{t('actions.view')}
</button>
</div>
<div className="text-xs text-gray-400">
{booking.type === 'csv'
? t('mobile.ref', {
id: booking.bookingId || booking.id.slice(0, 8).toUpperCase(),
})
: t('mobile.booking', { number: booking.bookingNumber || '-' })}
</div>
</div>
))}
@ -398,9 +377,6 @@ export default function BookingsListPage() {
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
{t('columns.bookingNumber')}
</th>
<th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
{t('columns.actions')}
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
@ -475,26 +451,6 @@ export default function BookingsListPage() {
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium text-brand-navy">
{booking.bookingNumber || '-'}
</td>
<td className="px-6 py-4 whitespace-nowrap text-center">
<div className="flex items-center justify-center gap-2">
{booking.status === 'PENDING_PAYMENT' && (
<Link
href={`/dashboard/booking/${booking.id}/pay`}
className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-white bg-orange-500 hover:bg-orange-600 rounded-lg transition-colors"
>
<CreditCard className="h-3.5 w-3.5" />
{t('actions.pay')}
</Link>
)}
<button
onClick={() => setSelectedBooking(booking)}
className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors"
>
<Eye className="h-3.5 w-3.5" />
{t('actions.view')}
</button>
</div>
</td>
</tr>
))}
</tbody>
@ -645,128 +601,6 @@ export default function BookingsListPage() {
</div>
)}
</div>
{/* Booking Detail Modal */}
{selectedBooking && (
<div className="fixed inset-0 z-50 overflow-y-auto">
<div className="flex items-center justify-center min-h-screen px-4 py-8">
<div
className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
onClick={() => setSelectedBooking(null)}
/>
<div className="relative bg-white rounded-xl shadow-xl w-full max-w-2xl">
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-900">
{t('detail.title')}
{selectedBooking.bookingId
? ` #${selectedBooking.bookingId}`
: ` #${selectedBooking.id?.slice(0, 8).toUpperCase()}`}
</h2>
<button
onClick={() => setSelectedBooking(null)}
className="text-gray-400 hover:text-gray-600 transition-colors"
>
<X className="h-5 w-5" />
</button>
</div>
<div className="px-6 py-4 space-y-4">
<div className="flex items-center gap-2">
<span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${getStatusColor(selectedBooking.status)}`}>
{getStatusLabel(selectedBooking.status)}
</span>
{selectedBooking.carrierName && (
<span className="text-sm text-gray-500">{selectedBooking.carrierName}</span>
)}
</div>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.route')}</p>
<p className="mt-1 text-gray-900">
{selectedBooking.origin || selectedBooking.originCity || 'N/A'}
{' → '}
{selectedBooking.destination || selectedBooking.destinationCity || 'N/A'}
</p>
</div>
<div>
<p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.date')}</p>
<p className="mt-1 text-gray-900">
{selectedBooking.createdAt || selectedBooking.requestedAt
? new Date(
selectedBooking.createdAt || selectedBooking.requestedAt
).toLocaleDateString(dateLocale, {
day: '2-digit',
month: 'long',
year: 'numeric',
})
: 'N/A'}
</p>
</div>
<div>
<p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.cargo')}</p>
<p className="mt-1 text-gray-900">
{selectedBooking.palletCount
? t('units.palletsCount', { count: selectedBooking.palletCount })
: '-'}
</p>
</div>
<div>
<p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.weight')}</p>
<p className="mt-1 text-gray-900">
{selectedBooking.weightKG ? t('units.kg', { value: selectedBooking.weightKG }) : 'N/A'}
{selectedBooking.volumeCBM ? ` / ${t('units.cbm', { value: selectedBooking.volumeCBM })}` : ''}
</p>
</div>
{selectedBooking.requestedPickupDate && (
<div>
<p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.pickupDate')}</p>
<p className="mt-1 text-gray-900">
{new Date(selectedBooking.requestedPickupDate).toLocaleDateString(dateLocale, {
day: '2-digit',
month: 'long',
year: 'numeric',
})}
</p>
</div>
)}
{(selectedBooking.priceEUR || selectedBooking.priceUSD) && (
<div>
<p className="text-xs font-medium text-gray-400 uppercase tracking-wide">{t('detail.price')}</p>
<p className="mt-1 font-semibold text-gray-900">
{selectedBooking.priceEUR
? `${selectedBooking.priceEUR}`
: `${selectedBooking.priceUSD} $`}
</p>
</div>
)}
</div>
{selectedBooking.status === 'PENDING_PAYMENT' && (
<div className="mt-4 pt-4 border-t border-gray-100">
<p className="text-sm text-orange-700 bg-orange-50 rounded-lg px-3 py-2">
{t('detail.pendingPaymentNotice')}
</p>
<Link
href={`/dashboard/booking/${selectedBooking.id}/pay`}
onClick={() => setSelectedBooking(null)}
className="mt-3 inline-flex items-center gap-2 px-4 py-2 bg-orange-500 text-white text-sm font-medium rounded-lg hover:bg-orange-600 transition-colors"
>
<CreditCard className="h-4 w-4" />
{t('detail.payNow')}
</Link>
</div>
)}
</div>
<div className="px-6 py-4 border-t border-gray-200 flex justify-end">
<button
onClick={() => setSelectedBooking(null)}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
>
{t('detail.close')}
</button>
</div>
</div>
</div>
</div>
)}
</div>
);
}

View File

@ -3,7 +3,6 @@
import { useState, useEffect, useCallback, useRef } from 'react';
import { useTranslations, useLocale } from 'next-intl';
import { listCsvBookings, CsvBookingResponse } from '@/lib/api/bookings';
import { getAuthToken } from '@/lib/api/client';
import { FileText, Image as ImageIcon, FileEdit, FileSpreadsheet, Paperclip } from 'lucide-react';
import type { ReactNode } from 'react';
import ExportButton from '@/components/ExportButton';
@ -46,15 +45,11 @@ export default function UserDocumentsPage() {
const [showAddModal, setShowAddModal] = useState(false);
const [selectedBookingId, setSelectedBookingId] = useState<string | null>(null);
const [uploadingFiles, setUploadingFiles] = useState(false);
const [isDraggingAdd, setIsDraggingAdd] = useState(false);
const [addFiles, setAddFiles] = useState<File[]>([]);
const fileInputRef = useRef<HTMLInputElement>(null);
const [showReplaceModal, setShowReplaceModal] = useState(false);
const [documentToReplace, setDocumentToReplace] = useState<DocumentWithBooking | null>(null);
const [replacingFile, setReplacingFile] = useState(false);
const [isDraggingReplace, setIsDraggingReplace] = useState(false);
const [replaceFile, setReplaceFile] = useState<File | null>(null);
const replaceFileInputRef = useRef<HTMLInputElement>(null);
const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
@ -192,8 +187,6 @@ export default function UserDocumentsPage() {
const getStatusColor = (status: string) => {
const colors: Record<string, string> = {
PENDING_PAYMENT: 'bg-orange-100 text-orange-800',
PENDING_BANK_TRANSFER: 'bg-blue-100 text-blue-800',
PENDING: 'bg-yellow-100 text-yellow-800',
ACCEPTED: 'bg-green-100 text-green-800',
REJECTED: 'bg-red-100 text-red-800',
@ -203,15 +196,8 @@ export default function UserDocumentsPage() {
};
const getStatusLabel = (status: string) => {
const labels: Record<string, string> = {
PENDING_PAYMENT: t('statuses.PENDING_PAYMENT' as any),
PENDING_BANK_TRANSFER: t('statuses.PENDING_BANK_TRANSFER' as any),
PENDING: t('statuses.PENDING' as any),
ACCEPTED: t('statuses.ACCEPTED' as any),
REJECTED: t('statuses.REJECTED' as any),
CANCELLED: t('statuses.CANCELLED' as any),
};
return labels[status] || status;
const key = status as 'PENDING' | 'ACCEPTED' | 'REJECTED' | 'CANCELLED';
return t(`statuses.${key}` as any) || status;
};
const handleDownload = async (url: string, fileName: string) => {
@ -249,11 +235,7 @@ export default function UserDocumentsPage() {
};
const bookingsAvailableForDocuments = bookings.filter(
b =>
b.status === 'PENDING' ||
b.status === 'ACCEPTED' ||
b.status === 'PENDING_PAYMENT' ||
b.status === 'PENDING_BANK_TRANSFER'
b => b.status === 'PENDING' || b.status === 'ACCEPTED'
);
const handleAddDocumentClick = () => {
@ -263,12 +245,11 @@ export default function UserDocumentsPage() {
const handleCloseModal = () => {
setShowAddModal(false);
setSelectedBookingId(null);
setAddFiles([]);
if (fileInputRef.current) fileInputRef.current.value = '';
};
const handleFileUpload = async () => {
if (!selectedBookingId || addFiles.length === 0) {
if (!selectedBookingId || !fileInputRef.current?.files?.length) {
alert(t('addDocument.noBookingError'));
return;
}
@ -276,18 +257,18 @@ export default function UserDocumentsPage() {
setUploadingFiles(true);
try {
const formData = new FormData();
addFiles.forEach(file => formData.append('documents', file));
const files = fileInputRef.current.files;
for (let i = 0; i < files.length; i++) {
formData.append('documents', files[i]);
}
const token = getAuthToken();
const token = localStorage.getItem('access_token');
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/csv-bookings/${selectedBookingId}/documents`,
{ method: 'POST', headers: { Authorization: `Bearer ${token}` }, body: formData }
);
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.message || t('addDocument.errorMessage'));
}
if (!response.ok) throw new Error(t('addDocument.errorMessage'));
alert(t('addDocument.successMessage'));
handleCloseModal();
@ -321,12 +302,11 @@ export default function UserDocumentsPage() {
const handleCloseReplaceModal = () => {
setShowReplaceModal(false);
setDocumentToReplace(null);
setReplaceFile(null);
if (replaceFileInputRef.current) replaceFileInputRef.current.value = '';
};
const handleReplaceDocument = async () => {
if (!documentToReplace || !replaceFile) {
if (!documentToReplace || !replaceFileInputRef.current?.files?.length) {
alert(t('replaceDocument.noFileError'));
return;
}
@ -334,9 +314,9 @@ export default function UserDocumentsPage() {
setReplacingFile(true);
try {
const formData = new FormData();
formData.append('document', replaceFile);
formData.append('document', replaceFileInputRef.current.files[0]);
const token = getAuthToken();
const token = localStorage.getItem('access_token');
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/csv-bookings/${documentToReplace.bookingId}/documents/${documentToReplace.id}`,
{ method: 'PATCH', headers: { Authorization: `Bearer ${token}` }, body: formData }
@ -782,7 +762,11 @@ export default function UserDocumentsPage() {
<option value="">{t('addDocument.selectBookingPlaceholder')}</option>
{bookingsAvailableForDocuments.map(booking => (
<option key={booking.id} value={booking.id}>
{getQuoteNumber(booking)} - {booking.origin} {booking.destination} ({getStatusLabel(booking.status)})
{getQuoteNumber(booking)} - {booking.origin} {booking.destination} (
{booking.status === 'PENDING'
? t('statuses.PENDING')
: t('statuses.ACCEPTED')}
)
</option>
))}
</select>
@ -791,64 +775,16 @@ export default function UserDocumentsPage() {
<label className="block text-sm font-medium text-gray-700 mb-2">
{t('addDocument.filesToAdd')}
</label>
<div
className={`relative border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
isDraggingAdd
? 'border-blue-500 bg-blue-50'
: 'border-gray-300 hover:border-blue-400 hover:bg-gray-50'
}`}
onDragOver={e => {
e.preventDefault();
setIsDraggingAdd(true);
}}
onDragLeave={() => setIsDraggingAdd(false)}
onDrop={e => {
e.preventDefault();
setIsDraggingAdd(false);
const dropped = Array.from(e.dataTransfer.files);
if (dropped.length > 0) setAddFiles(dropped);
}}
onClick={() => fileInputRef.current?.click()}
>
<svg
className="mx-auto h-10 w-10 text-gray-400 mb-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
/>
</svg>
{addFiles.length > 0 ? (
<p className="text-sm font-medium text-blue-700">
{addFiles.length === 1
? addFiles[0].name
: `${addFiles.length} fichiers sélectionnés`}
</p>
) : (
<p className="text-sm text-gray-600">
{isDraggingAdd
? t('addDocument.dropHere')
: t('addDocument.dragOrClick')}
</p>
)}
<p className="text-xs text-gray-400 mt-1">{t('addDocument.acceptedFormats')}</p>
<input
ref={fileInputRef}
type="file"
multiple
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
className="hidden"
onChange={e => {
const selected = Array.from(e.target.files || []);
if (selected.length > 0) setAddFiles(selected);
}}
/>
</div>
<input
ref={fileInputRef}
type="file"
multiple
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
/>
<p className="mt-1 text-xs text-gray-500">
{t('addDocument.acceptedFormats')}
</p>
</div>
</div>
</div>
@ -858,7 +794,7 @@ export default function UserDocumentsPage() {
<button
type="button"
onClick={handleFileUpload}
disabled={uploadingFiles || !selectedBookingId || addFiles.length === 0}
disabled={uploadingFiles || !selectedBookingId}
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed"
>
{uploadingFiles ? (
@ -948,59 +884,15 @@ export default function UserDocumentsPage() {
<label className="block text-sm font-medium text-gray-700 mb-2">
{t('replaceDocument.newFile')}
</label>
<div
className={`relative border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
isDraggingReplace
? 'border-blue-500 bg-blue-50'
: 'border-gray-300 hover:border-blue-400 hover:bg-gray-50'
}`}
onDragOver={e => {
e.preventDefault();
setIsDraggingReplace(true);
}}
onDragLeave={() => setIsDraggingReplace(false)}
onDrop={e => {
e.preventDefault();
setIsDraggingReplace(false);
const dropped = e.dataTransfer.files[0];
if (dropped) setReplaceFile(dropped);
}}
onClick={() => replaceFileInputRef.current?.click()}
>
<svg
className="mx-auto h-10 w-10 text-gray-400 mb-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
/>
</svg>
{replaceFile ? (
<p className="text-sm font-medium text-blue-700">{replaceFile.name}</p>
) : (
<p className="text-sm text-gray-600">
{isDraggingReplace
? t('replaceDocument.dropHere')
: t('replaceDocument.dragOrClick')}
</p>
)}
<p className="text-xs text-gray-400 mt-1">{t('replaceDocument.acceptedFormats')}</p>
<input
ref={replaceFileInputRef}
type="file"
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
className="hidden"
onChange={e => {
const file = e.target.files?.[0];
if (file) setReplaceFile(file);
}}
/>
</div>
<input
ref={replaceFileInputRef}
type="file"
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
/>
<p className="mt-1 text-xs text-gray-500">
{t('replaceDocument.acceptedFormats')}
</p>
</div>
</div>
</div>

View File

@ -426,25 +426,7 @@
"status": "Status",
"date": "Date",
"quoteNumber": "Quote No.",
"bookingNumber": "Booking No.",
"actions": "Actions"
},
"actions": {
"view": "View",
"pay": "Pay"
},
"detail": {
"title": "Booking",
"route": "Route",
"date": "Creation date",
"cargo": "Cargo",
"weight": "Weight / Volume",
"pickupDate": "Requested pickup date",
"price": "Price",
"pendingPaymentNotice": "This booking is awaiting commission payment. Click below to complete the payment.",
"payNow": "Complete payment",
"newBooking": "New booking",
"close": "Close"
"bookingNumber": "Booking No."
},
"mobile": {
"pallets": "Pallets",
@ -1200,46 +1182,24 @@
"modal": {
"createTitle": "Create New Organization",
"editTitle": "Edit Organization",
"sectionGeneral": "General information",
"sectionLegal": "Legal identifiers",
"sectionContact": "Contact",
"sectionAddress": "Address",
"sectionOther": "Other",
"name": "Organization name",
"type": "Type",
"typeReadOnly": "Cannot be changed after creation",
"scacLabel": "SCAC code",
"scacHint": "4 uppercase letters (e.g. MAEU). Required for carriers.",
"name": "Organization Name *",
"type": "Type *",
"scacLabel": "SCAC Code *",
"sirenLabel": "SIREN",
"sirenHint": "9 digits — optional",
"siretLabel": "SIRET",
"siretHint": "14 digits — optional",
"siretLabel": "SIRET (14 digits)",
"siretPlaceholder": "12345678901234",
"eoriLabel": "EORI",
"eoriHint": "EU EORI number (e.g. FR123456789) — optional",
"contactEmail": "Contact email",
"contactPhone": "Contact phone",
"street": "Street address",
"city": "City",
"postalCode": "Postal code",
"contactPhone": "Contact Phone",
"contactEmail": "Contact Email",
"street": "Street Address *",
"city": "City *",
"postalCode": "Postal Code *",
"state": "State / Region",
"country": "Country",
"countryHint": "2-letter ISO code (e.g. FR, DE, US)",
"country": "Country *",
"logoUrl": "Logo URL",
"isActive": "Active organization",
"cancel": "Cancel",
"create": "Create",
"update": "Update",
"saving": "Saving..."
},
"validation": {
"required": "This field is required",
"nameTooShort": "Name must be at least 2 characters",
"scacRequired": "SCAC code is required for carriers",
"scacFormat": "SCAC must be exactly 4 uppercase letters (e.g. MAEU)",
"sirenFormat": "SIREN must be exactly 9 digits",
"siretFormat": "SIRET must be exactly 14 digits",
"countryFormat": "Country must be a 2-letter ISO code (e.g. FR)"
"update": "Update"
}
},
"users": {
@ -1477,8 +1437,6 @@
"actions": "Actions"
},
"statuses": {
"PENDING_PAYMENT": "Payment pending",
"PENDING_BANK_TRANSFER": "Bank transfer pending",
"PENDING": "Pending",
"ACCEPTED": "Accepted",
"REJECTED": "Rejected",
@ -1514,8 +1472,6 @@
"selectBookingPlaceholder": "-- Choose a booking --",
"filesToAdd": "Files to add",
"acceptedFormats": "Accepted formats: PDF, Word, Excel, Images (max 10 files)",
"dragOrClick": "Drag & drop your files here or click to select",
"dropHere": "Drop your files here",
"uploading": "Uploading...",
"add": "Add",
"cancel": "Cancel",
@ -1529,8 +1485,6 @@
"booking": "Booking",
"newFile": "New file",
"acceptedFormats": "Accepted formats: PDF, Word, Excel, Images",
"dragOrClick": "Drag & drop your file here or click to select",
"dropHere": "Drop your file here",
"replacing": "Replacing...",
"replace": "Replace",
"cancel": "Cancel",

View File

@ -426,25 +426,7 @@
"status": "Statut",
"date": "Date",
"quoteNumber": "N° Devis",
"bookingNumber": "N° Booking",
"actions": "Actions"
},
"actions": {
"view": "Voir",
"pay": "Payer"
},
"detail": {
"title": "Réservation",
"route": "Route",
"date": "Date de création",
"cargo": "Marchandise",
"weight": "Poids / Volume",
"pickupDate": "Date d'enlèvement souhaitée",
"price": "Prix",
"pendingPaymentNotice": "Cette réservation est en attente du paiement de la commission. Cliquez ci-dessous pour finaliser le paiement.",
"payNow": "Finaliser le paiement",
"newBooking": "Nouvelle réservation",
"close": "Fermer"
"bookingNumber": "N° Booking"
},
"mobile": {
"pallets": "Palettes",
@ -1200,46 +1182,24 @@
"modal": {
"createTitle": "Créer une nouvelle organisation",
"editTitle": "Modifier l'organisation",
"sectionGeneral": "Informations générales",
"sectionLegal": "Identifiants légaux",
"sectionContact": "Contact",
"sectionAddress": "Adresse",
"sectionOther": "Autres",
"name": "Nom de l'organisation",
"type": "Type",
"typeReadOnly": "Non modifiable après création",
"scacLabel": "Code SCAC",
"scacHint": "4 lettres majuscules (ex. MAEU). Obligatoire pour les transporteurs.",
"name": "Nom de l'organisation *",
"type": "Type *",
"scacLabel": "Code SCAC *",
"sirenLabel": "SIREN",
"sirenHint": "9 chiffres — facultatif",
"siretLabel": "SIRET",
"siretHint": "14 chiffres — facultatif",
"siretLabel": "SIRET (14 chiffres)",
"siretPlaceholder": "12345678901234",
"eoriLabel": "EORI",
"eoriHint": "Numéro EORI européen (ex. FR123456789) — facultatif",
"contactEmail": "Email de contact",
"contactPhone": "Téléphone de contact",
"street": "Rue",
"city": "Ville",
"postalCode": "Code postal",
"contactEmail": "Email de contact",
"street": "Rue *",
"city": "Ville *",
"postalCode": "Code postal *",
"state": "État / Région",
"country": "Pays",
"countryHint": "Code ISO 2 lettres majuscules (ex. FR, DE, US)",
"country": "Pays *",
"logoUrl": "URL du logo",
"isActive": "Organisation active",
"cancel": "Annuler",
"create": "Créer",
"update": "Mettre à jour",
"saving": "Enregistrement..."
},
"validation": {
"required": "Ce champ est obligatoire",
"nameTooShort": "Le nom doit comporter au moins 2 caractères",
"scacRequired": "Le code SCAC est obligatoire pour les transporteurs",
"scacFormat": "Le code SCAC doit comporter exactement 4 lettres majuscules (ex. MAEU)",
"sirenFormat": "Le SIREN doit comporter exactement 9 chiffres",
"siretFormat": "Le SIRET doit comporter exactement 14 chiffres",
"countryFormat": "Le pays doit être un code ISO à 2 lettres majuscules (ex. FR)"
"update": "Mettre à jour"
}
},
"users": {
@ -1477,8 +1437,6 @@
"actions": "Actions"
},
"statuses": {
"PENDING_PAYMENT": "Paiement en attente",
"PENDING_BANK_TRANSFER": "Virement en attente",
"PENDING": "En attente",
"ACCEPTED": "Accepté",
"REJECTED": "Refusé",
@ -1514,8 +1472,6 @@
"selectBookingPlaceholder": "-- Choisir une réservation --",
"filesToAdd": "Fichiers à ajouter",
"acceptedFormats": "Formats acceptés: PDF, Word, Excel, Images (max 10 fichiers)",
"dragOrClick": "Glissez-déposez vos fichiers ici ou cliquez pour sélectionner",
"dropHere": "Déposez vos fichiers ici",
"uploading": "Envoi en cours...",
"add": "Ajouter",
"cancel": "Annuler",
@ -1529,8 +1485,6 @@
"booking": "Réservation",
"newFile": "Nouveau fichier",
"acceptedFormats": "Formats acceptés: PDF, Word, Excel, Images",
"dragOrClick": "Glissez-déposez votre fichier ici ou cliquez pour sélectionner",
"dropHere": "Déposez votre fichier ici",
"replacing": "Remplacement en cours...",
"replace": "Remplacer",
"cancel": "Annuler",

View File

@ -51,7 +51,7 @@ export interface CsvBookingResponse {
primaryCurrency: string;
transitDays: number;
containerType: string;
status: 'PENDING_PAYMENT' | 'PENDING_BANK_TRANSFER' | 'PENDING' | 'ACCEPTED' | 'REJECTED' | 'CANCELLED';
status: 'PENDING_PAYMENT' | 'PENDING' | 'ACCEPTED' | 'REJECTED' | 'CANCELLED';
documents: Array<{
type: string;
fileName: string;

View File

@ -66,12 +66,3 @@ export async function updateOrganization(
): Promise<OrganizationResponse> {
return patch<OrganizationResponse>(`/api/v1/organizations/${id}`, data);
}
/**
* Request SIRET/SIREN approval from admins
* POST /api/v1/organizations/request-siret-approval
* Requires: Authenticated user
*/
export async function requestSiretApproval(): Promise<{ message: string }> {
return post<{ message: string }>('/api/v1/organizations/request-siret-approval', {});
}

View File

@ -111,20 +111,13 @@ export type OrganizationType = 'FREIGHT_FORWARDER' | 'CARRIER' | 'SHIPPER';
export interface CreateOrganizationRequest {
name: string;
type: OrganizationType;
address: {
street: string;
city: string;
state?: string;
postalCode: string;
country: string;
};
siren?: string;
siret?: string;
eori?: string;
scac?: string;
address_street: string;
address_city: string;
address_postal_code: string;
address_country: string;
contact_email?: string;
contact_phone?: string;
logoUrl?: string;
logo_url?: string;
}
export interface UpdateOrganizationRequest {