+ );
+}
+
+/** The standard bullets every generated document prints; never editable per template. */
+export function StandardSafetyBullets({ extra }: { extra?: string | null }) {
+ return (
+
+ {SAFETY_BULLETS.map((bullet) => (
+
+ {bullet}
+
+ ))}
+ {Boolean(extra) && (
+
{extra}
+ )}
+
+ );
+}
diff --git a/src/app/(protected)/completion-docs/_components/completion-templates-table.tsx b/src/app/(protected)/completion-docs/_components/completion-templates-table.tsx
new file mode 100644
index 00000000..5756ad64
--- /dev/null
+++ b/src/app/(protected)/completion-docs/_components/completion-templates-table.tsx
@@ -0,0 +1,162 @@
+import { Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
+import { Eye, FileText, Pencil, Search } from "lucide-react";
+import type { MouseEvent } from "react";
+import { TableLoadingRow } from "@/components/ui/table-state-rows";
+import { Text } from "@/components/ui/text";
+import { COMPLETION_TEMPLATE_COPY } from "@/domain/completion-templates/constants/completion-template-constants";
+import type { CompletionTemplate } from "@/domain/completion-templates/types/completion-template";
+import { formatTemplateDate } from "@/domain/completion-templates/utils/format-template-date";
+import { CompletionTemplateCreatedBy } from "./completion-template-created-by";
+
+const HEAD_CELL_SX = {
+ fontSize: 10.5,
+ fontWeight: 700,
+ letterSpacing: "0.06em",
+ textTransform: "uppercase",
+ background: "var(--color-bg-muted)",
+ padding: "11px 14px",
+ whiteSpace: "nowrap",
+} as const;
+
+const BODY_CELL_SX = { fontSize: 13, padding: "8px 12px" } as const;
+
+type CompletionTemplatesTableProps = {
+ templates: CompletionTemplate[];
+ isLoading: boolean;
+ /** The load failed: the page shows the error, so there is no search result to explain. */
+ hasError: boolean;
+ canEdit: boolean;
+ onView: (template: CompletionTemplate) => void;
+ onEdit: (template: CompletionTemplate) => void;
+};
+
+function RowAction({
+ label,
+ icon: Icon,
+ onClick,
+}: {
+ label: string;
+ icon: typeof Eye;
+ onClick: () => void;
+}) {
+ return (
+
+ );
+}
+
+function EmptyRow() {
+ return (
+
+
+