missions button

components/missions/missions-admin-panel.tsx

@@ -60,6 +60,7 @@ export function MissionsAdminPanel() {
   const [gardienDeLaMemoire, setGardienDeLaMemoire] = useState<string | null>(null);
   const [volontaires, setVolontaires] = useState<string[]>([]);
   const [missionId, setMissionId] = useState<string>("");
+  const [activeTab, setActiveTab] = useState<string>("general");
   const [missionData, setMissionData] = useState<{
     name?: string;
     logo?: string;
@@ -285,11 +286,26 @@ export function MissionsAdminPanel() {
     }
   };
 
+  // Function to navigate to the next tab
+  const goToNextTab = () => {
+    const tabOrder = ["general", "details", "attachments", "skills", "membres"];
+    const currentIndex = tabOrder.indexOf(activeTab);
+    if (currentIndex < tabOrder.length - 1) {
+      const nextTab = tabOrder[currentIndex + 1];
+      setActiveTab(nextTab);
+    }
+  };
+
+  // Check if we're on the last tab
+  const isLastTab = () => {
+    return activeTab === "membres";
+  };
+
   return (
     <div className="w-full">
       <Card className="border shadow-sm bg-white">
         <CardContent className="pt-6">
-          <Tabs defaultValue="general" className="w-full">
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
             <TabsList className="mb-4 bg-gray-100">
               <TabsTrigger value="general" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">General</TabsTrigger>
               <TabsTrigger value="details" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">Details</TabsTrigger>
@@ -1130,26 +1146,28 @@ export function MissionsAdminPanel() {
           
           <div className="mt-8 flex justify-end">
             <Button 
-              className={`${isMissionValid 
+              className="bg-blue-600 hover:bg-blue-700 text-white"
-                ? 'bg-blue-600 hover:bg-blue-700' 
-                : 'bg-gray-400 hover:bg-gray-500 cursor-not-allowed'} text-white`}
-              disabled={!isMissionValid}
               onClick={() => {
-                if (isMissionValid) {
+                if (isLastTab() && isMissionValid) {
+                  // Submit the form on the last tab if valid
                   toast({
                     title: "Mission enregistrée",
                     description: "Tous les gardiens ont été assignés avec succès.",
                   });
-                } else {
+                } else if (isLastTab() && !isMissionValid) {
+                  // Show validation error on last tab
                   toast({
                     title: "Mission incomplète",
                     description: "Vous devez assigner les trois gardiens avant de pouvoir enregistrer.",
                     variant: "destructive",
                   });
+                } else {
+                  // Go to next tab
+                  goToNextTab();
                 }
               }}
             >
-              {isMissionValid ? "Enregistrer" : "Suivant"}
+              {isLastTab() ? "Enregistrer" : "Suivant"}
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-2">
                 <line x1="5" y1="12" x2="19" y2="12"></line>
                 <polyline points="12 5 19 12 12 19"></polyline>