GTARH_Fonctionnel_V1
This commit is contained in:
564
src/pages/ExportPaie.tsx
Normal file
564
src/pages/ExportPaie.tsx
Normal file
@@ -0,0 +1,564 @@
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { ArrowLeft, Download, FileSpreadsheet } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import ExcelJS from 'exceljs';
|
||||
|
||||
interface CongeDetail {
|
||||
nb: number;
|
||||
dates: string;
|
||||
}
|
||||
|
||||
interface AutreConge {
|
||||
type: string;
|
||||
nb: number;
|
||||
dates: string;
|
||||
}
|
||||
|
||||
interface DataPaie {
|
||||
employe: string;
|
||||
email: string;
|
||||
service: string;
|
||||
rtt: CongeDetail;
|
||||
cp: CongeDetail;
|
||||
aap: CongeDetail;
|
||||
am: CongeDetail;
|
||||
autres: AutreConge[];
|
||||
}
|
||||
|
||||
const ExportPaie = () => {
|
||||
const navigate = useNavigate();
|
||||
const [mois, setMois] = useState(new Date().getMonth() + 1);
|
||||
const [annee, setAnnee] = useState(new Date().getFullYear());
|
||||
const [dataPaie, setDataPaie] = useState<DataPaie[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const moisOptions = [
|
||||
{ value: 1, label: 'Janvier' }, { value: 2, label: 'Février' },
|
||||
{ value: 3, label: 'Mars' }, { value: 4, label: 'Avril' },
|
||||
{ value: 5, label: 'Mai' }, { value: 6, label: 'Juin' },
|
||||
{ value: 7, label: 'Juillet' }, { value: 8, label: 'Août' },
|
||||
{ value: 9, label: 'Septembre' }, { value: 10, label: 'Octobre' },
|
||||
{ value: 11, label: 'Novembre' }, { value: 12, label: 'Décembre' }
|
||||
];
|
||||
|
||||
const genererRapport = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch(
|
||||
`/api/export/paie?mois=${mois}&annee=${annee}`,
|
||||
{ headers: { 'Authorization': `Bearer ${token}` } }
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
console.log('📊 Données reçues:', data);
|
||||
|
||||
setDataPaie(data);
|
||||
toast.success(`Rapport généré avec succès (${data.length} employé${data.length > 1 ? 's' : ''})`);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur:', error);
|
||||
toast.error("Erreur lors de la génération du rapport");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const exporterExcel = async () => {
|
||||
if (dataPaie.length === 0) return toast.error("Aucune donnée à exporter");
|
||||
|
||||
const moisLabel = moisOptions.find(m => m.value === mois)?.label || 'Inconnu';
|
||||
|
||||
try {
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
const worksheet = workbook.addWorksheet(`Congés ${moisLabel}`);
|
||||
|
||||
// ✅ MODIFICATION : Colonnes sans Email
|
||||
worksheet.columns = [
|
||||
{ header: 'Collaborateur', key: 'collaborateur', width: 20 },
|
||||
{ header: 'Service', key: 'service', width: 20 },
|
||||
{ header: 'RTT Nb', key: 'rtt_nb', width: 10 },
|
||||
{ header: 'RTT Dates', key: 'rtt_dates', width: 25 },
|
||||
{ header: 'CP Nb', key: 'cp_nb', width: 10 },
|
||||
{ header: 'CP Dates', key: 'cp_dates', width: 25 },
|
||||
{ header: 'AAP Nb', key: 'aap_nb', width: 10 },
|
||||
{ header: 'AAP Dates', key: 'aap_dates', width: 25 },
|
||||
{ header: 'AM Nb', key: 'am_nb', width: 10 },
|
||||
{ header: 'AM Dates', key: 'am_dates', width: 25 },
|
||||
{ header: 'Autres Type', key: 'autres_type', width: 20 },
|
||||
{ header: 'Autres Nb', key: 'autres_nb', width: 10 },
|
||||
{ header: 'Autres Dates', key: 'autres_dates', width: 30 }
|
||||
];
|
||||
|
||||
// Style de l'en-tête
|
||||
worksheet.getRow(1).height = 35;
|
||||
worksheet.getRow(1).font = { bold: true, color: { argb: 'FFFFFFFF' }, size: 12 };
|
||||
worksheet.getRow(1).alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
|
||||
worksheet.getRow(1).fill = {
|
||||
type: 'pattern',
|
||||
pattern: 'solid',
|
||||
fgColor: { argb: 'FF7e5aa2' }
|
||||
};
|
||||
|
||||
// Bordures ÉPAISSES pour l'en-tête
|
||||
worksheet.getRow(1).eachCell((cell) => {
|
||||
cell.border = {
|
||||
top: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
left: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
bottom: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
right: { style: 'medium', color: { argb: 'FF000000' } }
|
||||
};
|
||||
});
|
||||
|
||||
let currentRow = 2;
|
||||
|
||||
// Ajouter les données avec fusion de cellules
|
||||
dataPaie.forEach((row, employeIndex) => {
|
||||
const startRow = currentRow;
|
||||
|
||||
// ✅ MODIFICATION : Extraire uniquement le nom (dernier mot)
|
||||
const nomComplet = row.employe.split(' ');
|
||||
const nomSeul = nomComplet[nomComplet.length - 1]; // Prend le dernier mot (le nom)
|
||||
|
||||
// Calculer le nombre maximum de lignes nécessaires pour cet employé
|
||||
const rttDatesArray = row.rtt?.dates ? row.rtt.dates.split(' ; ') : [];
|
||||
const cpDatesArray = row.cp?.dates ? row.cp.dates.split(' ; ') : [];
|
||||
const aapDatesArray = row.aap?.dates ? row.aap.dates.split(' ; ') : [];
|
||||
const amDatesArray = row.am?.dates ? row.am.dates.split(' ; ') : [];
|
||||
|
||||
// Gérer les "Autres"
|
||||
let autresDatesArray: string[][] = [];
|
||||
if (row.autres && row.autres.length > 0) {
|
||||
autresDatesArray = row.autres.map(a => a.dates.split(' ; '));
|
||||
}
|
||||
const maxAutresDates = Math.max(...autresDatesArray.map(arr => arr.length), 1);
|
||||
|
||||
const maxRows = Math.max(
|
||||
rttDatesArray.length || 1,
|
||||
cpDatesArray.length || 1,
|
||||
aapDatesArray.length || 1,
|
||||
amDatesArray.length || 1,
|
||||
maxAutresDates
|
||||
);
|
||||
|
||||
// Ajouter les lignes nécessaires
|
||||
for (let i = 0; i < maxRows; i++) {
|
||||
const rowData: any = {};
|
||||
|
||||
// Première ligne : inclure nom et service (sans email)
|
||||
if (i === 0) {
|
||||
rowData.collaborateur = nomSeul; // ✅ Uniquement le nom
|
||||
rowData.service = row.service;
|
||||
rowData.rtt_nb = row.rtt?.nb || 0;
|
||||
rowData.cp_nb = row.cp?.nb || 0;
|
||||
rowData.aap_nb = row.aap?.nb || 0;
|
||||
rowData.am_nb = row.am?.nb || 0;
|
||||
|
||||
// Autres (première ligne)
|
||||
if (row.autres && row.autres.length > 0) {
|
||||
rowData.autres_type = row.autres.map(a => a.type).join('\n');
|
||||
rowData.autres_nb = row.autres.map(a => a.nb).join('\n');
|
||||
}
|
||||
} else {
|
||||
rowData.collaborateur = '';
|
||||
rowData.service = '';
|
||||
rowData.rtt_nb = '';
|
||||
rowData.cp_nb = '';
|
||||
rowData.aap_nb = '';
|
||||
rowData.am_nb = '';
|
||||
rowData.autres_type = '';
|
||||
rowData.autres_nb = '';
|
||||
}
|
||||
|
||||
// Dates RTT
|
||||
rowData.rtt_dates = rttDatesArray[i] || '';
|
||||
|
||||
// Dates CP
|
||||
rowData.cp_dates = cpDatesArray[i] || '';
|
||||
|
||||
// Dates AAP
|
||||
rowData.aap_dates = aapDatesArray[i] || '';
|
||||
|
||||
// Dates AM
|
||||
rowData.am_dates = amDatesArray[i] || '';
|
||||
|
||||
// Dates Autres
|
||||
if (row.autres && row.autres.length > 0) {
|
||||
const allAutresDates = row.autres.map(a => {
|
||||
const dates = a.dates.split(' ; ');
|
||||
return dates[i] || '';
|
||||
}).filter(d => d !== '').join(' | ');
|
||||
rowData.autres_dates = allAutresDates;
|
||||
} else {
|
||||
rowData.autres_dates = '';
|
||||
}
|
||||
|
||||
worksheet.addRow(rowData);
|
||||
currentRow++;
|
||||
}
|
||||
|
||||
const endRow = currentRow - 1;
|
||||
|
||||
// ✅ MODIFICATION : Fusionner les cellules (ajusté pour la nouvelle structure)
|
||||
if (maxRows > 1) {
|
||||
worksheet.mergeCells(`A${startRow}:A${endRow}`); // Collaborateur
|
||||
worksheet.mergeCells(`B${startRow}:B${endRow}`); // Service
|
||||
worksheet.mergeCells(`C${startRow}:C${endRow}`); // RTT Nb
|
||||
worksheet.mergeCells(`E${startRow}:E${endRow}`); // CP Nb
|
||||
worksheet.mergeCells(`G${startRow}:G${endRow}`); // AAP Nb
|
||||
worksheet.mergeCells(`I${startRow}:I${endRow}`); // AM Nb
|
||||
worksheet.mergeCells(`K${startRow}:K${endRow}`); // Autres Type
|
||||
worksheet.mergeCells(`L${startRow}:L${endRow}`); // Autres Nb
|
||||
}
|
||||
|
||||
// Appliquer les styles pour ce groupe de lignes
|
||||
for (let r = startRow; r <= endRow; r++) {
|
||||
const currentRowObj = worksheet.getRow(r);
|
||||
currentRowObj.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
|
||||
|
||||
// Hauteur de ligne
|
||||
currentRowObj.height = 25;
|
||||
|
||||
// ✅ MODIFICATION : Couleurs ajustées (colonnes décalées)
|
||||
currentRowObj.getCell(3).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE9D5FF' } }; // RTT Nb
|
||||
currentRowObj.getCell(4).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE9D5FF' } }; // RTT Dates
|
||||
|
||||
currentRowObj.getCell(5).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFDBEAFE' } }; // CP Nb
|
||||
currentRowObj.getCell(6).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFDBEAFE' } }; // CP Dates
|
||||
|
||||
currentRowObj.getCell(7).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFD1FAE5' } }; // AAP Nb
|
||||
currentRowObj.getCell(8).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFD1FAE5' } }; // AAP Dates
|
||||
|
||||
currentRowObj.getCell(9).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEE2E2' } }; // AM Nb
|
||||
currentRowObj.getCell(10).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEE2E2' } }; // AM Dates
|
||||
|
||||
currentRowObj.getCell(11).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEF3C7' } }; // Autres Type
|
||||
currentRowObj.getCell(12).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEF3C7' } }; // Autres Nb
|
||||
currentRowObj.getCell(13).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFEF3C7' } }; // Autres Dates
|
||||
|
||||
// Bordures ÉPAISSES pour toutes les cellules
|
||||
currentRowObj.eachCell((cell) => {
|
||||
cell.border = {
|
||||
top: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
left: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
bottom: { style: 'medium', color: { argb: 'FF000000' } },
|
||||
right: { style: 'medium', color: { argb: 'FF000000' } }
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Générer le fichier Excel
|
||||
const buffer = await workbook.xlsx.writeBuffer();
|
||||
const blob = new Blob([buffer], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
});
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `conges_paie_${moisLabel}_${annee}.xlsx`;
|
||||
link.click();
|
||||
|
||||
toast.success("Export Excel réussi avec fusion de cellules !");
|
||||
} catch (error) {
|
||||
console.error('Erreur export Excel:', error);
|
||||
toast.error("Erreur lors de l'export Excel");
|
||||
}
|
||||
};
|
||||
const exporterCSV = () => {
|
||||
if (dataPaie.length === 0) return toast.error("Aucune donnée à exporter");
|
||||
|
||||
const headers = [
|
||||
'Employé', 'Email', 'Service',
|
||||
'RTT Nb', 'RTT Dates',
|
||||
'CP Nb', 'CP Dates',
|
||||
'AAP Nb', 'AAP Dates',
|
||||
'AM Nb', 'AM Dates',
|
||||
'Autres Type', 'Autres Nb', 'Autres Dates'
|
||||
];
|
||||
|
||||
const rows = dataPaie.map(row => {
|
||||
const baseData = [
|
||||
row.employe,
|
||||
row.email,
|
||||
row.service,
|
||||
row.rtt?.nb || 0,
|
||||
row.rtt?.dates || '',
|
||||
row.cp?.nb || 0,
|
||||
row.cp?.dates || '',
|
||||
row.aap?.nb || 0,
|
||||
row.aap?.dates || '',
|
||||
row.am?.nb || 0,
|
||||
row.am?.dates || ''
|
||||
];
|
||||
|
||||
if (row.autres && row.autres.length > 0) {
|
||||
const autresTypes = row.autres.map(a => a.type).join(' | ');
|
||||
const autresNb = row.autres.map(a => a.nb).join(' | ');
|
||||
const autresDates = row.autres.map(a => a.dates).join(' | ');
|
||||
return [...baseData, autresTypes, autresNb, autresDates];
|
||||
} else {
|
||||
return [...baseData, '', '', ''];
|
||||
}
|
||||
});
|
||||
|
||||
const csvContent = [
|
||||
headers.join(';'),
|
||||
...rows.map(row => row.join(';'))
|
||||
].join('\n');
|
||||
|
||||
const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `conges_paie_${moisOptions.find(m => m.value === mois)?.label}_${annee}.csv`;
|
||||
link.click();
|
||||
toast.success("Export CSV réussi");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" size="sm" onClick={() => navigate("/dashboard")}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
|
||||
<FileSpreadsheet className="w-5 h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Export pour fiche de paie</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<Card className="shadow-elegant border-0 mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle>Paramètres d'export</CardTitle>
|
||||
<CardDescription>Sélectionnez la période pour générer le rapport</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label>Mois</Label>
|
||||
<Select value={mois.toString()} onValueChange={(value) => setMois(parseInt(value))}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{moisOptions.map(option => (
|
||||
<SelectItem key={option.value} value={option.value.toString()}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Année</Label>
|
||||
<Select value={annee.toString()} onValueChange={(value) => setAnnee(parseInt(value))}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{[2023, 2024, 2025, 2026].map(year => (
|
||||
<SelectItem key={year} value={year.toString()}>{year}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{/* Bouton Générer le rapport toujours affiché avec fond mauve */}
|
||||
<div className="flex items-end">
|
||||
<Button
|
||||
onClick={genererRapport}
|
||||
disabled={loading}
|
||||
className="w-full bg-[#7e5aa2] hover:bg-[#6b4891] text-white transition-smooth shadow-elegant"
|
||||
>
|
||||
{loading ? 'Génération...' : 'Générer le rapport'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Bouton Export Excel toujours affiché, grisé s’il n’y a pas de données */}
|
||||
<div className="flex gap-4 mb-6">
|
||||
<Button
|
||||
onClick={exporterExcel}
|
||||
disabled={dataPaie.length === 0}
|
||||
variant="default"
|
||||
className="bg-[#7e5aa2] hover:bg-[#6b4891] text-white transition-smooth shadow-elegant"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />Export Excel (avec couleurs)
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Tableau des données uniquement si data présente */}
|
||||
{dataPaie.length > 0 ? (
|
||||
<Card className="shadow-card border-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Rapport des congés - {moisOptions.find(m => m.value === mois)?.label} {annee}</CardTitle>
|
||||
<CardDescription>
|
||||
AAP = Absence autorisée payée (ex : enfant malade, récup de JPOFS, etc) • AM = Arrêt maladie
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<div className="border-[2px] border-black rounded-lg overflow-hidden">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b-[2px] border-black bg-gray-100">
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-left">
|
||||
Collaborateur
|
||||
</th>
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-left">
|
||||
Service
|
||||
</th>
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
|
||||
RTT<br />
|
||||
<span className="text-xs font-normal">(Nb / Dates)</span>
|
||||
</th>
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
|
||||
CP<br />
|
||||
<span className="text-xs font-normal">(Nb / Dates)</span>
|
||||
</th>
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
|
||||
AAP<br />
|
||||
<span className="text-xs font-normal">(Nb / Dates)</span>
|
||||
</th>
|
||||
<th className="font-bold text-black border-r-[2px] border-black p-4 text-center">
|
||||
AM<br />
|
||||
<span className="text-xs font-normal">(Nb / Dates)</span>
|
||||
</th>
|
||||
<th className="font-bold text-black p-4 text-center">
|
||||
Autres<br />
|
||||
<span className="text-xs font-normal">(Type / Nb / Dates)</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataPaie.map((row, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className="border-b-[2px] border-black last:border-b-0 hover:bg-gray-50"
|
||||
>
|
||||
<td className="font-medium border-r-[2px] border-black p-4 align-top bg-white">
|
||||
{row.employe}
|
||||
</td>
|
||||
<td className="border-r-[2px] border-black p-4 align-top bg-white">
|
||||
{row.service}
|
||||
</td>
|
||||
<td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
|
||||
{row.rtt && row.rtt.nb > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-lg">{row.rtt.nb}</div>
|
||||
<div className="text-xs text-gray-600 space-y-1">
|
||||
{row.rtt.dates.split(' ; ').map((date, idx) => (
|
||||
<div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
|
||||
{date}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
|
||||
{row.cp && row.cp.nb > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-lg">{row.cp.nb}</div>
|
||||
<div className="text-xs text-gray-600 space-y-1">
|
||||
{row.cp.dates.split(' ; ').map((date, idx) => (
|
||||
<div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
|
||||
{date}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
|
||||
{row.aap && row.aap.nb > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-lg">{row.aap.nb}</div>
|
||||
<div className="text-xs text-gray-600 space-y-1">
|
||||
{row.aap.dates.split(' ; ').map((date, idx) => (
|
||||
<div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
|
||||
{date}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center bg-white border-r-[2px] border-black p-4 align-top">
|
||||
{row.am && row.am.nb > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-lg">{row.am.nb}</div>
|
||||
<div className="text-xs text-gray-600 space-y-1">
|
||||
{row.am.dates.split(' ; ').map((date, idx) => (
|
||||
<div key={idx} className="py-1 border-t border-gray-300 first:border-t-0">
|
||||
{date}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center bg-white p-4 align-top">
|
||||
{row.autres && row.autres.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{row.autres.map((autre, idx) => (
|
||||
<div key={idx} className="space-y-2 pb-3 border-b-[2px] border-gray-300 last:border-0 last:pb-0">
|
||||
<div className="text-xs font-medium text-gray-700">{autre.type}</div>
|
||||
<div className="font-semibold text-lg">{autre.nb}</div>
|
||||
<div className="text-xs text-gray-600 space-y-1">
|
||||
{autre.dates.split(' ; ').map((date, dateIdx) => (
|
||||
<div key={dateIdx} className="py-1 border-t border-gray-300 first:border-t-0">
|
||||
{date}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-12 text-center">
|
||||
<FileSpreadsheet className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
|
||||
<p className="text-muted-foreground text-lg">Sélectionnez une période et cliquez sur "Générer le rapport"</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExportPaie;
|
||||
Reference in New Issue
Block a user