File size: 4,674 Bytes
24d40b9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
import { useState } from "react";
import { AlertTriangle, ArrowUpDown, Plus, Search } from "lucide-react";
import AppLayout from "@/components/layout/AppLayout";
import Header from "@/components/shared/Header";
import StockMenu from "@/components/stock/StockMenu";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table";
import { ThemeToggle } from "@/components/theme/ThemeToggle";
// Example low stock data
const lowStockItems = [
{ id: 1, name: "Riz (25kg)", sku: "RIZ-25", quantity: 8, reorderPoint: 10, price: 12000, category: "Alimentation", lastUpdated: "2023-07-15" },
{ id: 4, name: "Sucre (sac 50kg)", sku: "SUCRE-50", quantity: 2, reorderPoint: 3, price: 22000, category: "Alimentation", lastUpdated: "2023-07-18" },
{ id: 5, name: "Savon (carton 24)", sku: "SAVON-24", quantity: 6, reorderPoint: 8, price: 7500, category: "Hygiène", lastUpdated: "2023-07-14" },
];
const LowStockItems = () => {
const [search, setSearch] = useState("");
const filteredItems = lowStockItems.filter(item =>
item.name.toLowerCase().includes(search.toLowerCase()) ||
item.sku.toLowerCase().includes(search.toLowerCase())
);
return (
<AppLayout>
<div className="max-w-6xl mx-auto px-4">
<div className="flex justify-between items-center">
<Header
title="Stock Faible"
subtitle="Produits nécessitant un réapprovisionnement"
showBackButton
/>
<ThemeToggle />
</div>
<StockMenu />
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 mb-6 flex items-center gap-3">
<AlertTriangle className="text-red-500 h-5 w-5" />
<div>
<p className="text-sm font-medium">Action requise</p>
<p className="text-xs text-muted-foreground">
{lowStockItems.length} produit(s) sont en dessous du seuil d'alerte
</p>
</div>
<Button variant="outline" size="sm" className="ml-auto">
Commander
</Button>
</div>
<div className="flex items-center justify-between mb-6">
<div className="relative w-full md:w-auto flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
<Input
placeholder="Rechercher des produits..."
className="pl-10"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</div>
</div>
<div className="bg-card rounded-lg border shadow-sm overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead>Produit</TableHead>
<TableHead>SKU</TableHead>
<TableHead>Quantité</TableHead>
<TableHead>Seuil d'alerte</TableHead>
<TableHead>Prix (FCFA)</TableHead>
<TableHead>Catégorie</TableHead>
<TableHead>Dernière mise à jour</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredItems.length > 0 ? (
filteredItems.map((item) => (
<TableRow key={item.id} className="cursor-pointer hover:bg-muted/50">
<TableCell className="font-medium">{item.name}</TableCell>
<TableCell>{item.sku}</TableCell>
<TableCell className="text-destructive">{item.quantity}</TableCell>
<TableCell>{item.reorderPoint}</TableCell>
<TableCell>{item.price.toLocaleString()}</TableCell>
<TableCell>{item.category}</TableCell>
<TableCell>{item.lastUpdated}</TableCell>
<TableCell>
<Button variant="outline" size="sm">Commander</Button>
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={8} className="h-24 text-center">
Aucun produit trouvé.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
</div>
</AppLayout>
);
};
export default LowStockItems;
|