Add helpful tips to explain icon functions for product stock status

Adds tooltips to the "Mark out of stock" and "Restore stock" icons on the DlcPage to clarify their functionality and distinguish between "expired" and "out of stock" states.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f9197b9b-a5b3-4469-a27d-930a9e9ee736
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/f9197b9b-a5b3-4469-a27d-930a9e9ee736/i2gFnxm
This commit is contained in:
michaelschal committed 2025-08-18 10:03:24 +00:00
1 parent e5d66bd1d5
commit 4581b4239d
2 files changed
+44 -18

No files matched your search

+43 -18
View File
@@ -13,6 +13,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { AlertTriangle, Plus, Eye, Edit, Trash2, CheckCircle, Package, Clock, AlertCircle, Filter, Download, FileText, PackageX, RotateCcw } from "lucide-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
@@ -856,28 +857,52 @@ export default function DlcPage() {
{/* Bouton Stock épuisé - accessible à tous */}
{!product.stockEpuise && product.status !== "valides" && (
<Button
variant="outline"
size="sm"
onClick={() => handleMarkStockEpuise(product.id)}
disabled={markStockEpuiseMutation.isPending}
className="border-yellow-300 text-yellow-700 hover:bg-yellow-50"
>
<PackageX className="w-4 h-4" />
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={() => handleMarkStockEpuise(product.id)}
disabled={markStockEpuiseMutation.isPending}
className="border-yellow-300 text-yellow-700 hover:bg-yellow-50"
>
<PackageX className="w-4 h-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Marquer comme stock épuisé</p>
<p className="text-xs text-muted-foreground">
Indique que ce produit n'est plus en stock (différent de périmé)
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{/* Bouton Restaurer stock - réservé aux admins, directeurs et managers */}
{product.stockEpuise && (user?.role === 'admin' || user?.role === 'manager' || user?.role === 'directeur') && (
<Button
variant="outline"
size="sm"
onClick={() => handleRestoreStock(product.id)}
disabled={restoreStockMutation.isPending}
className="border-blue-300 text-blue-700 hover:bg-blue-50"
>
<RotateCcw className="w-4 h-4" />
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={() => handleRestoreStock(product.id)}
disabled={restoreStockMutation.isPending}
className="border-blue-300 text-blue-700 hover:bg-blue-50"
>
<RotateCcw className="w-4 h-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Restaurer le stock</p>
<p className="text-xs text-muted-foreground">
Marquer ce produit comme à nouveau disponible en stock
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
<Button
variant="destructive"