mirror of
https://github.com/R0m1k3/LogiFlow.git
synced 2026-10-23 15:08:22 +02:00
feat: Add publicities management page with year/month filtering, list/calendar views, and CRUD functionality.
This commit is contained in:
Michael committed
1 parent
cca262230e
commit
1df477927a
1 file changed
+203
-154
+203
-154
@@ -1,6 +1,6 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
import { Plus, Calendar, Edit, Trash2, Eye, Filter, Grid, List } from "lucide-react";
|
import { Plus, Calendar, Edit, Trash2, Eye, Filter, Grid, List, Download } from "lucide-react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
@@ -56,10 +56,10 @@ export default function Publicities() {
|
|||||||
// CRITICAL FIX: Force frontend sorting by pubNumber to ensure correct order
|
// CRITICAL FIX: Force frontend sorting by pubNumber to ensure correct order
|
||||||
const sortedData = Array.isArray(data)
|
const sortedData = Array.isArray(data)
|
||||||
? data.sort((a, b) => {
|
? data.sort((a, b) => {
|
||||||
const numA = parseInt(a.pubNumber) || 0;
|
const numA = parseInt(a.pubNumber) || 0;
|
||||||
const numB = parseInt(b.pubNumber) || 0;
|
const numB = parseInt(b.pubNumber) || 0;
|
||||||
return numA - numB;
|
return numA - numB;
|
||||||
})
|
})
|
||||||
: [];
|
: [];
|
||||||
|
|
||||||
console.log('📢 Publicities after frontend sort:', {
|
console.log('📢 Publicities after frontend sort:', {
|
||||||
@@ -256,6 +256,49 @@ export default function Publicities() {
|
|||||||
setSelectedPublicity(null);
|
setSelectedPublicity(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Export CSV function for current year data
|
||||||
|
const exportToCSV = () => {
|
||||||
|
if (!publicities || publicities.length === 0) {
|
||||||
|
toast({ variant: "destructive", description: "Aucune donnée à exporter" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const headers = ["N° PUB", "Désignation", "Date Début", "Date Fin", "Année", "Statut", "Magasins", "Créé le"];
|
||||||
|
|
||||||
|
const rows = publicities.map(pub => {
|
||||||
|
const now = new Date();
|
||||||
|
const start = safeDate(pub.startDate);
|
||||||
|
const end = safeDate(pub.endDate);
|
||||||
|
const status = start && end && now >= start && now <= end ? "En cours"
|
||||||
|
: start && start > now ? "À venir"
|
||||||
|
: "Terminée";
|
||||||
|
const stores = pub.participations.map(p => p.group?.name || "").filter(Boolean).join(", ");
|
||||||
|
|
||||||
|
return [
|
||||||
|
pub.pubNumber,
|
||||||
|
`"${(pub.designation || "").replace(/"/g, '""')}"`,
|
||||||
|
safeFormat(pub.startDate, "dd/MM/yyyy"),
|
||||||
|
safeFormat(pub.endDate, "dd/MM/yyyy"),
|
||||||
|
pub.year,
|
||||||
|
status,
|
||||||
|
`"${stores}"`,
|
||||||
|
safeFormat(pub.createdAt, "dd/MM/yyyy HH:mm")
|
||||||
|
].join(";");
|
||||||
|
});
|
||||||
|
|
||||||
|
// UTF-8 BOM for Excel compatibility with French accents
|
||||||
|
const csvContent = "\uFEFF" + headers.join(";") + "\n" + rows.join("\n");
|
||||||
|
const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8" });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = url;
|
||||||
|
link.download = `publicites_${selectedYear}.csv`;
|
||||||
|
link.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
|
||||||
|
toast({ description: `Export CSV de ${publicities.length} publicités réussi` });
|
||||||
|
};
|
||||||
|
|
||||||
const canCreateOrEdit = user?.role === 'admin' || user?.role === 'manager';
|
const canCreateOrEdit = user?.role === 'admin' || user?.role === 'manager';
|
||||||
const canDelete = user?.role === 'admin';
|
const canDelete = user?.role === 'admin';
|
||||||
|
|
||||||
@@ -275,82 +318,88 @@ export default function Publicities() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
{/* View Mode Toggle */}
|
{/* View Mode Toggle */}
|
||||||
<div className="flex items-center bg-gray-100 rounded-lg p-1">
|
<div className="flex items-center bg-gray-100 rounded-lg p-1">
|
||||||
|
<Button
|
||||||
|
variant={viewMode === 'list' ? 'default' : 'ghost'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setViewMode('list')}
|
||||||
|
className="h-8"
|
||||||
|
>
|
||||||
|
<List className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={viewMode === 'calendar' ? 'default' : 'ghost'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setViewMode('calendar')}
|
||||||
|
className="h-8"
|
||||||
|
>
|
||||||
|
<Grid className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Year Overview Toggle */}
|
||||||
<Button
|
<Button
|
||||||
variant={viewMode === 'list' ? 'default' : 'ghost'}
|
variant={showYearOverview ? 'default' : 'outline'}
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setViewMode('list')}
|
onClick={() => setShowYearOverview(!showYearOverview)}
|
||||||
className="h-8"
|
className="h-8"
|
||||||
>
|
>
|
||||||
<List className="h-4 w-4" />
|
<Calendar className="h-4 w-4 mr-2" />
|
||||||
|
Vue d'ensemble
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
|
||||||
variant={viewMode === 'calendar' ? 'default' : 'ghost'}
|
{/* Year Filter */}
|
||||||
size="sm"
|
<div className="flex items-center gap-2">
|
||||||
onClick={() => setViewMode('calendar')}
|
<Filter className="h-4 w-4 text-gray-500" />
|
||||||
className="h-8"
|
<Select
|
||||||
>
|
value={selectedYear.toString()}
|
||||||
<Grid className="h-4 w-4" />
|
onValueChange={(value) => setSelectedYear(parseInt(value))}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-32">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{yearOptions.map((year) => (
|
||||||
|
<SelectItem key={year} value={year.toString()}>
|
||||||
|
{year}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Month Filter (only for calendar view) */}
|
||||||
|
{viewMode === 'calendar' && (
|
||||||
|
<Select
|
||||||
|
value={selectedMonth.toString()}
|
||||||
|
onValueChange={(value) => setSelectedMonth(parseInt(value))}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-36">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{monthOptions.map((month) => (
|
||||||
|
<SelectItem key={month.value} value={month.value.toString()}>
|
||||||
|
{month.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Export CSV Button */}
|
||||||
|
<Button variant="outline" onClick={exportToCSV} className="h-9">
|
||||||
|
<Download className="h-4 w-4 mr-2" />
|
||||||
|
Exporter CSV
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Year Overview Toggle */}
|
{canModify && (
|
||||||
<Button
|
<Button onClick={() => setIsCreateModalOpen(true)} className="bg-green-600 hover:bg-green-700 text-white shadow-md">
|
||||||
variant={showYearOverview ? 'default' : 'outline'}
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
size="sm"
|
Nouvelle publicité
|
||||||
onClick={() => setShowYearOverview(!showYearOverview)}
|
</Button>
|
||||||
className="h-8"
|
)}
|
||||||
>
|
|
||||||
<Calendar className="h-4 w-4 mr-2" />
|
|
||||||
Vue d'ensemble
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{/* Year Filter */}
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Filter className="h-4 w-4 text-gray-500" />
|
|
||||||
<Select
|
|
||||||
value={selectedYear.toString()}
|
|
||||||
onValueChange={(value) => setSelectedYear(parseInt(value))}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="w-32">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{yearOptions.map((year) => (
|
|
||||||
<SelectItem key={year} value={year.toString()}>
|
|
||||||
{year}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Month Filter (only for calendar view) */}
|
|
||||||
{viewMode === 'calendar' && (
|
|
||||||
<Select
|
|
||||||
value={selectedMonth.toString()}
|
|
||||||
onValueChange={(value) => setSelectedMonth(parseInt(value))}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="w-36">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{monthOptions.map((month) => (
|
|
||||||
<SelectItem key={month.value} value={month.value.toString()}>
|
|
||||||
{month.label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{canModify && (
|
|
||||||
<Button onClick={() => setIsCreateModalOpen(true)} className="bg-green-600 hover:bg-green-700 text-white shadow-md">
|
|
||||||
<Plus className="mr-2 h-4 w-4" />
|
|
||||||
Nouvelle publicité
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -422,100 +471,100 @@ export default function Publicities() {
|
|||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{/* Months Grid */}
|
{/* Months Grid */}
|
||||||
<div className="grid grid-cols-12 gap-2">
|
<div className="grid grid-cols-12 gap-2">
|
||||||
{Array.from({ length: 12 }, (_, monthIndex) => {
|
{Array.from({ length: 12 }, (_, monthIndex) => {
|
||||||
const monthName = format(new Date(selectedYear, monthIndex, 1), 'MMM', { locale: fr });
|
const monthName = format(new Date(selectedYear, monthIndex, 1), 'MMM', { locale: fr });
|
||||||
const monthWeeks = yearWeeks.filter(week => week.month === monthIndex);
|
const monthWeeks = yearWeeks.filter(week => week.month === monthIndex);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={monthIndex} className="space-y-2">
|
<div key={monthIndex} className="space-y-2">
|
||||||
<div className="text-xs font-medium text-gray-600 text-center">
|
<div className="text-xs font-medium text-gray-600 text-center">
|
||||||
{monthName}
|
{monthName}
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
{monthWeeks.map((week, weekIndex) => {
|
{monthWeeks.map((week, weekIndex) => {
|
||||||
const hasPublicity = week.publicities.length > 0;
|
const hasPublicity = week.publicities.length > 0;
|
||||||
const storeColors = week.storeColors;
|
const storeColors = week.storeColors;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={`${monthIndex}-${weekIndex}-${week.weekNumber}`}
|
key={`${monthIndex}-${weekIndex}-${week.weekNumber}`}
|
||||||
className={`
|
className={`
|
||||||
h-8 rounded border text-xs flex flex-col items-center justify-center cursor-pointer relative
|
h-8 rounded border text-xs flex flex-col items-center justify-center cursor-pointer relative
|
||||||
${hasPublicity
|
${hasPublicity
|
||||||
? 'bg-blue-50 border-blue-200 text-blue-800'
|
? 'bg-blue-50 border-blue-200 text-blue-800'
|
||||||
: 'bg-gray-50 border-gray-200 text-gray-500'
|
: 'bg-gray-50 border-gray-200 text-gray-500'
|
||||||
}
|
}
|
||||||
hover:shadow-sm transition-shadow
|
hover:shadow-sm transition-shadow
|
||||||
`}
|
`}
|
||||||
title={`Semaine ${week.weekNumber} (${format(week.weekStart, 'dd/MM', { locale: fr })} - ${format(week.weekEnd, 'dd/MM', { locale: fr })}) - ${hasPublicity ? `${week.publicities.map(p => p.pubNumber).join(', ')}` : 'Aucune publicité'}`}
|
title={`Semaine ${week.weekNumber} (${format(week.weekStart, 'dd/MM', { locale: fr })} - ${format(week.weekEnd, 'dd/MM', { locale: fr })}) - ${hasPublicity ? `${week.publicities.map(p => p.pubNumber).join(', ')}` : 'Aucune publicité'}`}
|
||||||
>
|
>
|
||||||
<span className="text-xs font-medium">{week.weekNumber}</span>
|
<span className="text-xs font-medium">{week.weekNumber}</span>
|
||||||
{/* Store participation indicators */}
|
{/* Store participation indicators */}
|
||||||
{storeColors.length > 0 && (
|
{storeColors.length > 0 && (
|
||||||
<div className="absolute top-0.5 right-0.5 flex flex-wrap gap-0.5 max-w-[16px]">
|
<div className="absolute top-0.5 right-0.5 flex flex-wrap gap-0.5 max-w-[16px]">
|
||||||
{storeColors.slice(0, 4).map((color, idx) => (
|
{storeColors.slice(0, 4).map((color, idx) => (
|
||||||
<div
|
<div
|
||||||
key={idx}
|
key={idx}
|
||||||
className="w-1.5 h-1.5 rounded-full"
|
className="w-1.5 h-1.5 rounded-full"
|
||||||
style={{ backgroundColor: color }}
|
style={{ backgroundColor: color }}
|
||||||
title={`Magasin ${idx + 1}`}
|
title={`Magasin ${idx + 1}`}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
{storeColors.length > 4 && (
|
{storeColors.length > 4 && (
|
||||||
<div
|
<div
|
||||||
className="w-1.5 h-1.5 rounded-full bg-gray-400 text-white text-xs flex items-center justify-center"
|
className="w-1.5 h-1.5 rounded-full bg-gray-400 text-white text-xs flex items-center justify-center"
|
||||||
title={`+${storeColors.length - 4} autres magasins`}
|
title={`+${storeColors.length - 4} autres magasins`}
|
||||||
>
|
>
|
||||||
+
|
+
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Legend */}
|
||||||
|
<div className="space-y-2 pt-2 border-t">
|
||||||
|
<div className="flex items-center justify-between text-sm text-gray-600">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-4 h-4 bg-blue-50 border border-blue-200 rounded"></div>
|
||||||
|
<span>Semaine avec publicité</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-4 h-4 bg-gray-50 border border-gray-200 rounded"></div>
|
||||||
|
<span>Semaine sans publicité</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Legend */}
|
|
||||||
<div className="space-y-2 pt-2 border-t">
|
|
||||||
<div className="flex items-center justify-between text-sm text-gray-600">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="w-4 h-4 bg-blue-50 border border-blue-200 rounded"></div>
|
<div className="flex gap-1">
|
||||||
<span>Semaine avec publicité</span>
|
{groups.slice(0, 3).map(group => (
|
||||||
</div>
|
<div
|
||||||
<div className="flex items-center gap-2">
|
key={group.id}
|
||||||
<div className="w-4 h-4 bg-gray-50 border border-gray-200 rounded"></div>
|
className="w-2 h-2 rounded-full"
|
||||||
<span>Semaine sans publicité</span>
|
style={{ backgroundColor: group?.color || '#666666' }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span>Indicateurs magasins (coin supérieur droit)</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-4 text-xs text-gray-500">
|
||||||
<div className="flex gap-1">
|
<span>• Survolez les semaines pour voir les détails des publicités</span>
|
||||||
{groups.slice(0, 3).map(group => (
|
|
||||||
<div
|
|
||||||
key={group.id}
|
|
||||||
className="w-2 h-2 rounded-full"
|
|
||||||
style={{ backgroundColor: group?.color || '#666666' }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<span>Indicateurs magasins (coin supérieur droit)</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-4 text-xs text-gray-500">
|
|
||||||
<span>• Survolez les semaines pour voir les détails des publicités</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
|
|||||||
Reference in new issue
Block a user