Artifacts

import { ClipboardList } from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";
import { StatusBadge, PriorityBadge } from "@/components/shared/status-badge";
import { RecordRow, RecordList } from "@/components/shared/record-row";
import { EmptyState } from "@/components/shared/empty-state";
import { getWorkOrders } from "@/lib/content/work-orders";

export const dynamic = "force-dynamic";
export const metadata = { title: "Work Orders" };

export default function WorkOrdersPage() {
  const workOrders = getWorkOrders();

  return (
    <div>
      <PageHeader
        eyebrow="Operate"
        title="Work Orders"
        description="Each work order is a unit of owned work with explicit acceptance criteria."
      />

      {workOrders.length === 0 ? (
        <EmptyState
          icon={ClipboardList}
          title="No work orders"
          description="Add a work-order.md under a work-orders/ folder to see it here."
          hint="src/work-orders/WO-XXXX/work-order.md"
        />
      ) : (
        <RecordList>
          {workOrders.map((w) => (
            <RecordRow
              key={w.id}
              href={`/work-orders/${w.id}`}
              id={w.id.split("-").slice(0, 2).join("-")}
              title={w.title.replace(/^[A-Z]+-\d+\s*[—-]\s*/, "")}
              description={w.objective}
              badges={
                <>
                  {w.owner !== "—" && (
                    <span className="text-xs text-muted-foreground">{w.owner}</span>
                  )}
                  <PriorityBadge priority={w.priority} />
                  <StatusBadge status={w.status} />
                </>
              }
            />
          ))}
        </RecordList>
      )}
    </div>
  );
}