mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-29 07:53:23 +00:00
feat: Sortie des calculs des montants totaux de la partie configuration + revue du rendu [#18]
This commit is contained in:
N3WT DE COMPET
@ -6,15 +6,16 @@ import FeesManagement from '@/components/Structure/Configuration/FeesManagement'
|
||||
import DjangoCSRFToken from '@/components/DjangoCSRFToken';
|
||||
import useCsrfToken from '@/hooks/useCsrfToken';
|
||||
import { ClassesProvider } from '@/context/ClassesContext';
|
||||
import { fetchSpecialities, fetchTeachers, fetchClasses, fetchSchedules, fetchDiscounts, fetchRegistrationFees, fetchTuitionFees } from '@/app/lib/schoolAction';
|
||||
import { fetchSpecialities, fetchTeachers, fetchClasses, fetchSchedules, fetchRegistrationDiscounts, fetchTuitionDiscounts, fetchRegistrationFees, fetchTuitionFees } from '@/app/lib/schoolAction';
|
||||
import SidebarTabs from '@/components/SidebarTabs';
|
||||
|
||||
export default function Page() {
|
||||
const [specialities, setSpecialities] = useState([]);
|
||||
const [classes, setClasses] = useState([]);
|
||||
const [teachers, setTeachers] = useState([]);
|
||||
const [registrationDiscounts, setRegistrationDiscounts] = useState([]);
|
||||
const [tuitionDiscounts, setTuitionDiscounts] = useState([]);
|
||||
const [registrationFees, setRegistrationFees] = useState([]);
|
||||
const [discounts, setDiscounts] = useState([]);
|
||||
const [tuitionFees, setTuitionFees] = useState([]);
|
||||
|
||||
const csrfToken = useCsrfToken();
|
||||
@ -32,8 +33,11 @@ export default function Page() {
|
||||
// Fetch data for schedules
|
||||
handleSchedules();
|
||||
|
||||
// Fetch data for discounts
|
||||
handleDiscounts();
|
||||
// Fetch data for registration discounts
|
||||
handleRegistrationDiscounts();
|
||||
|
||||
// Fetch data for tuition discounts
|
||||
handleTuitionDiscounts();
|
||||
|
||||
// Fetch data for registration fees
|
||||
handleRegistrationFees();
|
||||
@ -74,12 +78,20 @@ export default function Page() {
|
||||
.catch(error => console.error('Error fetching schedules:', error));
|
||||
};
|
||||
|
||||
const handleDiscounts = () => {
|
||||
fetchDiscounts()
|
||||
const handleRegistrationDiscounts = () => {
|
||||
fetchRegistrationDiscounts()
|
||||
.then(data => {
|
||||
setDiscounts(data);
|
||||
setRegistrationDiscounts(data);
|
||||
})
|
||||
.catch(error => console.error('Error fetching discounts:', error));
|
||||
.catch(error => console.error('Error fetching registration discounts:', error));
|
||||
};
|
||||
|
||||
const handleTuitionDiscounts = () => {
|
||||
fetchTuitionDiscounts()
|
||||
.then(data => {
|
||||
setTuitionDiscounts(data);
|
||||
})
|
||||
.catch(error => console.error('Error fetching tuition discounts:', error));
|
||||
};
|
||||
|
||||
const handleRegistrationFees = () => {
|
||||
@ -236,8 +248,10 @@ export default function Page() {
|
||||
label: 'Tarifications',
|
||||
content: (
|
||||
<FeesManagement
|
||||
discounts={discounts}
|
||||
setDiscounts={setDiscounts}
|
||||
registrationDiscounts={registrationDiscounts}
|
||||
setRegistrationDiscounts={setRegistrationDiscounts}
|
||||
tuitionDiscounts={tuitionDiscounts}
|
||||
setTuitionDiscounts={setTuitionDiscounts}
|
||||
registrationFees={registrationFees}
|
||||
setRegistrationFees={setRegistrationFees}
|
||||
tuitionFees={tuitionFees}
|
||||
|
||||
@ -40,8 +40,13 @@ export const fetchSchedules = () => {
|
||||
.then(requestResponseHandler)
|
||||
};
|
||||
|
||||
export const fetchDiscounts = () => {
|
||||
return fetch(`${BE_SCHOOL_DISCOUNTS_URL}`)
|
||||
export const fetchRegistrationDiscounts = () => {
|
||||
return fetch(`${BE_SCHOOL_DISCOUNTS_URL}/registration`)
|
||||
.then(requestResponseHandler)
|
||||
};
|
||||
|
||||
export const fetchTuitionDiscounts = () => {
|
||||
return fetch(`${BE_SCHOOL_DISCOUNTS_URL}/tuition`)
|
||||
.then(requestResponseHandler)
|
||||
};
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Plus, Trash, Edit3, Check, X, Percent, EuroIcon } from 'lucide-react';
|
||||
import { Plus, Trash, Edit3, Check, X, Percent, EuroIcon, Tag } from 'lucide-react';
|
||||
import Table from '@/components/Table';
|
||||
import InputTextIcon from '@/components/InputTextIcon';
|
||||
import Popup from '@/components/Popup';
|
||||
|
||||
const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, handleDelete, errors }) => {
|
||||
const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, handleDelete, type }) => {
|
||||
const [editingDiscount, setEditingDiscount] = useState(null);
|
||||
const [newDiscount, setNewDiscount] = useState(null);
|
||||
const [formData, setFormData] = useState({});
|
||||
@ -13,7 +13,7 @@ const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, h
|
||||
const [popupMessage, setPopupMessage] = useState("");
|
||||
|
||||
const handleAddDiscount = () => {
|
||||
setNewDiscount({ id: Date.now(), name: '', amount: '', description: '', discountType: 'amount' });
|
||||
setNewDiscount({ id: Date.now(), name: '', amount: '', description: '', discount_type: 0, type: type });
|
||||
};
|
||||
|
||||
const handleRemoveDiscount = (id) => {
|
||||
@ -67,13 +67,13 @@ const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, h
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleDiscountType = (id, newType) => {
|
||||
const handleToggleDiscountType = (id) => {
|
||||
const discount = discounts.find(discount => discount.id === id);
|
||||
if (!discount) return;
|
||||
|
||||
const updatedData = {
|
||||
...discount,
|
||||
discount_type: newType
|
||||
discount_type: discount.discount_type === 0 ? 1 : 0
|
||||
};
|
||||
|
||||
handleEdit(id, updatedData)
|
||||
@ -87,9 +87,7 @@ const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, h
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
if (name === 'discountType') {
|
||||
setDiscountType(value);
|
||||
} else if (editingDiscount) {
|
||||
if (editingDiscount) {
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
[name]: value,
|
||||
@ -124,8 +122,8 @@ const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, h
|
||||
switch (column) {
|
||||
case 'LIBELLE':
|
||||
return renderInputField('name', currentData.name, handleChange, 'Libellé de la réduction');
|
||||
case 'VALEUR':
|
||||
return renderInputField('amount', currentData.amount, handleChange, discount.discount_type === 0 ? 'Montant' : 'Pourcentage');
|
||||
case 'REMISE':
|
||||
return renderInputField('amount', currentData.amount, handleChange,'Montant');
|
||||
case 'DESCRIPTION':
|
||||
return renderInputField('description', currentData.description, handleChange, 'Description');
|
||||
case 'ACTIONS':
|
||||
@ -154,32 +152,22 @@ const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, h
|
||||
switch (column) {
|
||||
case 'LIBELLE':
|
||||
return discount.name;
|
||||
case 'VALEUR':
|
||||
case 'REMISE':
|
||||
return discount.discount_type === 0 ? `${discount.amount} €` : `${discount.amount} %`;
|
||||
case 'TYPE DE REMISE':
|
||||
return (
|
||||
<div className="flex flex-col items-center space-y-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleDiscountType(discount.id, 0)}
|
||||
className={`text-${discount.discount_type === 0 ? 'emerald' : 'gray'}-500 hover:text-${discount.discount_type === 0 ? 'emerald' : 'gray'}-700`}
|
||||
>
|
||||
<EuroIcon className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleDiscountType(discount.id, 1)}
|
||||
className={`text-${discount.discount_type === 1 ? 'emerald' : 'gray'}-500 hover:text-${discount.discount_type === 1 ? 'emerald' : 'gray'}-700`}
|
||||
>
|
||||
<Percent className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
case 'DESCRIPTION':
|
||||
return discount.description;
|
||||
case 'MISE A JOUR':
|
||||
return discount.updated_at_formatted;
|
||||
case 'ACTIONS':
|
||||
return (
|
||||
<div className="flex justify-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleDiscountType(discount.id)}
|
||||
className="flex justify-center items-center text-emerald-500 hover:text-emerald-700"
|
||||
>
|
||||
{discount.discount_type === 0 ? <EuroIcon className="w-5 h-5" /> : <Percent className="w-5 h-5" />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingDiscount(discount.id) || setFormData(discount)}
|
||||
@ -205,7 +193,10 @@ const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, h
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold">Réductions</h2>
|
||||
<div className="flex items-center mb-4">
|
||||
<Tag className="w-6 h-6 text-emerald-500 mr-2" />
|
||||
<h2 className="text-xl font-semibold">Réductions {type === 0 ? 'd\'inscription' : 'de scolarité'}</h2>
|
||||
</div>
|
||||
<button type="button" onClick={handleAddDiscount} className="text-emerald-500 hover:text-emerald-700">
|
||||
<Plus className="w-5 h-5" />
|
||||
</button>
|
||||
@ -214,12 +205,13 @@ const DiscountsSection = ({ discounts, setDiscounts, handleCreate, handleEdit, h
|
||||
data={newDiscount ? [newDiscount, ...discounts] : discounts}
|
||||
columns={[
|
||||
{ name: 'LIBELLE', label: 'Libellé' },
|
||||
{ name: 'VALEUR', label: 'Valeur' },
|
||||
{ name: 'TYPE DE REMISE', label: 'Type de remise' },
|
||||
{ name: 'REMISE', label: 'Valeur' },
|
||||
{ name: 'DESCRIPTION', label: 'Description' },
|
||||
{ name: 'MISE A JOUR', label: 'date mise à jour' },
|
||||
{ name: 'ACTIONS', label: 'Actions' }
|
||||
]}
|
||||
renderCell={renderDiscountCell}
|
||||
defaultTheme='bg-yellow-100'
|
||||
/>
|
||||
<Popup
|
||||
visible={popupVisible}
|
||||
|
||||
@ -1,42 +1,77 @@
|
||||
import React, { useState } from 'react';
|
||||
import RegistrationFeesSection from '@/components/Structure/Configuration/RegistrationFeesSection';
|
||||
import React from 'react';
|
||||
import FeesSection from '@/components/Structure/Configuration/FeesSection';
|
||||
import DiscountsSection from '@/components/Structure/Configuration/DiscountsSection';
|
||||
import TuitionFeesSection from '@/components/Structure/Configuration/TuitionFeesSection';
|
||||
import { BE_SCHOOL_FEE_URL, BE_SCHOOL_DISCOUNT_URL } from '@/utils/Url';
|
||||
|
||||
const FeesManagement = ({ discounts, setDiscounts, registrationFees, setRegistrationFees, tuitionFees, setTuitionFees, handleCreate, handleEdit, handleDelete }) => {
|
||||
const FeesManagement = ({ registrationDiscounts, setRegistrationDiscounts, tuitionDiscounts, setTuitionDiscounts, registrationFees, setRegistrationFees, tuitionFees, setTuitionFees, handleCreate, handleEdit, handleDelete }) => {
|
||||
|
||||
const handleDiscountDelete = (id, type) => {
|
||||
if (type === 0) {
|
||||
setRegistrationFees(prevFees =>
|
||||
prevFees.map(fee => ({
|
||||
...fee,
|
||||
discounts: fee.discounts.filter(discountId => discountId !== id)
|
||||
}))
|
||||
);
|
||||
} else {
|
||||
setTuitionFees(prevFees =>
|
||||
prevFees.map(fee => ({
|
||||
...fee,
|
||||
discounts: fee.discounts.filter(discountId => discountId !== id)
|
||||
}))
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-8xl mx-auto p-4 mt-6 space-y-6">
|
||||
<div className="p-4 bg-white rounded-lg shadow-md">
|
||||
<DiscountsSection
|
||||
discounts={discounts}
|
||||
setDiscounts={setDiscounts}
|
||||
handleCreate={(newData) => handleCreate(`${BE_SCHOOL_DISCOUNT_URL}`, newData, setDiscounts)}
|
||||
handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_DISCOUNT_URL}`, id, updatedData, setDiscounts)}
|
||||
handleDelete={(id) => handleDelete(`${BE_SCHOOL_DISCOUNT_URL}`, id, setDiscounts)}
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-white p-6 rounded-lg shadow-md">
|
||||
<FeesSection
|
||||
fees={registrationFees}
|
||||
setFees={setRegistrationFees}
|
||||
discounts={registrationDiscounts}
|
||||
handleCreate={(newData) => handleCreate(`${BE_SCHOOL_FEE_URL}`, newData, setRegistrationFees)}
|
||||
handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_FEE_URL}`, id, updatedData, setRegistrationFees)}
|
||||
handleDelete={(id) => handleDelete(`${BE_SCHOOL_FEE_URL}`, id, setRegistrationFees)}
|
||||
type={0}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-lg shadow-md">
|
||||
<DiscountsSection
|
||||
discounts={registrationDiscounts}
|
||||
setDiscounts={setRegistrationDiscounts}
|
||||
handleCreate={(newData) => handleCreate(`${BE_SCHOOL_DISCOUNT_URL}`, newData, setRegistrationDiscounts)}
|
||||
handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_DISCOUNT_URL}`, id, updatedData, setRegistrationDiscounts)}
|
||||
handleDelete={(id) => handleDelete(`${BE_SCHOOL_DISCOUNT_URL}`, id, setRegistrationDiscounts)}
|
||||
onDiscountDelete={(id) => handleDiscountDelete(id, 0)}
|
||||
type={0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-white rounded-lg shadow-md">
|
||||
<RegistrationFeesSection
|
||||
registrationFees={registrationFees}
|
||||
setRegistrationFees={setRegistrationFees}
|
||||
discounts={discounts}
|
||||
handleCreate={(newData) => handleCreate(`${BE_SCHOOL_FEE_URL}`, newData, setRegistrationFees)}
|
||||
handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_FEE_URL}`, id, updatedData, setRegistrationFees)}
|
||||
handleDelete={(id) => handleDelete(`${BE_SCHOOL_FEE_URL}`, id, setRegistrationFees)}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4 bg-white rounded-lg shadow-md">
|
||||
<TuitionFeesSection
|
||||
tuitionFees={tuitionFees}
|
||||
setTuitionFees={setTuitionFees}
|
||||
discounts={discounts}
|
||||
registrationFees={registrationFees}
|
||||
handleCreate={(newData) => handleCreate(`${BE_SCHOOL_FEE_URL}`, newData, setTuitionFees)}
|
||||
handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_FEE_URL}`, id, updatedData, setTuitionFees)}
|
||||
handleDelete={(id) => handleDelete(`${BE_SCHOOL_FEE_URL}`, id, setTuitionFees)}
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-white p-6 rounded-lg shadow-md">
|
||||
<FeesSection
|
||||
fees={tuitionFees}
|
||||
setFees={setTuitionFees}
|
||||
discounts={tuitionDiscounts}
|
||||
handleCreate={(newData) => handleCreate(`${BE_SCHOOL_FEE_URL}`, newData, setTuitionFees)}
|
||||
handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_FEE_URL}`, id, updatedData, setTuitionFees)}
|
||||
handleDelete={(id) => handleDelete(`${BE_SCHOOL_FEE_URL}`, id, setTuitionFees)}
|
||||
type={1}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-lg shadow-md">
|
||||
<DiscountsSection
|
||||
discounts={tuitionDiscounts}
|
||||
setDiscounts={setTuitionDiscounts}
|
||||
handleCreate={(newData) => handleCreate(`${BE_SCHOOL_DISCOUNT_URL}`, newData, setTuitionDiscounts)}
|
||||
handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_DISCOUNT_URL}`, id, updatedData, setTuitionDiscounts)}
|
||||
handleDelete={(id) => handleDelete(`${BE_SCHOOL_DISCOUNT_URL}`, id, setTuitionDiscounts)}
|
||||
onDiscountDelete={(id) => handleDiscountDelete(id, 1)}
|
||||
type={1}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Plus, Trash, Edit3, Check, X, EyeOff, Eye } from 'lucide-react';
|
||||
import { Plus, Trash, Edit3, Check, X, EyeOff, Eye, CreditCard } from 'lucide-react';
|
||||
import Table from '@/components/Table';
|
||||
import InputTextIcon from '@/components/InputTextIcon';
|
||||
import Popup from '@/components/Popup';
|
||||
import SelectChoice from '@/components/SelectChoice';
|
||||
|
||||
const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discounts, handleCreate, handleEdit, handleDelete }) => {
|
||||
const FeesSection = ({ fees, setFees, discounts, handleCreate, handleEdit, handleDelete, type }) => {
|
||||
const [editingFee, setEditingFee] = useState(null);
|
||||
const [newFee, setNewFee] = useState(null);
|
||||
const [formData, setFormData] = useState({});
|
||||
@ -13,30 +12,27 @@ const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discou
|
||||
const [popupVisible, setPopupVisible] = useState(false);
|
||||
const [popupMessage, setPopupMessage] = useState("");
|
||||
|
||||
const paymentOptions = [
|
||||
{ value: 0, label: '1 fois' },
|
||||
{ value: 1, label: '4 fois' },
|
||||
{ value: 2, label: '10 fois' }
|
||||
];
|
||||
|
||||
const handleAddFee = () => {
|
||||
setNewFee({ id: Date.now(), name: '', base_amount: '', description: '' });
|
||||
setNewFee({ id: Date.now(), name: '', base_amount: '', description: '', validity_start_date: '', validity_end_date: '', discounts: [], type: type });
|
||||
};
|
||||
|
||||
const handleRemoveFee = (id) => {
|
||||
handleDelete(id);
|
||||
handleDelete(id)
|
||||
.then(() => {
|
||||
setFees(prevFees => prevFees.filter(fee => fee.id !== id));
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveNewFee = () => {
|
||||
if (newFee.name && newFee.base_amount) {
|
||||
const feeData = {
|
||||
...newFee,
|
||||
type: 0
|
||||
};
|
||||
|
||||
handleCreate(feeData)
|
||||
if (
|
||||
newFee.name &&
|
||||
newFee.base_amount) {
|
||||
handleCreate(newFee)
|
||||
.then((createdFee) => {
|
||||
setRegistrationFees([createdFee, ...registrationFees]);
|
||||
setFees([createdFee, ...fees]);
|
||||
setNewFee(null);
|
||||
setLocalErrors({});
|
||||
})
|
||||
@ -48,15 +44,18 @@ const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discou
|
||||
}
|
||||
});
|
||||
} else {
|
||||
setPopupMessage("Tous les champs doivent être remplis");
|
||||
setPopupMessage("Tous les champs doivent être remplis et valides");
|
||||
setPopupVisible(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateFee = (id, updatedFee) => {
|
||||
if (updatedFee.name && updatedFee.base_amount) {
|
||||
if (
|
||||
updatedFee.name &&
|
||||
updatedFee.base_amount) {
|
||||
handleEdit(id, updatedFee)
|
||||
.then(() => {
|
||||
.then((updatedFee) => {
|
||||
setFees(fees.map(fee => fee.id === id ? updatedFee : fee));
|
||||
setEditingFee(null);
|
||||
setLocalErrors({});
|
||||
})
|
||||
@ -68,13 +67,13 @@ const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discou
|
||||
}
|
||||
});
|
||||
} else {
|
||||
setPopupMessage("Tous les champs doivent être remplis");
|
||||
setPopupMessage("Tous les champs doivent être remplis et valides");
|
||||
setPopupVisible(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleActive = (id, isActive) => {
|
||||
const fee = registrationFees.find(fee => fee.id === id);
|
||||
const fee = fees.find(fee => fee.id === id);
|
||||
if (!fee) return;
|
||||
|
||||
const updatedData = {
|
||||
@ -84,7 +83,7 @@ const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discou
|
||||
|
||||
handleEdit(id, updatedData)
|
||||
.then(() => {
|
||||
setRegistrationFees(prevFees => prevFees.map(fee => fee.id === id ? { ...fee, is_active: !isActive } : fee));
|
||||
setFees(prevFees => prevFees.map(fee => fee.id === id ? { ...fee, is_active: !isActive } : fee));
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
@ -110,6 +109,19 @@ const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discou
|
||||
}
|
||||
};
|
||||
|
||||
const renderInputField = (field, value, onChange, placeholder) => (
|
||||
<div className="flex justify-center items-center h-full">
|
||||
<InputTextIcon
|
||||
name={field}
|
||||
type={field === 'base_amount' ? 'number' : 'text'}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
errorMsg={localErrors && localErrors[field] && Array.isArray(localErrors[field]) ? localErrors[field][0] : ''}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const calculateFinalAmount = (baseAmount, discountIds) => {
|
||||
const totalDiscounts = discountIds.reduce((sum, discountId) => {
|
||||
const discount = discounts.find(d => d.id === discountId);
|
||||
@ -128,32 +140,6 @@ const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discou
|
||||
return finalAmount.toFixed(2);
|
||||
};
|
||||
|
||||
const renderInputField = (field, value, onChange, placeholder) => (
|
||||
<div>
|
||||
<InputTextIcon
|
||||
name={field}
|
||||
type={field === 'base_amount' ? 'number' : 'text'}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
errorMsg={localErrors && localErrors[field] && Array.isArray(localErrors[field]) ? localErrors[field][0] : ''}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderSelectField = (field, value, options, callback, label) => (
|
||||
<div className="flex justify-center items-center h-full">
|
||||
<SelectChoice
|
||||
name={field}
|
||||
selected={value}
|
||||
options={options}
|
||||
callback={callback}
|
||||
placeHolder={label}
|
||||
choices={options}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderFeeCell = (fee, column) => {
|
||||
const isEditing = editingFee === fee.id;
|
||||
const isCreating = newFee && newFee.id === fee.id;
|
||||
@ -161,19 +147,15 @@ const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discou
|
||||
|
||||
if (isEditing || isCreating) {
|
||||
switch (column) {
|
||||
case 'LIBELLE':
|
||||
return renderInputField('name', currentData.name, handleChange, 'Libellé du frais');
|
||||
case 'MONTANT DE BASE':
|
||||
return renderInputField('base_amount', currentData.base_amount, handleChange, 'Montant');
|
||||
case 'NOM':
|
||||
return renderInputField('name', currentData.name, handleChange, 'Nom des frais');
|
||||
case 'MONTANT':
|
||||
return renderInputField('base_amount', currentData.base_amount, handleChange, 'Montant de base');
|
||||
case 'DESCRIPTION':
|
||||
return renderInputField('description', currentData.description, handleChange, 'Description');
|
||||
case 'OPTIONS DE PAIEMENT':
|
||||
return renderSelectField('payment_option', currentData.payment_option, paymentOptions, handleChange, 'Options de paiement');
|
||||
case 'REMISES':
|
||||
return renderSelectField('discounts', currentData.discounts, discounts.map(discount => ({ value: discount.id, label: discount.name })), handleChange, 'Remises');
|
||||
case 'ACTIONS':
|
||||
return (
|
||||
<div className="flex space-x-2">
|
||||
<div className="flex justify-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => (isEditing ? handleUpdateFee(editingFee, formData) : handleSaveNewFee())}
|
||||
@ -195,25 +177,24 @@ const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discou
|
||||
}
|
||||
} else {
|
||||
switch (column) {
|
||||
case 'LIBELLE':
|
||||
case 'NOM':
|
||||
return fee.name;
|
||||
case 'MONTANT DE BASE':
|
||||
case 'MONTANT':
|
||||
return fee.base_amount + ' €';
|
||||
case 'MISE A JOUR':
|
||||
return fee.updated_at_formatted;
|
||||
case 'DESCRIPTION':
|
||||
return fee.description;
|
||||
case 'OPTIONS DE PAIEMENT':
|
||||
return paymentOptions.find(option => option.value === fee.payment_option)?.label || '';
|
||||
case 'REMISES':
|
||||
const discountNames = fee.discounts
|
||||
.map(discountId => discounts.find(discount => discount.id === discountId)?.name)
|
||||
.filter(name => name)
|
||||
.join(', ');
|
||||
return discountNames;
|
||||
case 'MONTANT FINAL':
|
||||
return calculateFinalAmount(fee.base_amount, fee.discounts) + ' €';
|
||||
case 'ACTIONS':
|
||||
return (
|
||||
<div className="flex justify-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleActive(fee.id, fee.is_active)}
|
||||
className={`text-${fee.is_active ? 'green' : 'orange'}-500 hover:text-${fee.is_active ? 'green' : 'orange'}-700`}
|
||||
>
|
||||
{fee.is_active ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingFee(fee.id) || setFormData(fee)}
|
||||
@ -228,13 +209,6 @@ const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discou
|
||||
>
|
||||
<Trash className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleActive(fee.id, fee.is_active)}
|
||||
className={`text-${fee.is_active ? 'gray' : 'green'}-500 hover:text-${fee.is_active ? 'gray' : 'green'}-700`}
|
||||
>
|
||||
{fee.is_active ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
@ -244,28 +218,27 @@ const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discou
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold">Frais d'inscription</h2>
|
||||
<button type="button" onClick={handleAddFee} className="text-emerald-500 hover:text-emerald-700">
|
||||
<Plus className="w-5 h-5" />
|
||||
</button>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center mb-4">
|
||||
<CreditCard className="w-6 h-6 text-emerald-500 mr-2" />
|
||||
<h2 className="text-xl font-semibold">{type === 0 ? 'Frais d\'inscription' : 'Frais de scolarité'}</h2>
|
||||
</div>
|
||||
<Table
|
||||
data={newFee ? [newFee, ...registrationFees] : registrationFees}
|
||||
columns={[
|
||||
{ name: 'LIBELLE', label: 'Libellé' },
|
||||
{ name: 'MONTANT DE BASE', label: 'Montant' },
|
||||
{ name: 'DESCRIPTION', label: 'Description' },
|
||||
{ name: 'OPTIONS DE PAIEMENT', label: 'Options de paiement' },
|
||||
{ name: 'REMISES', label: 'Remises' },
|
||||
{ name: 'MONTANT FINAL', label: 'Montant final' },
|
||||
{ name: 'ACTIONS', label: 'Actions' }
|
||||
]}
|
||||
renderCell={renderFeeCell}
|
||||
/>
|
||||
<button type="button" onClick={handleAddFee} className="text-emerald-500 hover:text-emerald-700">
|
||||
<Plus className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<Table
|
||||
data={newFee ? [newFee, ...fees] : fees}
|
||||
columns={[
|
||||
{ name: 'NOM', label: 'Nom' },
|
||||
{ name: 'MONTANT', label: 'Montant de base' },
|
||||
{ name: 'DESCRIPTION', label: 'Description' },
|
||||
{ name: 'MISE A JOUR', label: 'date mise à jour' },
|
||||
{ name: 'ACTIONS', label: 'Actions' }
|
||||
]}
|
||||
renderCell={renderFeeCell}
|
||||
/>
|
||||
<Popup
|
||||
visible={popupVisible}
|
||||
message={popupMessage}
|
||||
@ -273,8 +246,8 @@ const RegistrationFeesSection = ({ registrationFees, setRegistrationFees, discou
|
||||
onCancel={() => setPopupVisible(false)}
|
||||
uniqueConfirmButton={true}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegistrationFeesSection;
|
||||
export default FeesSection;
|
||||
@ -1,294 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Plus, Trash, Edit3, Check, X, EyeOff, Eye } from 'lucide-react';
|
||||
import Table from '@/components/Table';
|
||||
import InputTextIcon from '@/components/InputTextIcon';
|
||||
import Popup from '@/components/Popup';
|
||||
import SelectChoice from '@/components/SelectChoice';
|
||||
|
||||
const TuitionFeesSection = ({ tuitionFees, setTuitionFees, discounts, registrationFees, handleCreate, handleEdit, handleDelete }) => {
|
||||
const [editingTuitionFee, setEditingTuitionFee] = useState(null);
|
||||
const [newTuitionFee, setNewTuitionFee] = useState(null);
|
||||
const [formData, setFormData] = useState({});
|
||||
const [localErrors, setLocalErrors] = useState({});
|
||||
const [popupVisible, setPopupVisible] = useState(false);
|
||||
const [popupMessage, setPopupMessage] = useState("");
|
||||
|
||||
const paymentOptions = [
|
||||
{ value: 0, label: '1 fois' },
|
||||
{ value: 1, label: '4 fois' },
|
||||
{ value: 2, label: '10 fois' }
|
||||
];
|
||||
|
||||
const handleAddTuitionFee = () => {
|
||||
setNewTuitionFee({ id: Date.now(), name: '', base_amount: '', description: '', validity_start_date: '', validity_end_date: '', payment_option: '', discounts: [] });
|
||||
};
|
||||
|
||||
const handleRemoveTuitionFee = (id) => {
|
||||
handleDelete(id)
|
||||
.then(() => {
|
||||
setTuitionFees(prevTuitionFees => prevTuitionFees.filter(fee => fee.id !== id));
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveNewTuitionFee = () => {
|
||||
if (
|
||||
newTuitionFee.name &&
|
||||
newTuitionFee.base_amount &&
|
||||
newTuitionFee.payment_option >= 0
|
||||
) {
|
||||
const tuitionFeeData = {
|
||||
...newTuitionFee,
|
||||
type: 1
|
||||
};
|
||||
handleCreate(tuitionFeeData)
|
||||
.then((createdTuitionFee) => {
|
||||
setTuitionFees([createdTuitionFee, ...tuitionFees]);
|
||||
setNewTuitionFee(null);
|
||||
setLocalErrors({});
|
||||
})
|
||||
.catch(error => {
|
||||
if (error && typeof error === 'object') {
|
||||
setLocalErrors(error);
|
||||
} else {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
setPopupMessage("Tous les champs doivent être remplis et valides");
|
||||
setPopupVisible(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateTuitionFee = (id, updatedTuitionFee) => {
|
||||
if (
|
||||
updatedTuitionFee.name &&
|
||||
updatedTuitionFee.base_amount &&
|
||||
updatedTuitionFee.payment_option >= 0
|
||||
) {
|
||||
handleEdit(id, updatedTuitionFee)
|
||||
.then((updatedFee) => {
|
||||
setTuitionFees(tuitionFees.map(fee => fee.id === id ? updatedFee : fee));
|
||||
setEditingTuitionFee(null);
|
||||
setLocalErrors({});
|
||||
})
|
||||
.catch(error => {
|
||||
if (error && typeof error === 'object') {
|
||||
setLocalErrors(error);
|
||||
} else {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
setPopupMessage("Tous les champs doivent être remplis et valides");
|
||||
setPopupVisible(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleActive = (id, isActive) => {
|
||||
const tuitionFee = tuitionFees.find(tuitionFee => tuitionFee.id === id);
|
||||
if (!tuitionFee) return;
|
||||
|
||||
const updatedData = {
|
||||
is_active: !isActive,
|
||||
discounts: tuitionFee.discounts
|
||||
};
|
||||
|
||||
handleEdit(id, updatedData)
|
||||
.then(() => {
|
||||
setFees(prevTuitionFees => prevTuitionFees.map(tuitionFee => tuitionFee.id === id ? { ...tuitionFee, is_active: !isActive } : tuitionFee));
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
let parsedValue = value;
|
||||
if (name === 'payment_option') {
|
||||
parsedValue = parseInt(value, 10);
|
||||
} else if (name === 'discounts') {
|
||||
parsedValue = value.split(',').map(v => parseInt(v, 10));
|
||||
}
|
||||
if (editingTuitionFee) {
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
[name]: parsedValue,
|
||||
}));
|
||||
} else if (newTuitionFee) {
|
||||
setNewTuitionFee((prevData) => ({
|
||||
...prevData,
|
||||
[name]: parsedValue,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const renderInputField = (field, value, onChange, placeholder) => (
|
||||
<div className="flex justify-center items-center h-full">
|
||||
<InputTextIcon
|
||||
name={field}
|
||||
type={field === 'base_amount' ? 'number' : 'text'}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
errorMsg={localErrors && localErrors[field] && Array.isArray(localErrors[field]) ? localErrors[field][0] : ''}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderSelectField = (field, value, options, callback, label) => (
|
||||
<div className="flex justify-center items-center h-full">
|
||||
<SelectChoice
|
||||
name={field}
|
||||
selected={value}
|
||||
options={options}
|
||||
callback={callback}
|
||||
placeHolder={label}
|
||||
choices={options}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const calculateFinalAmount = (baseAmount, discountIds) => {
|
||||
const totalDiscounts = discountIds.reduce((sum, discountId) => {
|
||||
const discount = discounts.find(d => d.id === discountId);
|
||||
if (discount) {
|
||||
if (discount.discount_type === 0) { // Currency
|
||||
return sum + parseFloat(discount.amount);
|
||||
} else if (discount.discount_type === 1) { // Percent
|
||||
return sum + (parseFloat(baseAmount) * parseFloat(discount.amount) / 100);
|
||||
}
|
||||
}
|
||||
return sum;
|
||||
}, 0);
|
||||
|
||||
const finalAmount = parseFloat(baseAmount) - totalDiscounts;
|
||||
|
||||
return finalAmount.toFixed(2);
|
||||
};
|
||||
|
||||
const renderTuitionFeeCell = (tuitionFee, column) => {
|
||||
const isEditing = editingTuitionFee === tuitionFee.id;
|
||||
const isCreating = newTuitionFee && newTuitionFee.id === tuitionFee.id;
|
||||
const currentData = isEditing ? formData : newTuitionFee;
|
||||
|
||||
if (isEditing || isCreating) {
|
||||
switch (column) {
|
||||
case 'NOM':
|
||||
return renderInputField('name', currentData.name, handleChange, 'Nom des frais de scolarité');
|
||||
case 'MONTANT DE BASE':
|
||||
return renderInputField('base_amount', currentData.base_amount, handleChange, 'Montant de base');
|
||||
case 'DESCRIPTION':
|
||||
return renderInputField('description', currentData.description, handleChange, 'Description');
|
||||
case 'OPTIONS DE PAIEMENT':
|
||||
return renderSelectField('payment_option', currentData.payment_option, paymentOptions, handleChange, 'Options de paiement');
|
||||
case 'REMISES':
|
||||
return renderSelectField('discounts', currentData.discounts, discounts.map(discount => ({ value: discount.id, label: discount.name })), handleChange, 'Remises');
|
||||
case 'ACTIONS':
|
||||
return (
|
||||
<div className="flex justify-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => (isEditing ? handleUpdateTuitionFee(editingTuitionFee, formData) : handleSaveNewTuitionFee())}
|
||||
className="text-green-500 hover:text-green-700"
|
||||
>
|
||||
<Check className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => (isEditing ? setEditingTuitionFee(null) : setNewTuitionFee(null))}
|
||||
className="text-red-500 hover:text-red-700"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
switch (column) {
|
||||
case 'NOM':
|
||||
return tuitionFee.name;
|
||||
case 'MONTANT DE BASE':
|
||||
return tuitionFee.base_amount + ' €';
|
||||
case 'DESCRIPTION':
|
||||
return tuitionFee.description;
|
||||
case 'OPTIONS DE PAIEMENT':
|
||||
return paymentOptions.find(option => option.value === tuitionFee.payment_option)?.label || '';
|
||||
case 'REMISES':
|
||||
const discountNames = tuitionFee.discounts
|
||||
.map(discountId => discounts.find(discount => discount.id === discountId)?.name)
|
||||
.filter(name => name)
|
||||
.join(', ');
|
||||
return discountNames;
|
||||
case 'MONTANT FINAL':
|
||||
return calculateFinalAmount(tuitionFee.base_amount, tuitionFee.discounts) + ' €';
|
||||
case 'ACTIONS':
|
||||
return (
|
||||
<div className="flex justify-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingTuitionFee(tuitionFee.id) || setFormData(tuitionFee)}
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
<Edit3 className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveTuitionFee(tuitionFee.id)}
|
||||
className="text-red-500 hover:text-red-700"
|
||||
>
|
||||
<Trash className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleActive(tuitionFee.id, tuitionFee.is_active)}
|
||||
className={`text-${tuitionFee.is_active ? 'gray' : 'green'}-500 hover:text-${tuitionFee.is_active ? 'gray' : 'green'}-700`}
|
||||
>
|
||||
{tuitionFee.is_active ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold">Frais de scolarité</h2>
|
||||
<button type="button" onClick={handleAddTuitionFee} className="text-emerald-500 hover:text-emerald-700">
|
||||
<Plus className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<Table
|
||||
data={newTuitionFee ? [newTuitionFee, ...tuitionFees] : tuitionFees}
|
||||
columns={[
|
||||
{ name: 'NOM', label: 'Nom' },
|
||||
{ name: 'MONTANT DE BASE', label: 'Montant de base' },
|
||||
{ name: 'DESCRIPTION', label: 'Description' },
|
||||
{ name: 'OPTIONS DE PAIEMENT', label: 'Options de paiement' },
|
||||
{ name: 'REMISES', label: 'Remises' },
|
||||
{ name: 'MONTANT FINAL', label: 'Montant final' },
|
||||
{ name: 'ACTIONS', label: 'Actions' }
|
||||
]}
|
||||
renderCell={renderTuitionFeeCell}
|
||||
/>
|
||||
<Popup
|
||||
visible={popupVisible}
|
||||
message={popupMessage}
|
||||
onConfirm={() => setPopupVisible(false)}
|
||||
onCancel={() => setPopupVisible(false)}
|
||||
uniqueConfirmButton={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TuitionFeesSection;
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Pagination from '@/components/Pagination'; // Correction du chemin d'importatio,
|
||||
|
||||
const Table = ({ data, columns, renderCell, itemsPerPage = 0, currentPage, totalPages, onPageChange, onRowClick, selectedRows, isSelectable = false }) => {
|
||||
const Table = ({ data, columns, renderCell, itemsPerPage = 0, currentPage, totalPages, onPageChange, onRowClick, selectedRows, isSelectable = false, defaultTheme='bg-emerald-50' }) => {
|
||||
const handlePageChange = (newPage) => {
|
||||
onPageChange(newPage);
|
||||
};
|
||||
@ -25,7 +25,7 @@ const Table = ({ data, columns, renderCell, itemsPerPage = 0, currentPage, total
|
||||
key={rowIndex}
|
||||
className={`
|
||||
${isSelectable ? 'cursor-pointer' : ''}
|
||||
${selectedRows?.includes(row.id) ? 'bg-emerald-500 text-white' : rowIndex % 2 === 0 ? 'bg-emerald-50' : ''}
|
||||
${selectedRows?.includes(row.id) ? 'bg-emerald-500 text-white' : rowIndex % 2 === 0 ? `${defaultTheme}` : ''}
|
||||
${isSelectable ? 'hover:bg-emerald-600' : ''}
|
||||
`}
|
||||
onClick={() => isSelectable && onRowClick && onRowClick(row)}
|
||||
|
||||
Reference in New Issue
Block a user