feat: add challenge and red-blue competitions across API and web

2025-10-01 06:49:09 -06:00 · 2025-10-01 06:49:09 -06:00 · 8fd3c4bb64
commit 8fd3c4bb64
parent f5161d9add
77 changed files with 5355 additions and 24 deletions
--- a/web/app/(commonLayout)/console/challenges/page.tsx
+++ b/web/app/(commonLayout)/console/challenges/page.tsx
@ -0,0 +1,133 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiAddLine, RiDeleteBinLine } from '@remixicon/react'
+import { deleteConsoleChallenge, listConsoleChallenges, updateConsoleChallenge } from '@/service/console/challenges'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import Confirm from '@/app/components/base/confirm'
+import CreateChallengeModal from './create-challenge-modal'
+
+export default function ConsoleChallengesPage() {
+  const { t } = useTranslation()
+  const [items, setItems] = useState<any[]>([])
+  const [showModal, setShowModal] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null)
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      const data = await listConsoleChallenges()
+      setItems(data)
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load()
+  }, [])
+
+  const confirmDelete = async () => {
+    if (!pendingDeleteId)
+      return
+    try {
+      await deleteConsoleChallenge(pendingDeleteId)
+      Toast.notify({ type: 'success', message: 'Challenge deleted' })
+      await load()
+    }
+    catch (e: any) {
+      Toast.notify({ type: 'error', message: e.message || 'Delete failed' })
+    }
+    finally {
+      setPendingDeleteId(null)
+    }
+  }
+
+  const handleToggleActive = async (item: any) => {
+    try {
+      await updateConsoleChallenge(item.id, { is_active: !item.is_active })
+      Toast.notify({ type: 'success', message: item.is_active ? 'Deactivated' : 'Activated' })
+      await load()
+    }
+    catch (e: any) {
+      Toast.notify({ type: 'error', message: e.message || 'Update failed' })
+    }
+  }
+
+  return (
+    <div className='flex h-full flex-col bg-components-panel-bg'>
+      <div className='flex items-center justify-between border-b border-divider-subtle px-12 py-4'>
+        <h1 className='text-xl font-semibold text-text-primary'>{t('challenges.console.title')}</h1>
+        <Button onClick={() => setShowModal(true)}>
+          <RiAddLine className='h-4 w-4' />
+          {t('challenges.console.create')}
+        </Button>
+      </div>
+      <div className='flex-1 overflow-y-auto px-12 py-6'>
+        {loading ? (
+          <div className='text-text-tertiary'>{t('common.loading')}</div>
+        ) : items.length === 0 ? (
+          <div className='flex flex-col items-center justify-center py-16'>
+            <div className='mb-2 text-text-secondary'>{t('challenges.console.empty')}</div>
+            <div className='text-sm text-text-tertiary'>{t('challenges.console.emptyDesc')}</div>
+          </div>
+        ) : (
+          <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3'>
+            {items.map(item => (
+              <div key={item.id} className='group relative rounded-xl border border-divider-subtle bg-components-panel-bg p-4 shadow-xs transition-shadow hover:shadow-md'>
+                <div className='mb-2 text-base font-semibold text-text-primary'>{item.name}</div>
+                {item.description && (
+                  <div className='mb-2 line-clamp-2 text-sm text-text-secondary'>{item.description}</div>
+                )}
+                {item.goal && (
+                  <div className='mb-2 line-clamp-1 text-xs text-text-tertiary'>Goal: {item.goal}</div>
+                )}
+                <div className='mt-3 flex items-center justify-between'>
+                  <div className={`rounded px-2 py-0.5 text-xs font-medium ${item.is_active ? 'bg-util-colors-green-green-100 text-util-colors-green-green-700' : 'bg-components-badge-gray text-text-tertiary'}`}>
+                    {item.is_active ? t('challenges.console.status.active') : t('challenges.console.status.inactive')}
+                  </div>
+                  <div className='flex gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
+                    <Button
+                      size='small'
+                      onClick={() => handleToggleActive(item)}
+                    >
+                      {item.is_active ? t('challenges.console.actions.deactivate') : t('challenges.console.actions.activate')}
+                    </Button>
+                    <Button
+                      size='small'
+                      variant='ghost'
+                      onClick={() => setPendingDeleteId(item.id)}
+                    >
+                      <RiDeleteBinLine className='h-4 w-4' />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      {showModal && (
+        <CreateChallengeModal
+          show={showModal}
+          onHide={() => setShowModal(false)}
+          onSuccess={() => {
+            setShowModal(false)
+            void load()
+          }}
+        />
+      )}
+      <Confirm
+        isShow={Boolean(pendingDeleteId)}
+        title={t('challenges.console.actions.deleteConfirm')}
+        content={t('challenges.console.actions.deleteConfirm')}
+        onCancel={() => setPendingDeleteId(null)}
+        onConfirm={confirmDelete}
+      />
+    </div>
+  )
+}