Refine scoreboard flow and update ports

src/pages/TeamSelectionPage.tsx

@@ -0,0 +1,196 @@
+import { useNavigate } from 'react-router-dom'
+import { getTeamDisplayName } from '../lib/match'
+import type { LoadStatus, RoundGroup } from '../types'
+
+type TeamSelectionPageProps = {
+  areaAInput: string
+  areaBInput: string
+  groups: RoundGroup[]
+  groupSource: 'idle' | 'db' | 'manual'
+  loadMessage: string
+  loadStatus: LoadStatus
+  parsedAreaA: string[]
+  parsedAreaB: string[]
+  selectedGroupId: number | null
+  targetDate: string
+  onAreaAInputChange: (value: string) => void
+  onAreaBInputChange: (value: string) => void
+  onGenerateManualGroups: () => void
+  onLoadGroupsFromDb: () => void
+  onSelectGroup: (groupId: number) => void
+  onTargetDateChange: (value: string) => void
+  onUseGroup: (groupId: number) => void
+}
+
+export function TeamSelectionPage({
+  areaAInput,
+  areaBInput,
+  groups,
+  groupSource,
+  loadMessage,
+  loadStatus,
+  parsedAreaA,
+  parsedAreaB,
+  selectedGroupId,
+  targetDate,
+  onAreaAInputChange,
+  onAreaBInputChange,
+  onGenerateManualGroups,
+  onLoadGroupsFromDb,
+  onSelectGroup,
+  onTargetDateChange,
+  onUseGroup,
+}: TeamSelectionPageProps) {
+  const navigate = useNavigate()
+
+  return (
+    <section className="selection-shell">
+      <article className="panel panel-hero selection-hero">
+        <div>
+          <p className="panel-kicker">步驟 1</p>
+          <h2>載入分組與選擇組別</h2>
+          <p className="panel-copy">
+            先用日期從 DB 讀取分組；如果指定日期沒有資料，就改用 A 區與 B 區名單手動產生配對。
+          </p>
+        </div>
+
+        <div className="summary-grid">
+          <article className="mini-stat">
+            <span>A 區隊數</span>
+            <strong>{parsedAreaA.length}</strong>
+          </article>
+          <article className="mini-stat">
+            <span>B 區隊數</span>
+            <strong>{parsedAreaB.length}</strong>
+          </article>
+          <article className="mini-stat">
+            <span>目前組數</span>
+            <strong>{groups.length}</strong>
+          </article>
+        </div>
+
+        {loadMessage ? (
+          <p className={`status-banner status-banner-${loadStatus}`}>{loadMessage}</p>
+        ) : null}
+      </article>
+
+      <article className="panel">
+        <div className="selection-form">
+          <div className="selection-toolbar">
+            <label className="field">
+              <span>指定日期</span>
+              <input
+                type="date"
+                value={targetDate}
+                onChange={(event) => onTargetDateChange(event.target.value)}
+              />
+            </label>
+
+            <div className="button-stack">
+              <button className="primary-button" type="button" onClick={onLoadGroupsFromDb}>
+                讀取指定日期
+              </button>
+              <button className="secondary-button" type="button" onClick={onGenerateManualGroups}>
+                手動產生配對
+              </button>
+            </div>
+          </div>
+
+          <div className="double-grid">
+            <label className="field">
+              <span>A 區名單</span>
+              <textarea
+                rows={8}
+                value={areaAInput}
+                onChange={(event) => onAreaAInputChange(event.target.value)}
+                placeholder={'每行一隊，例如：\n柏威'}
+              />
+            </label>
+
+            <label className="field">
+              <span>B 區名單</span>
+              <textarea
+                rows={8}
+                value={areaBInput}
+                onChange={(event) => onAreaBInputChange(event.target.value)}
+                placeholder={'每行一隊，例如：\nRURU'}
+              />
+            </label>
+          </div>
+
+          <div className="selection-hint">
+            <span>
+              來源：
+              {groupSource === 'db' ? 'DB' : groupSource === 'manual' ? '手動配對' : '尚未載入'}
+            </span>
+            <span>從下方選擇要帶進記分板的第幾組。</span>
+          </div>
+        </div>
+      </article>
+
+      <article className="panel full-span">
+        <div className="panel-heading">
+          <div>
+            <p className="panel-kicker">步驟 2</p>
+            <h2>選擇第幾組帶進記分板</h2>
+          </div>
+        </div>
+
+        {groups.length === 0 ? (
+          <div className="empty-state">
+            <h3>目前還沒有分組</h3>
+            <p>先讀取指定日期資料，或手動輸入名單後產生配對。</p>
+          </div>
+        ) : (
+          <div className="group-board">
+            {groups.map((group) => (
+              <article
+                className={
+                  group.id === selectedGroupId
+                    ? 'group-card group-card-active group-card-stage'
+                    : 'group-card group-card-stage'
+                }
+                key={group.id}
+              >
+                <div className="group-head">
+                  <div>
+                    <p className="panel-kicker">第 {group.id} 組</p>
+                    <h3>{group.teams.length} 隊可選</h3>
+                  </div>
+                  <div className="group-actions">
+                    <button
+                      className="secondary-button"
+                      type="button"
+                      onClick={() => onSelectGroup(group.id)}
+                    >
+                      先選這組
+                    </button>
+                    <button
+                      className="primary-button"
+                      type="button"
+                      onClick={() => {
+                        onUseGroup(group.id)
+                        navigate('/scoreboard')
+                      }}
+                    >
+                      帶進記分板
+                    </button>
+                  </div>
+                </div>
+
+                <div className="team-stage-grid">
+                  {group.teams.map((team) => (
+                    <article className="team-stage-card" key={`${group.id}-${team.id}`}>
+                      <span className="team-index">第 {team.id} 隊</span>
+                      <p className="team-name">{getTeamDisplayName(team)}</p>
+                    </article>
+                  ))}
+                </div>
+              </article>
+            ))}
+          </div>
+        )}
+      </article>
+    </section>
+  )
+}