347 lines
9.4 KiB
TypeScript
347 lines
9.4 KiB
TypeScript
import { readFile } from "node:fs/promises"
|
|
import path from "node:path"
|
|
import Link from "next/link"
|
|
|
|
export const dynamic = "force-dynamic"
|
|
|
|
type TodoState = "done" | "partial" | "planned"
|
|
|
|
type TodoTask = {
|
|
state: TodoState
|
|
text: string
|
|
}
|
|
|
|
type TodoBlock = {
|
|
title: string
|
|
tasks: TodoTask[]
|
|
notes: string[]
|
|
}
|
|
|
|
type TodoSection = {
|
|
title: string
|
|
blocks: TodoBlock[]
|
|
notes: string[]
|
|
}
|
|
|
|
type ProgressCounts = {
|
|
done: number
|
|
partial: number
|
|
planned: number
|
|
}
|
|
|
|
const metaSections = new Set(["Status Legend"])
|
|
|
|
function isMetaSection(section: TodoSection | null): boolean {
|
|
return section ? metaSections.has(section.title) : false
|
|
}
|
|
|
|
function toTaskState(token: string): TodoState {
|
|
const value = token.toLowerCase()
|
|
|
|
if (value === "x") {
|
|
return "done"
|
|
}
|
|
|
|
if (value === "~") {
|
|
return "partial"
|
|
}
|
|
|
|
return "planned"
|
|
}
|
|
|
|
function parseTodo(content: string): TodoSection[] {
|
|
const sections: TodoSection[] = []
|
|
let currentSection: TodoSection | null = null
|
|
let currentBlock: TodoBlock | null = null
|
|
|
|
const ensureSection = (title = "General"): TodoSection => {
|
|
if (!currentSection) {
|
|
currentSection = {
|
|
title,
|
|
blocks: [],
|
|
notes: [],
|
|
}
|
|
sections.push(currentSection)
|
|
}
|
|
|
|
return currentSection
|
|
}
|
|
|
|
const ensureBlock = (title = "Overview"): TodoBlock => {
|
|
const section = ensureSection()
|
|
|
|
if (!currentBlock) {
|
|
currentBlock = {
|
|
title,
|
|
tasks: [],
|
|
notes: [],
|
|
}
|
|
section.blocks.push(currentBlock)
|
|
}
|
|
|
|
return currentBlock
|
|
}
|
|
|
|
for (const rawLine of content.split("\n")) {
|
|
const line = rawLine.trim()
|
|
|
|
if (!line) {
|
|
continue
|
|
}
|
|
|
|
if (line.startsWith("# ")) {
|
|
continue
|
|
}
|
|
|
|
if (line.startsWith("## ")) {
|
|
currentSection = {
|
|
title: line.replace("## ", "").trim(),
|
|
blocks: [],
|
|
notes: [],
|
|
}
|
|
sections.push(currentSection)
|
|
currentBlock = null
|
|
continue
|
|
}
|
|
|
|
if (line.startsWith("### ")) {
|
|
const section = ensureSection()
|
|
|
|
currentBlock = {
|
|
title: line.replace("### ", "").trim(),
|
|
tasks: [],
|
|
notes: [],
|
|
}
|
|
|
|
section.blocks.push(currentBlock)
|
|
continue
|
|
}
|
|
|
|
const taskMatch = line.match(/^- \[([ x~X])\] (.+)$/)
|
|
|
|
if (taskMatch) {
|
|
if (isMetaSection(currentSection)) {
|
|
ensureSection().notes.push(taskMatch[0].replace("- ", ""))
|
|
continue
|
|
}
|
|
|
|
ensureBlock().tasks.push({
|
|
state: toTaskState(taskMatch[1]),
|
|
text: taskMatch[2].trim(),
|
|
})
|
|
continue
|
|
}
|
|
|
|
const bulletMatch = line.match(/^- (.+)$/)
|
|
|
|
if (bulletMatch) {
|
|
if (currentBlock) {
|
|
currentBlock.notes.push(bulletMatch[1].trim())
|
|
} else {
|
|
ensureSection().notes.push(bulletMatch[1].trim())
|
|
}
|
|
}
|
|
}
|
|
|
|
return sections
|
|
}
|
|
|
|
function getProgressCounts(sections: TodoSection[]): ProgressCounts {
|
|
const counts: ProgressCounts = {
|
|
done: 0,
|
|
partial: 0,
|
|
planned: 0,
|
|
}
|
|
|
|
for (const section of sections) {
|
|
if (isMetaSection(section)) {
|
|
continue
|
|
}
|
|
|
|
for (const block of section.blocks) {
|
|
for (const task of block.tasks) {
|
|
counts[task.state] += 1
|
|
}
|
|
}
|
|
}
|
|
|
|
return counts
|
|
}
|
|
|
|
function getProgressPercent(progress: ProgressCounts): number {
|
|
const total = progress.done + progress.partial + progress.planned
|
|
|
|
if (total === 0) {
|
|
return 0
|
|
}
|
|
|
|
return Math.round(((progress.done + progress.partial * 0.5) / total) * 100)
|
|
}
|
|
|
|
async function getTodoMarkdown(): Promise<string> {
|
|
const candidates = [
|
|
path.resolve(process.cwd(), "TODO.md"),
|
|
path.resolve(process.cwd(), "../TODO.md"),
|
|
path.resolve(process.cwd(), "../../TODO.md"),
|
|
]
|
|
|
|
for (const filePath of candidates) {
|
|
try {
|
|
return await readFile(filePath, "utf8")
|
|
} catch {
|
|
// Try next candidate path.
|
|
}
|
|
}
|
|
|
|
return "# TODO file not found\n\nCreate `/TODO.md` in the repository root to track progress."
|
|
}
|
|
|
|
function statusBadgeClass(state: TodoState): string {
|
|
if (state === "done") {
|
|
return "bg-emerald-50 text-emerald-700 border-emerald-200"
|
|
}
|
|
|
|
if (state === "partial") {
|
|
return "bg-amber-50 text-amber-700 border-amber-200"
|
|
}
|
|
|
|
return "bg-slate-50 text-slate-700 border-slate-200"
|
|
}
|
|
|
|
function statusLabel(state: TodoState): string {
|
|
if (state === "done") {
|
|
return "Done"
|
|
}
|
|
|
|
if (state === "partial") {
|
|
return "Partial"
|
|
}
|
|
|
|
return "Planned"
|
|
}
|
|
|
|
export default async function AdminTodoPage() {
|
|
const content = await getTodoMarkdown()
|
|
const sections = parseTodo(content)
|
|
const progress = getProgressCounts(sections)
|
|
const completionPercent = getProgressPercent(progress)
|
|
|
|
return (
|
|
<main className="mx-auto flex min-h-screen w-full max-w-6xl flex-col gap-8 px-6 py-12">
|
|
<header className="space-y-4">
|
|
<p className="text-sm uppercase tracking-[0.2em] text-neutral-500">Admin App</p>
|
|
<div className="flex flex-wrap items-end justify-between gap-4">
|
|
<div className="space-y-2">
|
|
<h1 className="text-4xl font-semibold tracking-tight">Roadmap and Progress</h1>
|
|
<p className="text-neutral-600">
|
|
Structured view from root `TODO.md` (single source of truth).
|
|
</p>
|
|
</div>
|
|
|
|
<Link
|
|
href="/"
|
|
className="inline-flex rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium hover:bg-neutral-100"
|
|
>
|
|
Back to dashboard
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
<section className="rounded-xl border border-neutral-200 bg-neutral-50 p-5">
|
|
<div className="mb-4 flex items-center justify-between gap-4">
|
|
<p className="text-sm font-medium text-neutral-600">Weighted completion</p>
|
|
<p className="text-sm font-semibold text-neutral-900">{completionPercent}%</p>
|
|
</div>
|
|
|
|
<div className="h-2 w-full rounded-full bg-neutral-200">
|
|
<div
|
|
className="h-2 rounded-full bg-neutral-900"
|
|
style={{ width: `${completionPercent}%` }}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid gap-4 sm:grid-cols-3">
|
|
<article className="rounded-xl border border-emerald-200 bg-emerald-50/50 p-4">
|
|
<p className="text-sm text-emerald-700">Completed items</p>
|
|
<p className="mt-2 text-3xl font-semibold text-emerald-900">{progress.done}</p>
|
|
</article>
|
|
|
|
<article className="rounded-xl border border-amber-200 bg-amber-50/60 p-4">
|
|
<p className="text-sm text-amber-700">Partially done items</p>
|
|
<p className="mt-2 text-3xl font-semibold text-amber-900">{progress.partial}</p>
|
|
</article>
|
|
|
|
<article className="rounded-xl border border-slate-300 bg-slate-50 p-4">
|
|
<p className="text-sm text-slate-700">Planned items</p>
|
|
<p className="mt-2 text-3xl font-semibold text-slate-900">{progress.planned}</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section className="grid gap-5">
|
|
{sections.map((section) => (
|
|
<article key={section.title} className="rounded-xl border border-neutral-200 p-5">
|
|
<h2 className="text-xl font-semibold tracking-tight text-neutral-900">
|
|
{section.title}
|
|
</h2>
|
|
|
|
{section.notes.length > 0 ? (
|
|
<ul className="mt-3 list-disc space-y-1 pl-5 text-sm text-neutral-600">
|
|
{section.notes.map((note) => (
|
|
<li key={note}>{note}</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
|
|
<div className="mt-4 grid gap-4">
|
|
{section.blocks.map((block) => (
|
|
<section
|
|
key={`${section.title}-${block.title}`}
|
|
className="rounded-lg bg-neutral-50 p-4"
|
|
>
|
|
<h3 className="text-sm font-semibold uppercase tracking-wide text-neutral-500">
|
|
{block.title}
|
|
</h3>
|
|
|
|
<ul className="mt-3 space-y-2">
|
|
{block.tasks.map((task) => (
|
|
<li
|
|
key={`${block.title}-${task.text}`}
|
|
className="flex flex-wrap items-center justify-between gap-2 rounded-md border border-neutral-200 bg-white px-3 py-2"
|
|
>
|
|
<p className="text-sm text-neutral-800">{task.text}</p>
|
|
<span
|
|
className={`rounded-full border px-2.5 py-1 text-xs font-medium ${statusBadgeClass(task.state)}`}
|
|
>
|
|
{statusLabel(task.state)}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{block.notes.length > 0 ? (
|
|
<ul className="mt-3 list-disc space-y-1 pl-5 text-sm text-neutral-600">
|
|
{block.notes.map((note) => (
|
|
<li key={note}>{note}</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
</section>
|
|
))}
|
|
</div>
|
|
</article>
|
|
))}
|
|
</section>
|
|
|
|
<details className="rounded-xl border border-neutral-200 p-5">
|
|
<summary className="cursor-pointer text-sm font-medium text-neutral-700">
|
|
View raw markdown source (`TODO.md`)
|
|
</summary>
|
|
<pre className="mt-4 overflow-x-auto whitespace-pre-wrap rounded-lg bg-neutral-50 p-4 text-sm leading-6 text-neutral-800">
|
|
{content}
|
|
</pre>
|
|
</details>
|
|
</main>
|
|
)
|
|
}
|