Michael/LogiFlow
1
0 Fork 0
mirror of https://github.com/R0m1k3/LogiFlow.git synced 2026-10-11 17:27:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add mobile tasks page with task creation, editing, and listing functionalities.

Browse Source
This commit is contained in:
Michael committed 2025-12-10 13:09:24 +01:00
1 parent 5894b486b7
commit 3a8183f6a5
1 file changed
+28 -17
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/mobile/TasksPage.tsx
+28 -17
View File
@@ -367,14 +367,14 @@ export default function MobileTasksPage() {
} }
return ( return (
<div className="min-h-screen bg-gray-50 pb-24 overflow-x-hidden max-w-full"> <div className="min-h-screen bg-gray-50 pb-24 overflow-hidden" style={{ maxWidth: '100vw' }}>
{/* Header */} {/* Header */}
<div className="bg-white border-b sticky top-0 z-40"> <div className="bg-white border-b sticky top-0 z-40">
<div className="p-4"> <div className="px-3 py-3">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ListTodo className="w-6 h-6 text-blue-600" /> <ListTodo className="w-5 h-5 text-blue-600" />
<h1 className="text-xl font-bold">Tâches</h1> <h1 className="text-lg font-bold">Tâches</h1>
</div> </div>
<Badge variant="secondary">{filteredTasks.length}</Badge> <Badge variant="secondary">{filteredTasks.length}</Badge>
</div> </div>
@@ -386,25 +386,36 @@ export default function MobileTasksPage() {
placeholder="Rechercher..." placeholder="Rechercher..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10 h-11" className="pl-10 h-10 text-sm"
/> />
</div> </div>
{/* Tabs */} {/* Tabs - Grid layout pour garantir 3 colonnes égales */}
<div className="flex gap-1 w-full"> <div className="grid grid-cols-3 gap-1">
{(['pending', 'completed', 'all'] as const).map((tab) => (
<Button <Button
key={tab} variant={activeTab === 'pending' ? 'default' : 'outline'}
variant={activeTab === tab ? 'default' : 'outline'}
size="sm" size="sm"
onClick={() => setActiveTab(tab)} onClick={() => setActiveTab('pending')}
className="flex-1 h-10 text-xs px-2 min-w-0" className="h-9 text-xs px-1 truncate"
> >
{tab === 'pending' && 'En cours'} ⏳ Actives
{tab === 'completed' && 'Faites'} </Button>
{tab === 'all' && 'Toutes'} <Button
variant={activeTab === 'completed' ? 'default' : 'outline'}
size="sm"
onClick={() => setActiveTab('completed')}
className="h-9 text-xs px-1 truncate"
>
✅ Faites
</Button>
<Button
variant={activeTab === 'all' ? 'default' : 'outline'}
size="sm"
onClick={() => setActiveTab('all')}
className="h-9 text-xs px-1 truncate"
>
📋 Toutes
</Button> </Button>
))}
</div> </div>
</div> </div>
</div> </div>