692 lines
30 KiB
JavaScript
692 lines
30 KiB
JavaScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Button, Card, Input, Select, Textarea } from '../../../../shared/components';
|
|
import { useToast } from '@hykocx/zen/toast';
|
|
import { parseUTCDate, formatDateForDisplay, formatDateForInput, getTodayUTC } from '../../../../shared/lib/dates.js';
|
|
|
|
/**
|
|
* Recurrence Create Page Component
|
|
* Page for creating a new invoice recurrence
|
|
*/
|
|
const RecurrenceCreatePage = ({ user }) => {
|
|
const router = useRouter();
|
|
const toast = useToast();
|
|
|
|
const [clients, setClients] = useState([]);
|
|
const [items, setItems] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const [formData, setFormData] = useState({
|
|
client_id: '',
|
|
frequency_type: 'months',
|
|
frequency_value: 1,
|
|
recurrence_day: 1,
|
|
first_reminder_days: 30,
|
|
first_occurrence_date: '',
|
|
use_custom_first_date: false,
|
|
notes: '',
|
|
items: [{ name: '', description: '', quantity: 1, unit_price: 0 }]
|
|
});
|
|
|
|
const [errors, setErrors] = useState({});
|
|
const [selectedItemIds, setSelectedItemIds] = useState(['custom']);
|
|
|
|
const frequencyTypeOptions = [
|
|
{ value: 'days', label: "jours" },
|
|
{ value: 'months', label: "mois" },
|
|
{ value: 'years', label: "ans" }
|
|
];
|
|
|
|
const reminderOptions = [
|
|
{ value: 30, label: '30 jours' },
|
|
{ value: 14, label: '14 jours' },
|
|
{ value: 7, label: '7 jours' },
|
|
{ value: 3, label: '3 jours' }
|
|
];
|
|
|
|
// Generate day options (1-28)
|
|
const dayOptions = Array.from({ length: 28 }, (_, i) => ({
|
|
value: i + 1,
|
|
label: `Jour ${i + 1}`
|
|
}));
|
|
|
|
// Generate frequency value options (1-12 for months/years, 1-90 for days)
|
|
const getFrequencyValueOptions = () => {
|
|
const maxValue = formData.frequency_type === 'days' ? 90 : 12;
|
|
return Array.from({ length: maxValue }, (_, i) => ({
|
|
value: i + 1,
|
|
label: i + 1
|
|
}));
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
const loadData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
// Load clients
|
|
const clientsResponse = await fetch('/zen/api/admin/clients?limit=1000', {
|
|
credentials: 'include'
|
|
});
|
|
const clientsData = await clientsResponse.json();
|
|
|
|
if (clientsData.success) {
|
|
setClients(clientsData.clients || []);
|
|
} else {
|
|
toast.error("Échec du chargement des clients");
|
|
}
|
|
|
|
// Load items (active only)
|
|
const itemsResponse = await fetch('/zen/api/admin/items?limit=1000&is_active=true', {
|
|
credentials: 'include'
|
|
});
|
|
const itemsData = await itemsResponse.json();
|
|
|
|
if (itemsData.success) {
|
|
setItems(itemsData.items || []);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading data:', error);
|
|
toast.error("Échec du chargement des données");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Generate possible first occurrence dates based on recurrence settings
|
|
const getFirstOccurrenceOptions = () => {
|
|
if (!formData.frequency_type || !formData.recurrence_day) {
|
|
return [];
|
|
}
|
|
|
|
if (formData.frequency_type === 'days') {
|
|
return []; // Not applicable for days-based recurrence
|
|
}
|
|
|
|
const targetDay = parseInt(formData.recurrence_day);
|
|
const today = getTodayUTC();
|
|
const options = [];
|
|
|
|
// Generate 24 months (2 years) of options
|
|
for (let i = 0; i < 24; i++) {
|
|
const date = new Date(today);
|
|
date.setUTCDate(targetDay);
|
|
date.setUTCMonth(today.getUTCMonth() + i);
|
|
|
|
const dateStr = formatDateForInput(date);
|
|
const label = formatDateForDisplay(date, 'fr-FR', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
|
|
options.push({ value: dateStr, label });
|
|
}
|
|
|
|
return options;
|
|
};
|
|
|
|
// Calculate first due date for preview
|
|
const calculateFirstDueDate = () => {
|
|
if (!formData.frequency_type || !formData.frequency_value || !formData.recurrence_day) {
|
|
return null;
|
|
}
|
|
|
|
// If using custom first date, use it
|
|
if (formData.use_custom_first_date && formData.first_occurrence_date) {
|
|
return parseUTCDate(formData.first_occurrence_date);
|
|
}
|
|
|
|
const today = getTodayUTC();
|
|
|
|
if (formData.frequency_type === 'days') {
|
|
const dueDate = new Date(today);
|
|
dueDate.setUTCDate(dueDate.getUTCDate() + parseInt(formData.frequency_value));
|
|
return dueDate;
|
|
}
|
|
|
|
// For months/years, find the next occurrence of recurrence_day
|
|
const targetDay = parseInt(formData.recurrence_day);
|
|
const currentDay = today.getUTCDate();
|
|
|
|
let firstDueDate = new Date(today);
|
|
firstDueDate.setUTCDate(targetDay);
|
|
|
|
// If the target day has already passed this month, move to next period
|
|
if (currentDay >= targetDay) {
|
|
if (formData.frequency_type === 'months') {
|
|
firstDueDate.setUTCMonth(firstDueDate.getUTCMonth() + 1);
|
|
} else if (formData.frequency_type === 'years') {
|
|
firstDueDate.setUTCFullYear(firstDueDate.getUTCFullYear() + 1);
|
|
}
|
|
}
|
|
|
|
return firstDueDate;
|
|
};
|
|
|
|
// Calculate invoice creation date for preview
|
|
const calculateCreationDate = () => {
|
|
const dueDate = calculateFirstDueDate();
|
|
if (!dueDate) return null;
|
|
|
|
const creationDate = new Date(dueDate);
|
|
creationDate.setUTCDate(creationDate.getUTCDate() - parseInt(formData.first_reminder_days));
|
|
return creationDate;
|
|
};
|
|
|
|
const formatDate = (date) => {
|
|
if (!date) return '';
|
|
return formatDateForDisplay(date, 'fr-FR', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
};
|
|
|
|
const handleInputChange = (field, value) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[field]: value
|
|
}));
|
|
|
|
if (errors[field]) {
|
|
setErrors(prev => ({
|
|
...prev,
|
|
[field]: null
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleItemsChange = (newItems) => {
|
|
setFormData(prev => ({ ...prev, items: newItems }));
|
|
};
|
|
|
|
const handleItemChange = (index, field, value) => {
|
|
const newItems = [...formData.items];
|
|
newItems[index] = { ...newItems[index], [field]: value };
|
|
setFormData(prev => ({ ...prev, items: newItems }));
|
|
|
|
if (errors[`item_${index}_${field}`]) {
|
|
setErrors(prev => ({
|
|
...prev,
|
|
[`item_${index}_${field}`]: null
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleSelectItem = (index, itemId) => {
|
|
const newSelectedItemIds = [...selectedItemIds];
|
|
newSelectedItemIds[index] = itemId;
|
|
setSelectedItemIds(newSelectedItemIds);
|
|
|
|
if (itemId === '' || itemId === 'custom') {
|
|
handleItemChange(index, 'name', '');
|
|
handleItemChange(index, 'description', '');
|
|
handleItemChange(index, 'unit_price', 0);
|
|
return;
|
|
}
|
|
|
|
const selectedItem = items.find(item => item.id === parseInt(itemId));
|
|
if (selectedItem) {
|
|
let fullItemName = '';
|
|
if (selectedItem.parent_category_title) {
|
|
fullItemName = `${selectedItem.parent_category_title} - ${selectedItem.category_title} - ${selectedItem.name}`;
|
|
} else if (selectedItem.category_title) {
|
|
fullItemName = `${selectedItem.category_title} - ${selectedItem.name}`;
|
|
} else {
|
|
fullItemName = selectedItem.name;
|
|
}
|
|
|
|
const newItems = [...formData.items];
|
|
newItems[index] = {
|
|
...newItems[index],
|
|
name: fullItemName,
|
|
description: selectedItem.description || '',
|
|
unit_price: selectedItem.unit_price
|
|
};
|
|
setFormData(prev => ({ ...prev, items: newItems }));
|
|
}
|
|
};
|
|
|
|
const addItem = () => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
items: [...prev.items, { name: '', description: '', quantity: 1, unit_price: 0 }]
|
|
}));
|
|
setSelectedItemIds(prev => [...prev, 'custom']);
|
|
};
|
|
|
|
const removeItem = (index) => {
|
|
if (formData.items.length > 1) {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
items: prev.items.filter((_, i) => i !== index)
|
|
}));
|
|
setSelectedItemIds(prev => prev.filter((_, i) => i !== index));
|
|
}
|
|
};
|
|
|
|
const calculateItemTotal = (item) => {
|
|
return parseFloat(item.quantity || 0) * parseFloat(item.unit_price || 0);
|
|
};
|
|
|
|
const calculateTotals = () => {
|
|
const subtotal = formData.items.reduce((sum, item) => {
|
|
return sum + calculateItemTotal(item);
|
|
}, 0);
|
|
|
|
return {
|
|
subtotal: parseFloat(subtotal.toFixed(2)),
|
|
total: parseFloat(subtotal.toFixed(2))
|
|
};
|
|
};
|
|
|
|
const validateForm = () => {
|
|
const newErrors = {};
|
|
|
|
if (!formData.client_id) {
|
|
newErrors.client_id = 'Le client est requis';
|
|
}
|
|
|
|
if (!formData.frequency_type) {
|
|
newErrors.frequency_type = 'Le type de fréquence est requis';
|
|
}
|
|
|
|
if (!formData.frequency_value || formData.frequency_value < 1) {
|
|
newErrors.frequency_value = 'La valeur de fréquence doit être au moins 1';
|
|
}
|
|
|
|
if (!formData.recurrence_day || formData.recurrence_day < 1 || formData.recurrence_day > 28) {
|
|
newErrors.recurrence_day = 'Le jour de récurrence doit être entre 1 et 28';
|
|
}
|
|
|
|
// Validate custom first occurrence date if enabled
|
|
if (formData.use_custom_first_date && !formData.first_occurrence_date) {
|
|
newErrors.first_occurrence_date = 'La date de première occurrence est requise lorsque la date personnalisée est activée';
|
|
}
|
|
|
|
// Validate items
|
|
formData.items.forEach((item, index) => {
|
|
if (!item.name.trim()) {
|
|
newErrors[`item_${index}_name`] = 'Le nom de l\'article est requis';
|
|
}
|
|
if (!item.quantity || item.quantity <= 0) {
|
|
newErrors[`item_${index}_quantity`] = 'La quantité doit être supérieure à 0';
|
|
}
|
|
if (item.unit_price < 0) {
|
|
newErrors[`item_${index}_unit_price`] = 'Le prix unitaire ne peut pas être négatif';
|
|
}
|
|
});
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setSaving(true);
|
|
|
|
// Prepare data - remove use_custom_first_date flag and clear first_occurrence_date if not using custom
|
|
const submitData = { ...formData };
|
|
if (!submitData.use_custom_first_date) {
|
|
submitData.first_occurrence_date = null;
|
|
}
|
|
delete submitData.use_custom_first_date;
|
|
|
|
const response = await fetch('/zen/api/admin/recurrences', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
credentials: 'include',
|
|
body: JSON.stringify({ recurrence: submitData }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
toast.success("Récurrence créée avec succès");
|
|
router.push('/admin/invoice/recurrences');
|
|
} else {
|
|
toast.error(data.error || 'Échec de la création de la récurrence');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error creating recurrence:', error);
|
|
toast.error("Échec de la création de la récurrence");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const firstDueDate = calculateFirstDueDate();
|
|
const creationDate = calculateCreationDate();
|
|
const totals = calculateTotals();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Créer une récurrence</h1>
|
|
<p className="mt-1 text-xs text-neutral-400">Configurer la génération automatique de factures</p>
|
|
</div>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => router.push('/admin/invoice/recurrences')}
|
|
>
|
|
← Retour aux récurrences
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Recurrence Information */}
|
|
<Card>
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Informations de la récurrence</h2>
|
|
|
|
<Select
|
|
label="Client *"
|
|
value={formData.client_id}
|
|
onChange={(value) => handleInputChange('client_id', value)}
|
|
options={[
|
|
{ value: '', label: 'Sélectionner un client' },
|
|
...clients.map(client => ({
|
|
value: client.id,
|
|
label: client.company_name || `${client.first_name} ${client.last_name}`
|
|
}))
|
|
]}
|
|
error={errors.client_id}
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Schedule */}
|
|
<Card>
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Planification</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Select
|
|
label="Type de fréquence *"
|
|
value={formData.frequency_type}
|
|
onChange={(value) => handleInputChange('frequency_type', value)}
|
|
options={frequencyTypeOptions}
|
|
error={errors.frequency_type}
|
|
/>
|
|
|
|
<Select
|
|
label="Valeur de fréquence *"
|
|
value={formData.frequency_value}
|
|
onChange={(value) => handleInputChange('frequency_value', value)}
|
|
options={getFrequencyValueOptions()}
|
|
error={errors.frequency_value}
|
|
/>
|
|
|
|
{formData.frequency_type !== 'days' && (
|
|
<Select
|
|
label="Jour de récurrence (1-28) *"
|
|
value={formData.recurrence_day}
|
|
onChange={(value) => handleInputChange('recurrence_day', value)}
|
|
options={dayOptions}
|
|
error={errors.recurrence_day}
|
|
description="Jour du mois pour créer la facture (limité à 1-28 pour cohérence)"
|
|
/>
|
|
)}
|
|
|
|
<Select
|
|
label="Premier rappel (jours avant l'échéance)"
|
|
value={formData.first_reminder_days}
|
|
onChange={(value) => handleInputChange('first_reminder_days', value)}
|
|
options={reminderOptions}
|
|
description="La facture sera créée ce nombre de jours avant la date d'échéance"
|
|
/>
|
|
</div>
|
|
|
|
{/* Custom First Occurrence Date */}
|
|
{formData.frequency_type !== 'days' && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
id="use_custom_first_date"
|
|
checked={formData.use_custom_first_date}
|
|
onChange={(e) => handleInputChange('use_custom_first_date', e.target.checked)}
|
|
className="w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 bg-neutral-100 dark:bg-neutral-800 text-blue-500 focus:ring-blue-500 focus:ring-offset-neutral-900"
|
|
/>
|
|
<label htmlFor="use_custom_first_date" className="text-sm text-neutral-700 dark:text-neutral-300">
|
|
Indiquer une date de première occurrence personnalisée
|
|
</label>
|
|
</div>
|
|
|
|
{formData.use_custom_first_date && (
|
|
<Select
|
|
label="Date de première occurrence *"
|
|
value={formData.first_occurrence_date}
|
|
onChange={(value) => handleInputChange('first_occurrence_date', value)}
|
|
options={[
|
|
{ value: '', label: 'Sélectionner une date' },
|
|
...getFirstOccurrenceOptions()
|
|
]}
|
|
error={errors.first_occurrence_date}
|
|
description="Choisir quand la première facture doit être à échéance"
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Real-time Preview */}
|
|
{firstDueDate && (
|
|
<div className="bg-blue-500/10 border border-blue-500/20 text-blue-400 px-4 py-3 rounded-lg space-y-2">
|
|
<div className="text-sm">
|
|
<strong>Date d'échéance de la première facture :</strong> {formatDate(firstDueDate)}
|
|
{formData.use_custom_first_date && formData.first_occurrence_date && (
|
|
<span className="ml-2 text-xs">(Date personnalisée)</span>
|
|
)}
|
|
</div>
|
|
{creationDate && (
|
|
<div className="text-sm">
|
|
<strong>Date de création de la facture :</strong> {formatDate(creationDate)}
|
|
<span className="ml-2 text-xs">(Date d'échéance moins {formData.first_reminder_days} jours)</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Items */}
|
|
<Card>
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Items</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{formData.items.map((item, index) => (
|
|
<div key={index} className="border border-neutral-200 dark:border-neutral-700/50 rounded-lg p-4 bg-neutral-50 dark:bg-neutral-900/20">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Article {index + 1}</h3>
|
|
{formData.items.length > 1 && (
|
|
<Button
|
|
type="button"
|
|
variant="danger"
|
|
size="sm"
|
|
onClick={() => removeItem(index)}
|
|
>
|
|
Supprimer
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="grid gap-4 grid-cols-1 md:grid-cols-2">
|
|
<Select
|
|
label="Item *"
|
|
value={selectedItemIds[index] || 'custom'}
|
|
onChange={(value) => handleSelectItem(index, value)}
|
|
options={[
|
|
{ value: 'custom', label: 'Custom' },
|
|
...items.map(availableItem => {
|
|
let categoryDisplay = '';
|
|
if (availableItem.parent_category_title) {
|
|
categoryDisplay = `${availableItem.parent_category_title} - ${availableItem.category_title} - `;
|
|
} else if (availableItem.category_title) {
|
|
categoryDisplay = `${availableItem.category_title} - `;
|
|
}
|
|
|
|
return {
|
|
value: availableItem.id,
|
|
label: `${categoryDisplay}${availableItem.name} - $${parseFloat(availableItem.unit_price).toFixed(2)}`
|
|
};
|
|
})
|
|
]}
|
|
disabled={loading}
|
|
/>
|
|
|
|
<Input
|
|
label="Item Name *"
|
|
value={item.name}
|
|
onChange={(value) => handleItemChange(index, 'name', value)}
|
|
placeholder="Enter item name..."
|
|
error={errors[`item_${index}_name`]}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label="Quantity *"
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
value={item.quantity}
|
|
onChange={(value) => handleItemChange(index, 'quantity', value)}
|
|
error={errors[`item_${index}_quantity`]}
|
|
/>
|
|
|
|
<Input
|
|
label="Unit Price *"
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
value={item.unit_price}
|
|
onChange={(value) => handleItemChange(index, 'unit_price', value)}
|
|
error={errors[`item_${index}_unit_price`]}
|
|
/>
|
|
</div>
|
|
|
|
<Textarea
|
|
label="Description"
|
|
value={item.description}
|
|
onChange={(value) => handleItemChange(index, 'description', value)}
|
|
rows={2}
|
|
placeholder="Describe the item or service..."
|
|
/>
|
|
|
|
<div className="text-right pt-2 border-t border-neutral-200 dark:border-neutral-700/50">
|
|
<span className="text-sm text-neutral-400">Total article : </span>
|
|
<span className="text-lg font-semibold text-green-400">
|
|
${calculateItemTotal(item).toLocaleString('en-US', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
})}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<div className="flex justify-end items-center">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={addItem}
|
|
>
|
|
+ Add Item
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Totals */}
|
|
<div className="pt-4 border-t border-neutral-200 dark:border-neutral-700/50">
|
|
<div className="flex justify-end">
|
|
<div className="w-full sm:w-80 space-y-2">
|
|
<div className="flex justify-between text-neutral-600 dark:text-neutral-300">
|
|
<span>Sous-total :</span>
|
|
<span className="font-medium">
|
|
${totals.subtotal.toLocaleString('en-US', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
})}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between text-neutral-900 dark:text-white text-lg font-semibold pt-2 border-t border-neutral-200 dark:border-neutral-700/50">
|
|
<span>Total :</span>
|
|
<span>
|
|
${totals.total.toLocaleString('en-US', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
})}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Notes */}
|
|
<Card>
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Notes</h2>
|
|
<Textarea
|
|
value={formData.notes}
|
|
onChange={(value) => handleInputChange('notes', value)}
|
|
rows={4}
|
|
placeholder="Add any additional notes or payment instructions..."
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center justify-end gap-3">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
onClick={() => router.push('/admin/invoice/recurrences')}
|
|
disabled={saving}
|
|
>
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
variant="success"
|
|
loading={saving}
|
|
disabled={saving}
|
|
>
|
|
{saving ? 'Création...' : 'Créer la récurrence'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RecurrenceCreatePage;
|
|
|