Function ProgressView

apps/webuiapps/src/components/ChatPanel/ModPanel.tsx:382–432

({ config, state })

// ---------------------------------------------------------------------------

const ProgressView: React.FC<{ config: ModConfig; state: ModState }> = ({ config, state }) => {
  const allStages = Object.values(config.stages).sort((a, b) => a.stage_index - b.stage_index);

  return (
    <div className={styles.progressView}>
      <div className={styles.modTitle}>{config.mod_name_en || config.mod_name}</div>
      <div className={styles.modDesc}>{config.mod_description}</div>

      <div className={styles.stageList}>
        {allStages.map((stage) => {
          const isCurrent = stage.stage_index === state.current_stage_index && !state.is_finished;
          const isCompleted = stage.stage_index < state.current_stage_index || state.is_finished;

          return (
            <div
              key={stage.stage_index}
              className={`${styles.stageCard} ${isCurrent ? styles.stageCardCurrent : ''} ${isCompleted ? styles.stageCardCompleted : ''}`}
            >
              <div className={styles.stageCardHeader}>
                <span className={styles.stageCardIndex}>
                  {isCompleted ? <Check size={14} /> : stage.stage_index + 1}
                </span>
                <span className={styles.stageCardName}>{stage.stage_name}</span>
                {isCurrent && <span className={styles.stageCardBadge}>Current</span>}
              </div>
              <div className={styles.stageCardDesc}>{stage.stage_description}</div>
              <div className={styles.targetList}>
                {Object.entries(stage.stage_targets).map(([id, desc]) => {
                  const completed = state.completed_targets.includes(Number(id));
                  return (
                    <div
                      key={id}
                      className={`${styles.targetItem} ${completed ? styles.targetCompleted : ''}`}
                    >
                      <span className={styles.targetCheck}>
                        {completed ? <Check size={12} /> : '\u25CB'}
                      </span>
                      <span>{desc}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      {state.is_finished && <div className={styles.finishedBanner}>All stages completed!</div>}
    </div>
  );
};

// ---------------------------------------------------------------------------
// Edit View