Add isActive field to challenge chains and update localization; implement functionality to toggle chain status in the UI, enhancing task management and user experience.

src/pages/chains/ChainsListPage.tsx

@@ -12,7 +12,7 @@ import {
   Text,
   Badge,
 } from '@chakra-ui/react'
-import { useGetChainsQuery, useDeleteChainMutation } from '../../__data__/api/api'
+import { useGetChainsQuery, useDeleteChainMutation, useUpdateChainMutation } from '../../__data__/api/api'
 import { URLs } from '../../__data__/urls'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { ErrorAlert } from '../../components/ErrorAlert'
@@ -29,6 +29,8 @@ export const ChainsListPage: React.FC = () => {
 
   const [searchQuery, setSearchQuery] = useState('')
   const [chainToDelete, setChainToDelete] = useState<ChallengeChain | null>(null)
+  const [updatingChainId, setUpdatingChainId] = useState<string | null>(null)
+  const [updateChain] = useUpdateChainMutation()
 
   const handleDeleteChain = async () => {
     if (!chainToDelete) return
@@ -50,6 +52,30 @@ export const ChainsListPage: React.FC = () => {
     }
   }
 
+  const handleToggleActive = async (chain: ChallengeChain, nextValue: boolean) => {
+    setUpdatingChainId(chain.id)
+
+    try {
+      await updateChain({
+        id: chain.id,
+        data: { isActive: nextValue },
+      }).unwrap()
+      toaster.create({
+        title: t('challenge.admin.common.success'),
+        description: t('challenge.admin.chains.updated'),
+        type: 'success',
+      })
+    } catch {
+      toaster.create({
+        title: t('challenge.admin.common.error'),
+        description: t('challenge.admin.chains.save.error'),
+        type: 'error',
+      })
+    } finally {
+      setUpdatingChainId(null)
+    }
+  }
+
   if (isLoading) {
     return <LoadingSpinner message={t('challenge.admin.chains.list.loading')} />
   }
@@ -110,6 +136,7 @@ export const ChainsListPage: React.FC = () => {
                 <Table.ColumnHeader>{t('challenge.admin.chains.list.table.name')}</Table.ColumnHeader>
                 <Table.ColumnHeader>{t('challenge.admin.chains.list.table.tasks.count')}</Table.ColumnHeader>
                 <Table.ColumnHeader>{t('challenge.admin.chains.list.table.created')}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t('challenge.admin.chains.list.table.status')}</Table.ColumnHeader>
                 <Table.ColumnHeader textAlign="right">{t('challenge.admin.chains.list.table.actions')}</Table.ColumnHeader>
               </Table.Row>
             </Table.Header>
@@ -127,6 +154,25 @@ export const ChainsListPage: React.FC = () => {
                       {formatDate(chain.createdAt)}
                     </Text>
                   </Table.Cell>
+                  <Table.Cell>
+                    <HStack gap={3} justify="flex-start">
+                      <Badge colorPalette={chain.isActive ? 'green' : 'gray'} variant="subtle">
+                        {chain.isActive
+                          ? t('challenge.admin.chains.list.status.active')
+                          : t('challenge.admin.chains.list.status.inactive')}
+                      </Badge>
+                      <Button
+                        size="xs"
+                        variant="outline"
+                        onClick={() => handleToggleActive(chain, !chain.isActive)}
+                        isDisabled={updatingChainId === chain.id}
+                      >
+                        {chain.isActive
+                          ? t('challenge.admin.chains.list.status.inactive')
+                          : t('challenge.admin.chains.list.status.active')}
+                      </Button>
+                    </HStack>
+                  </Table.Cell>
                   <Table.Cell textAlign="right">
                     <HStack gap={2} justify="flex-end">
                       <Button