mirror of
https://github.com/R0m1k3/LogiFlow.git
synced 2026-10-22 14:38:19 +02:00
Merge pull request #538 from R0m1k3/1.1
feat: add mobile pages for delivery and order listing with search and…
This commit is contained in:
3 files changed
+120
-116
No files matched your search
@@ -75,7 +75,10 @@ export default function MobileDeliveriesPage() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const getDateBadge = (dateStr: string) => {
|
const getDateBadge = (dateStr: string) => {
|
||||||
|
if (!dateStr) return null;
|
||||||
const date = new Date(dateStr);
|
const date = new Date(dateStr);
|
||||||
|
if (isNaN(date.getTime())) return null;
|
||||||
|
|
||||||
if (isToday(date)) {
|
if (isToday(date)) {
|
||||||
return <Badge className="bg-blue-100 text-blue-700">Aujourd'hui</Badge>;
|
return <Badge className="bg-blue-100 text-blue-700">Aujourd'hui</Badge>;
|
||||||
}
|
}
|
||||||
@@ -179,7 +182,10 @@ export default function MobileDeliveriesPage() {
|
|||||||
|
|
||||||
<p className="text-xs text-gray-500 flex items-center gap-1 mt-1">
|
<p className="text-xs text-gray-500 flex items-center gap-1 mt-1">
|
||||||
<Calendar className="h-3 w-3" />
|
<Calendar className="h-3 w-3" />
|
||||||
{format(new Date(delivery.expectedDate), 'dd/MM/yyyy', { locale: fr })}
|
{delivery.expectedDate && !isNaN(new Date(delivery.expectedDate).getTime())
|
||||||
|
? format(new Date(delivery.expectedDate), 'dd/MM/yyyy', { locale: fr })
|
||||||
|
: 'Date inconnue'
|
||||||
|
}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -164,7 +164,10 @@ export default function MobileOrdersPage() {
|
|||||||
|
|
||||||
<p className="text-xs text-gray-500 flex items-center gap-1 mt-1">
|
<p className="text-xs text-gray-500 flex items-center gap-1 mt-1">
|
||||||
<Calendar className="h-3 w-3" />
|
<Calendar className="h-3 w-3" />
|
||||||
{format(new Date(order.orderDate), 'dd/MM/yyyy', { locale: fr })}
|
{order.orderDate && !isNaN(new Date(order.orderDate).getTime())
|
||||||
|
? format(new Date(order.orderDate), 'dd/MM/yyyy', { locale: fr })
|
||||||
|
: 'Date inconnue'
|
||||||
|
}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -361,132 +361,127 @@ export default function MobileTasksPage() {
|
|||||||
// Loading
|
// Loading
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center h-screen">
|
<MobileLayout>
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
|
<div className="flex items-center justify-center h-64">
|
||||||
</div>
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
|
||||||
|
</div>
|
||||||
|
</MobileLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<MobileLayout>
|
||||||
className="min-h-screen bg-gray-50 pb-24"
|
<div className="p-3 space-y-3">
|
||||||
style={{
|
<div className="bg-white border-b sticky top-0 z-40" style={{ width: '100%', boxSizing: 'border-box' }}>
|
||||||
width: '100%',
|
<div className="px-3 py-3">
|
||||||
maxWidth: '100vw',
|
<div className="flex items-center justify-between mb-3">
|
||||||
overflowX: 'hidden',
|
<div className="flex items-center gap-2">
|
||||||
boxSizing: 'border-box'
|
<ListTodo className="w-5 h-5 text-blue-600" />
|
||||||
}}
|
<h1 className="text-lg font-bold">Tâches</h1>
|
||||||
>
|
</div>
|
||||||
{/* Header */}
|
<Badge variant="secondary">{filteredTasks.length}</Badge>
|
||||||
<div className="bg-white border-b sticky top-0 z-40" style={{ width: '100%', boxSizing: 'border-box' }}>
|
|
||||||
<div className="px-3 py-3">
|
|
||||||
<div className="flex items-center justify-between mb-3">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<ListTodo className="w-5 h-5 text-blue-600" />
|
|
||||||
<h1 className="text-lg font-bold">Tâches</h1>
|
|
||||||
</div>
|
</div>
|
||||||
<Badge variant="secondary">{filteredTasks.length}</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Search */}
|
{/* Search */}
|
||||||
<div className="relative mb-3">
|
<div className="relative mb-3">
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||||
<Input
|
<Input
|
||||||
placeholder="Rechercher..."
|
placeholder="Rechercher..."
|
||||||
value={searchTerm}
|
value={searchTerm}
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
className="pl-10 h-10 text-sm"
|
className="pl-10 h-10 text-sm"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tabs - Grid layout pour garantir 3 colonnes égales */}
|
{/* Tabs - Grid layout pour garantir 3 colonnes égales */}
|
||||||
<div className="grid grid-cols-3 gap-1">
|
<div className="grid grid-cols-3 gap-1">
|
||||||
<Button
|
<Button
|
||||||
variant={activeTab === 'pending' ? 'default' : 'outline'}
|
variant={activeTab === 'pending' ? 'default' : 'outline'}
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setActiveTab('pending')}
|
onClick={() => setActiveTab('pending')}
|
||||||
className="h-9 text-xs px-1 truncate"
|
className="h-9 text-xs px-1 truncate"
|
||||||
>
|
>
|
||||||
⏳ Actives
|
⏳ Actives
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant={activeTab === 'completed' ? 'default' : 'outline'}
|
variant={activeTab === 'completed' ? 'default' : 'outline'}
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setActiveTab('completed')}
|
onClick={() => setActiveTab('completed')}
|
||||||
className="h-9 text-xs px-1 truncate"
|
className="h-9 text-xs px-1 truncate"
|
||||||
>
|
>
|
||||||
✅ Faites
|
✅ Faites
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant={activeTab === 'all' ? 'default' : 'outline'}
|
variant={activeTab === 'all' ? 'default' : 'outline'}
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setActiveTab('all')}
|
onClick={() => setActiveTab('all')}
|
||||||
className="h-9 text-xs px-1 truncate"
|
className="h-9 text-xs px-1 truncate"
|
||||||
>
|
>
|
||||||
📋 Toutes
|
📋 Toutes
|
||||||
</Button>
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Task List */}
|
{/* Task List */}
|
||||||
<div className="px-3 py-2 overflow-hidden" style={{ maxWidth: '100%' }}>
|
<div className="px-3 py-2 overflow-hidden" style={{ maxWidth: '100%' }}>
|
||||||
{filteredTasks.length === 0 ? (
|
{filteredTasks.length === 0 ? (
|
||||||
<div className="text-center py-12 text-gray-500">
|
<div className="text-center py-12 text-gray-500">
|
||||||
<ListTodo className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
<ListTodo className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||||||
<p>Aucune tâche trouvée</p>
|
<p>Aucune tâche trouvée</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
filteredTasks.map((task: TaskWithRelations) => (
|
||||||
|
<TaskCard
|
||||||
|
key={task.id}
|
||||||
|
task={task}
|
||||||
|
onComplete={() => handleComplete(task.id)}
|
||||||
|
onEdit={() => { setEditingTask(task); setShowForm(true); }}
|
||||||
|
onDelete={() => setDeletingTask(task)}
|
||||||
|
canEdit={canEdit}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FAB Button */}
|
||||||
|
{canEdit && (
|
||||||
|
<Button
|
||||||
|
onClick={() => { setEditingTask(null); setShowForm(true); }}
|
||||||
|
className="fixed bottom-20 right-4 w-14 h-14 rounded-full shadow-lg bg-blue-600 hover:bg-blue-700 z-40"
|
||||||
|
>
|
||||||
|
<Plus className="w-6 h-6" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Form Modal */}
|
||||||
|
{showForm && (
|
||||||
|
<MobileTaskForm
|
||||||
|
task={editingTask}
|
||||||
|
onClose={() => { setShowForm(false); setEditingTask(null); }}
|
||||||
|
selectedStoreId={selectedStoreId}
|
||||||
|
user={user}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Delete Confirmation */}
|
||||||
|
{deletingTask && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-end">
|
||||||
|
<div className="bg-white w-full rounded-t-xl p-4 pb-8">
|
||||||
|
<h3 className="font-semibold text-lg mb-2">Supprimer cette tâche ?</h3>
|
||||||
|
<p className="text-gray-600 mb-4">{deletingTask.title}</p>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Button variant="outline" onClick={() => setDeletingTask(null)} className="flex-1 h-12">
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
<Button variant="destructive" onClick={handleDelete} className="flex-1 h-12">
|
||||||
|
Supprimer
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
filteredTasks.map((task: TaskWithRelations) => (
|
|
||||||
<TaskCard
|
|
||||||
key={task.id}
|
|
||||||
task={task}
|
|
||||||
onComplete={() => handleComplete(task.id)}
|
|
||||||
onEdit={() => { setEditingTask(task); setShowForm(true); }}
|
|
||||||
onDelete={() => setDeletingTask(task)}
|
|
||||||
canEdit={canEdit}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</MobileLayout>
|
||||||
{/* FAB Button */}
|
|
||||||
{canEdit && (
|
|
||||||
<Button
|
|
||||||
onClick={() => { setEditingTask(null); setShowForm(true); }}
|
|
||||||
className="fixed bottom-20 right-4 w-14 h-14 rounded-full shadow-lg bg-blue-600 hover:bg-blue-700 z-40"
|
|
||||||
>
|
|
||||||
<Plus className="w-6 h-6" />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Form Modal */}
|
|
||||||
{showForm && (
|
|
||||||
<MobileTaskForm
|
|
||||||
task={editingTask}
|
|
||||||
onClose={() => { setShowForm(false); setEditingTask(null); }}
|
|
||||||
selectedStoreId={selectedStoreId}
|
|
||||||
user={user}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Delete Confirmation */}
|
|
||||||
{deletingTask && (
|
|
||||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-end">
|
|
||||||
<div className="bg-white w-full rounded-t-xl p-4 pb-8">
|
|
||||||
<h3 className="font-semibold text-lg mb-2">Supprimer cette tâche ?</h3>
|
|
||||||
<p className="text-gray-600 mb-4">{deletingTask.title}</p>
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<Button variant="outline" onClick={() => setDeletingTask(null)} className="flex-1 h-12">
|
|
||||||
Annuler
|
|
||||||
</Button>
|
|
||||||
<Button variant="destructive" onClick={handleDelete} className="flex-1 h-12">
|
|
||||||
Supprimer
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user