Michael/LogiFlow
1
0 Fork 0
mirror of https://github.com/R0m1k3/LogiFlow.git synced 2026-10-23 15:08:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refine calendar item display and overflow handling for better visualization

Browse Source 
Adjust styling and reduce visible items in calendar overflow for improved readability and production readiness.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cc2d271b-82f0-4d6a-9302-a0b067ffb429
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cc2d271b-82f0-4d6a-9302-a0b067ffb429/lUEmTwP
This commit is contained in:
michaelschal committed 2025-08-18 14:18:20 +00:00
1 parent 82738441e8
commit 4d1d43194a
1 file changed
+33 -26
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/CalendarGrid.tsx
+33 -26
View File
@@ -38,22 +38,25 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' |
return ( return (
<div <div
className={`text-xs px-2 py-1.5 flex items-center justify-between cursor-pointer hover:opacity-80 transition-opacity duration-150 ${getOrderStyle()}`} className={`text-xs px-1 py-1 cursor-pointer hover:opacity-90 transition-opacity ${getOrderStyle()}`}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onItemClick(item, 'order'); onItemClick(item, 'order');
}} }}
style={{marginBottom: '2px', display: 'block', width: '100%'}}
> >
<span className="truncate font-semibold"> <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%'}}>
{item.supplier.name} <span className="truncate font-semibold" style={{fontSize: '10px'}}>
</span> {item.supplier?.name || 'Commande'}
<div className="flex items-center ml-2 flex-shrink-0"> </span>
{item.status === 'planned' && ( <div style={{display: 'flex', alignItems: 'center'}}>
<div className="w-2 h-2 bg-yellow-600 mr-1" title="Commande planifiée (liée à une livraison)" /> {item.status === 'planned' && (
)} <div className="w-1.5 h-1.5 bg-yellow-600" title="Planifié" />
{item.status === 'delivered' && ( )}
<Check className="w-3 h-3" /> {item.status === 'delivered' && (
)} <Check className="w-3 h-3" />
)}
</div>
</div> </div>
</div> </div>
); );
@@ -73,22 +76,25 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' |
return ( return (
<div <div
className={`text-xs px-2 py-1.5 flex items-center justify-between cursor-pointer hover:opacity-80 transition-opacity duration-150 ${getDeliveryStyle()}`} className={`text-xs px-1 py-1 cursor-pointer hover:opacity-90 transition-opacity ${getDeliveryStyle()}`}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onItemClick(item, 'delivery'); onItemClick(item, 'delivery');
}} }}
style={{marginBottom: '2px', display: 'block', width: '100%'}}
> >
<span className="truncate font-semibold"> <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%'}}>
{item.supplier.name} - {formatQuantity(item.quantity, item.unit)} <span className="truncate font-semibold" style={{fontSize: '10px'}}>
</span> {item.supplier?.name || 'Livraison'} - {formatQuantity(item.quantity, item.unit)}
<div className="flex items-center ml-2 flex-shrink-0"> </span>
{item.status === 'pending' && ( <div style={{display: 'flex', alignItems: 'center'}}>
<div className="w-2 h-2 bg-green-600 mr-1" title="En attente de validation" /> {item.status === 'pending' && (
)} <div className="w-1.5 h-1.5 bg-green-600" title="En attente" />
{item.status === 'delivered' && ( )}
<Check className="w-3 h-3" /> {item.status === 'delivered' && (
)} <Check className="w-3 h-3" />
)}
</div>
</div> </div>
</div> </div>
); );
@@ -97,7 +103,7 @@ function CalendarItem({ item, type, onItemClick }: { item: any, type: 'order' |
// Composant pour gérer l'overflow avec modal // Composant pour gérer l'overflow avec modal
function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrders: any[], dayDeliveries: any[], onItemClick: (item: any, type: 'order' | 'delivery') => void }) { function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrders: any[], dayDeliveries: any[], onItemClick: (item: any, type: 'order' | 'delivery') => void }) {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const MAX_VISIBLE_ITEMS = 4; const MAX_VISIBLE_ITEMS = 3; // Optimisé pour production
const totalItems = dayOrders.length + dayDeliveries.length; const totalItems = dayOrders.length + dayDeliveries.length;
if (totalItems === 0) return null; if (totalItems === 0) return null;
@@ -130,7 +136,8 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="w-full h-6 text-xs bg-slate-100 hover:bg-slate-200 border-slate-300 text-slate-700 font-semibold shadow-sm transition-all duration-150 border relative z-50" className="w-full h-5 text-xs bg-orange-200 hover:bg-orange-300 border-orange-400 text-orange-900 font-bold shadow-sm transition-all duration-150 border-2 relative z-50"
style={{display: 'block !important', position: 'relative', zIndex: 9999}}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setIsOpen(true); setIsOpen(true);
@@ -432,8 +439,8 @@ export default function CalendarGrid({
)} )}
</div> </div>
{/* Orders and Deliveries avec design moderne */} {/* Orders and Deliveries - Production optimisé */}
<div className="flex-1 overflow-visible relative z-10"> <div className="flex-1 relative" style={{minHeight: '60px', overflow: 'visible'}}>
<DayItemsContainer <DayItemsContainer
dayOrders={dayOrders} dayOrders={dayOrders}
dayDeliveries={dayDeliveries} dayDeliveries={dayDeliveries}