フィードバックの概要

import { useState } from "react";
import {
    Alert,
    Banner,
    Button,
    Card,
    CardContent,
    CardHeader,
    CardTitle,
    Progress,
    Spinner,
    Stepper,
} from "@gunjo/ui";

const STEP_LABELS = ["読み込み", "検証", "取り込み"];

const STEP_MESSAGE = [
    "ファイルを読んでいます。このタブは閉じないでください。",
    "1行ずつ、決めた形式に合っているか確かめています。",
    "通った行をワークスペースに書き込んでいます。",
];

export function ImportJobStatus() {
    const [step, setStep] = useState(1);
    const [dismissed, setDismissed] = useState(false);

    const running = step < STEP_LABELS.length;
    const percent = Math.round(((step + 1) / (STEP_LABELS.length + 1)) * 100);

    return (
        <Card className="max-w-2xl">
            {dismissed ? null : (
                <Banner
                    variant="info"
                    onDismiss={() => setDismissed(true)}
                    dismissLabel="閉じる"
                >
                    取り込みは裏で進みます。このページを離れても大丈夫です。
                </Banner>
            )}
            <CardHeader>
                <CardTitle>顧客データの取り込み</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
                <Stepper
                    steps={STEP_LABELS.map((label, index) => ({
                        label,
                        state:
                            index < step ? "completed" : index === step ? "current" : "upcoming",
                    }))}
                />

                <div className="space-y-2">
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        {running ? <Spinner size="sm" /> : null}
                        <span>{running ? STEP_MESSAGE[step] : "取り込みが終わりました。"}</span>
                    </div>
                    <Progress
                        value={percent}
                        label="取り込みの進み具合"
                        valueText={percent + "% 完了"}
                        tone={running ? "primary" : "success"}
                    />
                </div>

                {step === 1 ? (
                    <Alert
                        variant="warning"
                        title="12行に確認が必要です"
                        description="メールアドレスが無い行は取り込みません。"
                    />
                ) : null}

                {running ? null : (
                    <Alert
                        variant="success"
                        title="1,204件を取り込みました"
                        description="残る12行は取り込まず、一覧として書き出せます。"
                    />
                )}

                <div className="flex gap-3">
                    <Button
                        onClick={() => setStep(Math.min(step + 1, STEP_LABELS.length))}
                        disabled={!running}
                    >
                        次へ進む
                    </Button>
                    <Button variant="outline" onClick={() => setStep(0)}>
                        最初からやり直す
                    </Button>
                </div>
            </CardContent>
        </Card>
    );
}