Merge pull request #260 from R0m1k3/1.1

Update task creation and editing to use custom modal components

client/src/pages/Tasks.tsx

@@ -699,23 +699,57 @@ export default function Tasks() {
               </TabsList>
             </Tabs>
             
-            {canCreateTasks && (
+{canCreateTasks && (
-              <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
+              <>
-                <DialogTrigger asChild>
+                <Button 
-                  <Button className="bg-blue-600 hover:bg-blue-700 text-white shadow-md">
+                  className="bg-blue-600 hover:bg-blue-700 text-white shadow-md"
-                    <Plus className="w-4 h-4 mr-2" />
+                  onClick={() => setShowCreateModal(true)}
-                    Nouvelle Tâche
+                >
-                  </Button>
+                  <Plus className="w-4 h-4 mr-2" />
-                </DialogTrigger>
+                  Nouvelle Tâche
-                <DialogContent className="max-w-2xl">
+                </Button>
-                  <DialogHeader>
+                
-                    <DialogTitle>Créer une nouvelle tâche</DialogTitle>
+                {showCreateModal && (
-                  </DialogHeader>
+                  <div style={{
-                  <TaskFormInline
+                    position: 'fixed',
-                    onClose={() => setShowCreateModal(false)}
+                    top: 0,
-                  />
+                    left: 0,
-                </DialogContent>
+                    right: 0,
-              </Dialog>
+                    bottom: 0,
+                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                    zIndex: 1000,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                  }}>
+                    <div style={{
+                      backgroundColor: 'white',
+                      borderRadius: '8px',
+                      maxWidth: '600px',
+                      width: '90%',
+                      maxHeight: '90vh',
+                      overflow: 'auto',
+                      boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+                    }}>
+                      <div style={{
+                        padding: '24px 24px 16px',
+                        borderBottom: '1px solid #e5e7eb'
+                      }}>
+                        <h2 style={{
+                          fontSize: '18px',
+                          fontWeight: '600',
+                          margin: '0'
+                        }}>
+                          Créer une nouvelle tâche
+                        </h2>
+                      </div>
+                      <TaskFormInline
+                        onClose={() => setShowCreateModal(false)}
+                      />
+                    </div>
+                  </div>
+                )}
+              </>
             )}
           </div>
         </div>
@@ -1195,13 +1229,41 @@ export default function Tasks() {
         </div>
       </div>
 
-      {/* Modal d'édition */}
+{/* Modal d'édition */}
-      <Dialog open={showEditModal} onOpenChange={setShowEditModal}>
+      {showEditModal && selectedTask && (
-        <DialogContent className="max-w-2xl">
+        <div style={{
-          <DialogHeader>
+          position: 'fixed',
-            <DialogTitle>Modifier la tâche</DialogTitle>
+          top: 0,
-          </DialogHeader>
+          left: 0,
-          {selectedTask && (
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: 1000,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+          <div style={{
+            backgroundColor: 'white',
+            borderRadius: '8px',
+            maxWidth: '600px',
+            width: '90%',
+            maxHeight: '90vh',
+            overflow: 'auto',
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+          }}>
+            <div style={{
+              padding: '24px 24px 16px',
+              borderBottom: '1px solid #e5e7eb'
+            }}>
+              <h2 style={{
+                fontSize: '18px',
+                fontWeight: '600',
+                margin: '0'
+              }}>
+                Modifier la tâche
+              </h2>
+            </div>
             <TaskFormInline
               task={selectedTask}
               onClose={() => {
@@ -1209,48 +1271,99 @@ export default function Tasks() {
                 setSelectedTask(null);
               }}
             />
-          )}
+          </div>
-        </DialogContent>
+        </div>
-      </Dialog>
+      )}
 
-      {/* Modal de confirmation de suppression */}
+{/* Modal de confirmation de suppression */}
-      <Dialog open={showDeleteModal} onOpenChange={setShowDeleteModal}>
+      {showDeleteModal && taskToDelete && (
-        <DialogContent className="max-w-md">
+        <div style={{
-          <DialogHeader>
+          position: 'fixed',
-            <DialogTitle className="flex items-center gap-2 text-red-600">
+          top: 0,
-              <AlertTriangle className="w-5 h-5" />
+          left: 0,
-              Confirmer la suppression
+          right: 0,
-            </DialogTitle>
+          bottom: 0,
-          </DialogHeader>
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          <div className="py-4">
+          zIndex: 1000,
-            <p className="text-gray-700">
+          display: 'flex',
-              Êtes-vous sûr de vouloir supprimer la tâche "{taskToDelete?.title}" ?
+          alignItems: 'center',
-            </p>
+          justifyContent: 'center'
-            <p className="text-sm text-gray-500 mt-2">
+        }}>
-              Cette action est irréversible.
+          <div style={{
-            </p>
+            backgroundColor: 'white',
+            borderRadius: '8px',
+            maxWidth: '400px',
+            width: '90%',
+            padding: '24px',
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+          }}>
+            <h2 style={{
+              fontSize: '18px',
+              fontWeight: '600',
+              margin: '0 0 16px 0',
+              color: '#dc2626',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px'
+            }}>
+              ⚠️ Confirmer la suppression
+            </h2>
+            <div style={{ marginBottom: '24px' }}>
+              <p style={{
+                color: '#374151',
+                lineHeight: '1.5',
+                margin: '0 0 8px 0'
+              }}>
+                Êtes-vous sûr de vouloir supprimer la tâche "{taskToDelete.title}" ?
+              </p>
+              <p style={{
+                fontSize: '14px',
+                color: '#6b7280',
+                margin: '0'
+              }}>
+                Cette action est irréversible.
+              </p>
+            </div>
+            <div style={{
+              display: 'flex',
+              gap: '12px',
+              justifyContent: 'flex-end'
+            }}>
+              <button
+                onClick={() => {
+                  setShowDeleteModal(false);
+                  setTaskToDelete(null);
+                }}
+                style={{
+                  padding: '8px 16px',
+                  border: '1px solid #d1d5db',
+                  borderRadius: '6px',
+                  backgroundColor: 'white',
+                  cursor: 'pointer'
+                }}
+              >
+                Annuler
+              </button>
+              <button 
+                onClick={handleConfirmDelete}
+                style={{
+                  padding: '8px 16px',
+                  border: 'none',
+                  borderRadius: '6px',
+                  backgroundColor: '#dc2626',
+                  color: 'white',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px'
+                }}
+              >
+                🗑️ Supprimer
+              </button>
+            </div>
           </div>
-          <div className="flex gap-3 justify-end">
+        </div>
-            <Button
+      )}
-              variant="outline"
-              onClick={() => {
-                setShowDeleteModal(false);
-                setTaskToDelete(null);
-              }}
-            >
-              Annuler
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={handleConfirmDelete}
-              className="bg-red-600 hover:bg-red-700"
-            >
-              <Trash2 className="w-4 h-4 mr-2" />
-              Supprimer
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
     </div>
   );
 }