Michael/LogiFlow
1
0 Fork 0
mirror of https://github.com/R0m1k3/LogiFlow.git synced 2026-10-20 21:49:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #243 from R0m1k3/1.1

Browse Source 
Reduce the size of displayed items in daily modals
This commit is contained in:
LogiFlow authored and GitHub committed 2025-08-18 17:30:25 +02:00
2 parents 11dcdbeae3 79c3a609d9
commit bdc2e56992
2 files changed
+34 -42
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

attached_assets/{07B175F4-49BB-4566-9028-A277336AD485}_1755528677101.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

client/src/components/CalendarGrid.tsx
+34 -42
View File
@@ -150,41 +150,41 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder
+{hiddenCount} autres +{hiddenCount} autres
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-w-2xl w-full max-h-[85vh] fixed z-[9999] p-0" style={{zIndex: 9999}}> <DialogContent className="max-w-lg w-full max-h-[80vh] fixed z-[9999] p-0" style={{zIndex: 9999}}>
<DialogHeader className="px-6 py-4 border-b border-gray-200 bg-gray-50"> <DialogHeader className="px-4 py-3 border-b border-gray-200 bg-gray-50">
<DialogTitle className="text-lg font-bold text-gray-900 flex items-center gap-3"> <DialogTitle className="text-base font-semibold text-gray-900 flex items-center gap-2">
<Package className="w-5 h-5 text-blue-600" /> <Package className="w-4 h-4 text-blue-600" />
Éléments du jour - {totalItems} élément{totalItems > 1 ? 's' : ''} Éléments du jour - {totalItems}
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<div className="p-6"> <div className="p-3" style={{maxHeight: '65vh', overflowY: 'auto'}}>
<div className="grid gap-4" style={{maxHeight: '60vh'}}> <div className="space-y-2">
{allItems.map((item, index) => { {allItems.map((item, index) => {
const isOrder = item.itemType === 'order'; const isOrder = item.itemType === 'order';
const statusColor = item.status === 'delivered' const statusColor = item.status === 'delivered'
? 'bg-gray-100 border-gray-300' ? 'bg-gray-100 border-gray-300'
: item.status === 'planned' : item.status === 'planned'
? 'bg-yellow-50 border-yellow-300' ? 'bg-yellow-50 border-yellow-200'
: isOrder : isOrder
? 'bg-blue-50 border-blue-300' ? 'bg-blue-50 border-blue-200'
: 'bg-green-50 border-green-300'; : 'bg-green-50 border-green-200';
const statusText = item.status === 'delivered' ? 'Livré' : const statusText = item.status === 'delivered' ? 'Livré' :
item.status === 'planned' ? 'Planifié' : 'En attente'; item.status === 'planned' ? 'Planifié' : 'En attente';
const statusIcon = item.status === 'delivered' const statusIcon = item.status === 'delivered'
? <Check className="w-4 h-4 text-gray-600" /> ? <Check className="w-3 h-3 text-gray-600" />
: item.status === 'planned' : item.status === 'planned'
? <div className="w-3 h-3 bg-yellow-500 rounded-full" /> ? <div className="w-2 h-2 bg-yellow-500 rounded-full" />
: isOrder : isOrder
? <div className="w-3 h-3 bg-blue-500 rounded-full" /> ? <div className="w-2 h-2 bg-blue-500 rounded-full" />
: <div className="w-3 h-3 bg-green-500 rounded-full" />; : <div className="w-2 h-2 bg-green-500 rounded-full" />;
return ( return (
<div <div
key={`modal-${item.itemType}-${item.id}-${index}`} key={`modal-${item.itemType}-${item.id}-${index}`}
className={`${statusColor} border-2 rounded-lg p-4 cursor-pointer hover:shadow-md transition-all duration-200 transform hover:scale-[1.02]`} className={`${statusColor} border rounded p-2 cursor-pointer hover:shadow-sm transition-all duration-150`}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -192,14 +192,14 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder
setIsOpen(false); setIsOpen(false);
}} }}
> >
<div className="flex items-start justify-between"> <div className="flex items-center justify-between">
<div className="flex-1"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-1">
{statusIcon} {statusIcon}
<span className="text-xs font-medium text-gray-600 uppercase tracking-wide"> <span className="text-xs font-medium text-gray-600 uppercase">
{isOrder ? 'Commande' : 'Livraison'} {isOrder ? 'COMMANDE' : 'LIVRAISON'}
</span> </span>
<span className={`text-xs px-2 py-1 rounded-full font-medium ${ <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${
item.status === 'delivered' ? 'bg-gray-200 text-gray-700' : item.status === 'delivered' ? 'bg-gray-200 text-gray-700' :
item.status === 'planned' ? 'bg-yellow-200 text-yellow-800' : item.status === 'planned' ? 'bg-yellow-200 text-yellow-800' :
isOrder ? 'bg-blue-200 text-blue-800' : 'bg-green-200 text-green-800' isOrder ? 'bg-blue-200 text-blue-800' : 'bg-green-200 text-green-800'
@@ -208,29 +208,21 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder
</span> </span>
</div> </div>
<h3 className="font-bold text-lg text-gray-900 mb-1"> <div className="font-semibold text-sm text-gray-900 truncate">
{item.supplier?.name || (isOrder ? 'Commande sans fournisseur' : 'Livraison sans fournisseur')} {item.supplier?.name || (isOrder ? 'Commande' : 'Livraison')}
</h3>
{!isOrder && (
<div className="text-sm text-gray-700 mb-1">
<span className="font-medium">Quantité:</span> {item.quantity} {item.unit === 'palettes' ? 'palette(s)' : 'colis'}
</div>
)}
<div className="text-sm text-gray-600">
<span className="font-medium">Date:</span> {
item.scheduledDate ? new Date(item.scheduledDate).toLocaleDateString('fr-FR') :
item.deliveredDate ? new Date(item.deliveredDate).toLocaleDateString('fr-FR') :
new Date(item.createdAt).toLocaleDateString('fr-FR')
}
</div> </div>
{item.notes && ( <div className="flex items-center gap-3 text-xs text-gray-600 mt-1">
<div className="text-sm text-gray-600 mt-2"> {!isOrder && (
<span className="font-medium">Notes:</span> {item.notes} <span>{item.quantity} {item.unit === 'palettes' ? 'P' : 'C'}</span>
</div> )}
)} <span>
{item.scheduledDate ? new Date(item.scheduledDate).toLocaleDateString('fr-FR') :
item.deliveredDate ? new Date(item.deliveredDate).toLocaleDateString('fr-FR') :
new Date(item.createdAt).toLocaleDateString('fr-FR')
}
</span>
</div>
</div> </div>
</div> </div>
</div> </div>