表示の概要

import {
    Badge,
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
    MetadataList,
    PersonCell,
    Separator,
    StatGroup,
    StatusLevel,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
    Tag,
    Timeline,
} from "@gunjo/ui";

const REVIEW_LEVELS = [
    { value: "draft", label: "下書き" },
    { value: "review", label: "レビュー中" },
    { value: "approved", label: "承認済み" },
];

const METRICS = [
    { label: "未処理の素材", value: "12" },
    { label: "今週の承認", value: "5" },
    { label: "法務の確認待ち", value: "2" },
];

const ASSETS = [
    {
        id: "AS-1042",
        title: "春キャンペーンのメインビジュアル",
        tag: "デザイン",
        level: "review",
    },
    { id: "AS-1043", title: "製品ツアーのナレーション", tag: "コピー", level: "draft" },
    { id: "AS-1044", title: "料金ページのヒーロー", tag: "デザイン", level: "approved" },
];

const FACTS = [
    { label: "担当", value: "ブランド制作" },
    { label: "期日", value: "2026-06-12" },
    { label: "配信先", value: "サイトとメール" },
];

const HISTORY = [
    {
        time: "09:20",
        title: "下書きを提出",
        description: "3点がレビューに入りました。",
    },
    {
        time: "11:05",
        title: "法務からの指摘",
        description: "料金の書き方を1箇所直します。",
    },
    { time: "14:40", title: "メインビジュアルを承認", description: "配信の予約に進めます。" },
];

export function AssetReviewBoard() {
    return (
        <Card>
            <CardHeader className="gap-4">
                <div className="flex flex-wrap items-center justify-between gap-3">
                    <div className="space-y-1">
                        <CardTitle>春キャンペーンのレビュー</CardTitle>
                        <CardDescription>
                            承認する前にレビュー担当が見るものを1画面にまとめています。
                        </CardDescription>
                    </div>
                    <Badge variant="secondary">レビュー中</Badge>
                </div>
                <PersonCell
                    name="近藤 彩"
                    secondary="ブランド制作"
                    tertiary="この一括レビューの担当"
                />
            </CardHeader>
            <CardContent className="space-y-6">
                <StatGroup items={METRICS} cols={{ base: 1, sm: 3 }} />
                <Separator />
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>素材</TableHead>
                            <TableHead>種別</TableHead>
                            <TableHead>状態</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {ASSETS.map((asset) => (
                            <TableRow key={asset.id}>
                                <TableCell>
                                    <span className="font-medium">{asset.title}</span>
                                    <span className="block text-xs text-muted-foreground">
                                        {asset.id}
                                    </span>
                                </TableCell>
                                <TableCell>
                                    <Tag>{asset.tag}</Tag>
                                </TableCell>
                                <TableCell>
                                    <StatusLevel levels={REVIEW_LEVELS} value={asset.level} />
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
                <div className="grid gap-6 md:grid-cols-2">
                    <MetadataList items={FACTS} />
                    <Timeline items={HISTORY} />
                </div>
            </CardContent>
        </Card>
    );
}