A database migrations panel that lists applied and pending migrations sorted by version and flags any migration applied out of order or marked irreversible.
"use client";
import { MigrationList, type Migration } from "@/components/ui/migration-list";
const NOW = new Date("2026-09-02T08:00:00");
const days = (n: number) => new Date(NOW.getTime() + n * 86_400_000);
const MIGRATIONS: Migration[] = [
{
version: "20260714093000",
name: "create users",
state: "applied",
appliedAt: days(-50),
duration: 84,
},
{
version: "20260801121500",
name: "add accounts",
state: "applied",
appliedAt: days(-32),
duration: 122,
},
{
version: "20260815090000",
name: "backfill account_id",
state: "applied",
appliedAt: days(-18),
duration: 41_200,
irreversible: true,
},
{
version: "20260810140000",
name: "add sessions index",
state: "applied",
appliedAt: days(-12),
duration: 610,
},
{
version: "20260828101500",
name: "drop legacy_sessions",
state: "failed",
appliedAt: days(-4),
error:
"ERROR: cannot drop table legacy_sessions because other objects depend on it",
},
{ version: "20260901080000", name: "add role default", state: "pending" },
{ version: "20260902093000", name: "add deleted_at", state: "pending" },
];
export default function MigrationListDemo() {
return (
<div className="w-full max-w-xl">
<MigrationList migrations={MIGRATIONS} now={NOW} />
</div>
);
}