Add procedures templates, step management, and nav tab

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/routes/(app)/companies/[companyId]/+layout.svelte

@@ -56,7 +56,8 @@
 			{ href: `${baseUrl}/packages`, label: 'Packages', show: has(['admin', 'manager', 'user', 'hr']) },
 			{ href: `${baseUrl}/links`, label: 'Links', show: true },
 			{ href: `${baseUrl}/documents`, label: 'Documents', show: has(['admin', 'manager', 'accountant']) },
-			{ href: `${baseUrl}/service-accounts`, label: 'Service Accounts', show: has(['admin', 'manager', 'accountant']) }
+			{ href: `${baseUrl}/service-accounts`, label: 'Service Accounts', show: has(['admin', 'manager', 'accountant']) },
+			{ href: `${baseUrl}/procedures`, label: 'Procedures', show: true }
 		].filter((t) => t.show)
 	);
 

src/routes/(app)/companies/[companyId]/procedures/+page.server.ts

@@ -0,0 +1,198 @@
+import { error, fail } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import { db } from '$lib/server/db/index.js';
+import {
+	procedureTemplates,
+	procedureSteps,
+	procedureInstances
+} from '$lib/server/db/schema.js';
+import { requireCompanyRole, requireCompanyRoleAny } from '$lib/server/authorization.js';
+import { logCompanyEvent } from '$lib/server/audit.js';
+import { and, asc, eq, isNull, sql, ne } from 'drizzle-orm';
+
+function trimOrNull(v: FormDataEntryValue | null): string | null {
+	const s = v?.toString().trim();
+	return s ? s : null;
+}
+
+export const load: PageServerLoad = async ({ locals, params, parent }) => {
+	const { roles } = await requireCompanyRoleAny(locals, params.companyId, [
+		'admin', 'manager', 'user', 'viewer', 'hr', 'accountant'
+	]);
+	await parent();
+
+	const canManage = roles.some((r) => r === 'admin' || r === 'manager');
+
+	const whereClause = canManage
+		? and(eq(procedureTemplates.companyId, params.companyId), isNull(procedureTemplates.deletedAt))
+		: and(
+				eq(procedureTemplates.companyId, params.companyId),
+				isNull(procedureTemplates.deletedAt),
+				eq(procedureTemplates.isPublished, true)
+			);
+
+	const templates = await db
+		.select({
+			id: procedureTemplates.id,
+			title: procedureTemplates.title,
+			description: procedureTemplates.description,
+			category: procedureTemplates.category,
+			isPublished: procedureTemplates.isPublished,
+			createdAt: procedureTemplates.createdAt,
+			stepCount: sql<number>`(select count(*)::int from procedure_steps where template_id = ${procedureTemplates.id})`,
+			instanceCount: sql<number>`(select count(*)::int from procedure_instances where template_id = ${procedureTemplates.id} and status != 'cancelled')`
+		})
+		.from(procedureTemplates)
+		.where(whereClause)
+		.orderBy(asc(procedureTemplates.title));
+
+	return { templates, canManage };
+};
+
+export const actions: Actions = {
+	createTemplate: async ({ request, locals, params }) => {
+		const { user } = await requireCompanyRole(locals, params.companyId, 'manager');
+		const fd = await request.formData();
+		const title = trimOrNull(fd.get('title'));
+		const description = trimOrNull(fd.get('description'));
+		const category = trimOrNull(fd.get('category'));
+
+		if (!title) return fail(400, { action: 'createTemplate', error: 'Title is required' });
+
+		const [inserted] = await db
+			.insert(procedureTemplates)
+			.values({
+				companyId: params.companyId,
+				title,
+				description,
+				category,
+				createdBy: user.id
+			})
+			.returning({ id: procedureTemplates.id });
+
+		await logCompanyEvent(
+			params.companyId,
+			user.id,
+			'procedure_template_created',
+			`Procedure "${title}" created`,
+			{ templateId: inserted.id }
+		);
+
+		return { success: true, action: 'createTemplate' };
+	},
+
+	updateTemplate: async ({ request, locals, params }) => {
+		const { user } = await requireCompanyRole(locals, params.companyId, 'manager');
+		const fd = await request.formData();
+		const id = trimOrNull(fd.get('id'));
+		const title = trimOrNull(fd.get('title'));
+		const description = trimOrNull(fd.get('description'));
+		const category = trimOrNull(fd.get('category'));
+
+		if (!id) return fail(400, { action: 'updateTemplate', error: 'Template id required' });
+		if (!title) return fail(400, { action: 'updateTemplate', error: 'Title is required' });
+
+		const result = await db
+			.update(procedureTemplates)
+			.set({ title, description, category, updatedAt: new Date() })
+			.where(
+				and(
+					eq(procedureTemplates.id, id),
+					eq(procedureTemplates.companyId, params.companyId),
+					isNull(procedureTemplates.deletedAt)
+				)
+			)
+			.returning({ id: procedureTemplates.id });
+
+		if (result.length === 0) error(404, 'Template not found');
+
+		await logCompanyEvent(params.companyId, user.id, 'procedure_template_updated',
+			`Procedure "${title}" updated`, { templateId: id });
+
+		return { success: true, action: 'updateTemplate' };
+	},
+
+	deleteTemplate: async ({ request, locals, params }) => {
+		const { user } = await requireCompanyRole(locals, params.companyId, 'manager');
+		const fd = await request.formData();
+		const id = trimOrNull(fd.get('id'));
+		if (!id) return fail(400, { action: 'deleteTemplate', error: 'Template id required' });
+
+		const [existing] = await db
+			.select({ id: procedureTemplates.id, title: procedureTemplates.title })
+			.from(procedureTemplates)
+			.where(
+				and(
+					eq(procedureTemplates.id, id),
+					eq(procedureTemplates.companyId, params.companyId),
+					isNull(procedureTemplates.deletedAt)
+				)
+			)
+			.limit(1);
+		if (!existing) error(404, 'Template not found');
+
+		// Check for active instances (RESTRICT FK would block, but give a nice error)
+		const [activeCount] = await db
+			.select({ count: sql<number>`count(*)::int` })
+			.from(procedureInstances)
+			.where(
+				and(eq(procedureInstances.templateId, id), ne(procedureInstances.status, 'cancelled'))
+			);
+		if (activeCount && activeCount.count > 0) {
+			return fail(400, {
+				action: 'deleteTemplate',
+				error: `Cannot delete — ${activeCount.count} active instance(s) exist`
+			});
+		}
+
+		await db
+			.update(procedureTemplates)
+			.set({ deletedAt: new Date(), updatedAt: new Date() })
+			.where(eq(procedureTemplates.id, id));
+
+		await logCompanyEvent(params.companyId, user.id, 'procedure_template_deleted',
+			`Procedure "${existing.title}" deleted`, { templateId: id });
+
+		return { success: true, action: 'deleteTemplate' };
+	},
+
+	publishTemplate: async ({ request, locals, params }) => {
+		await requireCompanyRole(locals, params.companyId, 'manager');
+		const fd = await request.formData();
+		const id = trimOrNull(fd.get('id'));
+		if (!id) return fail(400, { action: 'publishTemplate', error: 'Template id required' });
+
+		await db
+			.update(procedureTemplates)
+			.set({ isPublished: true, updatedAt: new Date() })
+			.where(
+				and(
+					eq(procedureTemplates.id, id),
+					eq(procedureTemplates.companyId, params.companyId),
+					isNull(procedureTemplates.deletedAt)
+				)
+			);
+
+		return { success: true, action: 'publishTemplate' };
+	},
+
+	unpublishTemplate: async ({ request, locals, params }) => {
+		await requireCompanyRole(locals, params.companyId, 'manager');
+		const fd = await request.formData();
+		const id = trimOrNull(fd.get('id'));
+		if (!id) return fail(400, { action: 'unpublishTemplate', error: 'Template id required' });
+
+		await db
+			.update(procedureTemplates)
+			.set({ isPublished: false, updatedAt: new Date() })
+			.where(
+				and(
+					eq(procedureTemplates.id, id),
+					eq(procedureTemplates.companyId, params.companyId),
+					isNull(procedureTemplates.deletedAt)
+				)
+			);
+
+		return { success: true, action: 'unpublishTemplate' };
+	}
+};

src/routes/(app)/companies/[companyId]/procedures/+page.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import type { PageData, ActionData } from './$types';
+
+	let { data, form }: { data: PageData; form: ActionData } = $props();
+
+	let showAddForm = $state(false);
+	let editingId = $state<string | null>(null);
+	let deletingId = $state<string | null>(null);
+
+	const inputCls = 'w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white';
+	const labelCls = 'mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300';
+</script>
+
+<svelte:head>
+	<title>Procedures - {data.company.name}</title>
+</svelte:head>
+
+<div class="space-y-6">
+	<header>
+		<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Procedures</h1>
+		<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+			Reusable checklists for standard processes. Start an instance to track progress on a specific case.
+		</p>
+	</header>
+
+	{#if form?.error}
+		<div class="rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/30 dark:text-red-300">{form.error}</div>
+	{/if}
+
+	{#if data.canManage}
+		<section class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
+			<div class="flex items-center justify-between">
+				<h2 class="font-semibold text-gray-900 dark:text-white">New Procedure</h2>
+				<button type="button" onclick={() => { showAddForm = !showAddForm; editingId = null; }}
+					class="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700">
+					{showAddForm ? 'Cancel' : '+ New'}
+				</button>
+			</div>
+			{#if showAddForm}
+				<form method="POST" action="?/createTemplate"
+					use:enhance={() => async ({ result, update, formElement }) => {
+						await update({ reset: false });
+						if (result.type === 'success') { showAddForm = false; formElement.reset(); }
+					}}
+					class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
+					<div class="md:col-span-2">
+						<label for="new-title" class={labelCls}>Title <span class="text-red-500">*</span></label>
+						<input id="new-title" name="title" type="text" required class={inputCls} placeholder="e.g. Purchase Order Process" />
+					</div>
+					<div>
+						<label for="new-category" class={labelCls}>Category</label>
+						<input id="new-category" name="category" type="text" class={inputCls} placeholder="e.g. Finance, HR, Operations" />
+					</div>
+					<div class="md:col-span-2">
+						<label for="new-desc" class={labelCls}>Description</label>
+						<textarea id="new-desc" name="description" rows="2" class={inputCls}></textarea>
+					</div>
+					<div class="md:col-span-2 flex justify-end">
+						<button type="submit" class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">Create</button>
+					</div>
+				</form>
+			{/if}
+		</section>
+	{/if}
+
+	{#if data.templates.length === 0}
+		<div class="rounded-lg border border-dashed border-gray-300 bg-white p-10 text-center dark:border-gray-700 dark:bg-gray-800">
+			<p class="text-sm text-gray-500 dark:text-gray-400">No procedures yet.</p>
+		</div>
+	{:else}
+		<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+			{#each data.templates as tmpl (tmpl.id)}
+				<div class="group relative flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4 transition-colors hover:border-blue-400 hover:shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-500">
+					<a href={`/companies/${data.company.id}/procedures/${tmpl.id}`}
+						class="absolute inset-0 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
+						<span class="sr-only">Open {tmpl.title}</span>
+					</a>
+					<div class="flex items-start justify-between gap-2">
+						<h3 class="text-sm font-semibold text-gray-900 group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400">{tmpl.title}</h3>
+						<span class="flex-shrink-0 rounded-full px-2 py-0.5 text-xs font-medium {tmpl.isPublished
+							? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
+							: 'bg-gray-200 text-gray-600 dark:bg-gray-600 dark:text-gray-400'}">
+							{tmpl.isPublished ? 'Published' : 'Draft'}
+						</span>
+					</div>
+					{#if tmpl.category}
+						<span class="text-xs text-gray-500 dark:text-gray-400">{tmpl.category}</span>
+					{/if}
+					{#if tmpl.description}
+						<p class="line-clamp-2 text-xs text-gray-600 dark:text-gray-300">{tmpl.description}</p>
+					{/if}
+					<div class="mt-auto flex gap-3 text-xs text-gray-500 dark:text-gray-400">
+						<span>{tmpl.stepCount} {tmpl.stepCount === 1 ? 'step' : 'steps'}</span>
+						<span>{tmpl.instanceCount} {tmpl.instanceCount === 1 ? 'instance' : 'instances'}</span>
+					</div>
+					{#if data.canManage}
+						<div class="relative z-10 flex justify-end gap-2 border-t border-gray-100 pt-2 dark:border-gray-700">
+							{#if tmpl.isPublished}
+								<form method="POST" action="?/unpublishTemplate" use:enhance={() => async ({ update }) => await update({ reset: false })}>
+									<input type="hidden" name="id" value={tmpl.id} />
+									<button type="submit" class="text-xs font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400">Unpublish</button>
+								</form>
+							{:else}
+								<form method="POST" action="?/publishTemplate" use:enhance={() => async ({ update }) => await update({ reset: false })}>
+									<input type="hidden" name="id" value={tmpl.id} />
+									<button type="submit" class="text-xs font-medium text-green-600 hover:text-green-700 dark:text-green-400">Publish</button>
+								</form>
+							{/if}
+							<button type="button" onclick={() => (deletingId = deletingId === tmpl.id ? null : tmpl.id)}
+								class="text-xs font-medium text-red-600 hover:text-red-700 dark:text-red-400">Delete</button>
+						</div>
+						{#if deletingId === tmpl.id}
+							<form method="POST" action="?/deleteTemplate"
+								use:enhance={() => async ({ update }) => { await update({ reset: false }); deletingId = null; }}
+								class="relative z-10 mt-1 rounded-md bg-red-50 p-2 text-xs dark:bg-red-900/30">
+								<input type="hidden" name="id" value={tmpl.id} />
+								<p class="mb-2 text-red-700 dark:text-red-300">Delete "{tmpl.title}"?</p>
+								<div class="flex justify-end gap-2">
+									<button type="button" onclick={() => (deletingId = null)}
+										class="rounded border border-gray-300 bg-white px-2 py-1 text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">Cancel</button>
+									<button type="submit" class="rounded bg-red-600 px-2 py-1 font-medium text-white hover:bg-red-700">Delete</button>
+								</div>
+							</form>
+						{/if}
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>

src/routes/(app)/companies/[companyId]/procedures/[templateId]/+page.server.ts

@@ -0,0 +1,230 @@
+import { error, fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import { db } from '$lib/server/db/index.js';
+import {
+	procedureTemplates,
+	procedureSteps,
+	procedureInstances,
+	procedureInstanceSteps,
+	users
+} from '$lib/server/db/schema.js';
+import { requireCompanyRole, requireCompanyRoleAny } from '$lib/server/authorization.js';
+import { logCompanyEvent } from '$lib/server/audit.js';
+import { and, asc, desc, eq, isNull, sql } from 'drizzle-orm';
+
+function trimOrNull(v: FormDataEntryValue | null): string | null {
+	const s = v?.toString().trim();
+	return s ? s : null;
+}
+
+export const load: PageServerLoad = async ({ locals, params, parent }) => {
+	const { roles } = await requireCompanyRoleAny(locals, params.companyId, [
+		'admin', 'manager', 'user', 'viewer', 'hr', 'accountant'
+	]);
+	await parent();
+
+	const canManage = roles.some((r) => r === 'admin' || r === 'manager');
+
+	const [template] = await db
+		.select()
+		.from(procedureTemplates)
+		.where(
+			and(
+				eq(procedureTemplates.id, params.templateId),
+				eq(procedureTemplates.companyId, params.companyId),
+				isNull(procedureTemplates.deletedAt)
+			)
+		)
+		.limit(1);
+
+	if (!template) error(404, 'Procedure not found');
+	if (!canManage && !template.isPublished) error(404, 'Procedure not found');
+
+	const steps = await db
+		.select()
+		.from(procedureSteps)
+		.where(eq(procedureSteps.templateId, params.templateId))
+		.orderBy(asc(procedureSteps.stepNumber));
+
+	const instances = await db
+		.select({
+			id: procedureInstances.id,
+			title: procedureInstances.title,
+			status: procedureInstances.status,
+			startedByName: users.displayName,
+			createdAt: procedureInstances.createdAt,
+			completedAt: procedureInstances.completedAt
+		})
+		.from(procedureInstances)
+		.leftJoin(users, eq(procedureInstances.startedBy, users.id))
+		.where(
+			and(
+				eq(procedureInstances.templateId, params.templateId),
+				eq(procedureInstances.companyId, params.companyId)
+			)
+		)
+		.orderBy(desc(procedureInstances.createdAt));
+
+	return { template, steps, instances, canManage };
+};
+
+export const actions: Actions = {
+	addStep: async ({ request, locals, params }) => {
+		await requireCompanyRole(locals, params.companyId, 'manager');
+		const fd = await request.formData();
+		const title = trimOrNull(fd.get('title'));
+		const description = trimOrNull(fd.get('description'));
+		const assigneeRole = trimOrNull(fd.get('assigneeRole'));
+		const estimatedMinutes = fd.get('estimatedMinutes')
+			? parseInt(fd.get('estimatedMinutes')!.toString())
+			: null;
+
+		if (!title) return fail(400, { action: 'addStep', error: 'Step title is required' });
+
+		const [maxRow] = await db
+			.select({ max: sql<number>`coalesce(max(${procedureSteps.stepNumber}), 0)::int` })
+			.from(procedureSteps)
+			.where(eq(procedureSteps.templateId, params.templateId));
+
+		await db.insert(procedureSteps).values({
+			templateId: params.templateId,
+			stepNumber: (maxRow?.max ?? 0) + 1,
+			title,
+			description,
+			assigneeRole,
+			estimatedMinutes: estimatedMinutes && !isNaN(estimatedMinutes) ? estimatedMinutes : null
+		});
+
+		return { success: true, action: 'addStep' };
+	},
+
+	updateStep: async ({ request, locals, params }) => {
+		await requireCompanyRole(locals, params.companyId, 'manager');
+		const fd = await request.formData();
+		const stepId = trimOrNull(fd.get('stepId'));
+		const title = trimOrNull(fd.get('title'));
+		const description = trimOrNull(fd.get('description'));
+		const assigneeRole = trimOrNull(fd.get('assigneeRole'));
+		const estimatedMinutes = fd.get('estimatedMinutes')
+			? parseInt(fd.get('estimatedMinutes')!.toString())
+			: null;
+
+		if (!stepId) return fail(400, { action: 'updateStep', error: 'Step id required' });
+		if (!title) return fail(400, { action: 'updateStep', error: 'Step title is required' });
+
+		await db
+			.update(procedureSteps)
+			.set({
+				title,
+				description,
+				assigneeRole,
+				estimatedMinutes: estimatedMinutes && !isNaN(estimatedMinutes) ? estimatedMinutes : null
+			})
+			.where(
+				and(eq(procedureSteps.id, stepId), eq(procedureSteps.templateId, params.templateId))
+			);
+
+		return { success: true, action: 'updateStep' };
+	},
+
+	removeStep: async ({ request, locals, params }) => {
+		await requireCompanyRole(locals, params.companyId, 'manager');
+		const fd = await request.formData();
+		const stepId = trimOrNull(fd.get('stepId'));
+		if (!stepId) return fail(400, { action: 'removeStep', error: 'Step id required' });
+
+		try {
+			await db
+				.delete(procedureSteps)
+				.where(
+					and(eq(procedureSteps.id, stepId), eq(procedureSteps.templateId, params.templateId))
+				);
+		} catch {
+			return fail(400, {
+				action: 'removeStep',
+				error: 'Cannot remove — step is referenced by active instances'
+			});
+		}
+
+		return { success: true, action: 'removeStep' };
+	},
+
+	reorderSteps: async ({ request, locals, params }) => {
+		await requireCompanyRole(locals, params.companyId, 'manager');
+		const fd = await request.formData();
+		const raw = fd.get('steps')?.toString();
+		if (!raw) return fail(400, { action: 'reorderSteps', error: 'Steps data required' });
+
+		let parsed: Array<{ id: string; stepNumber: number }>;
+		try {
+			parsed = JSON.parse(raw);
+		} catch {
+			return fail(400, { action: 'reorderSteps', error: 'Invalid JSON' });
+		}
+
+		await db.transaction(async (tx) => {
+			for (const { id, stepNumber } of parsed) {
+				await tx
+					.update(procedureSteps)
+					.set({ stepNumber })
+					.where(
+						and(eq(procedureSteps.id, id), eq(procedureSteps.templateId, params.templateId))
+					);
+			}
+		});
+
+		return { success: true, action: 'reorderSteps' };
+	},
+
+	startInstance: async ({ request, locals, params }) => {
+		const { user } = await requireCompanyRoleAny(locals, params.companyId, [
+			'admin', 'manager', 'user', 'hr', 'accountant'
+		]);
+		const fd = await request.formData();
+		const title = trimOrNull(fd.get('title'));
+		if (!title) return fail(400, { action: 'startInstance', error: 'Instance title is required' });
+
+		const steps = await db
+			.select()
+			.from(procedureSteps)
+			.where(eq(procedureSteps.templateId, params.templateId))
+			.orderBy(asc(procedureSteps.stepNumber));
+
+		if (steps.length === 0) {
+			return fail(400, { action: 'startInstance', error: 'Template has no steps' });
+		}
+
+		const [instance] = await db
+			.insert(procedureInstances)
+			.values({
+				templateId: params.templateId,
+				companyId: params.companyId,
+				title,
+				startedBy: user.id
+			})
+			.returning({ id: procedureInstances.id });
+
+		await db.insert(procedureInstanceSteps).values(
+			steps.map((s) => ({
+				instanceId: instance.id,
+				stepId: s.id,
+				stepNumber: s.stepNumber,
+				title: s.title,
+				description: s.description
+			}))
+		);
+
+		await logCompanyEvent(
+			params.companyId,
+			user.id,
+			'procedure_instance_started',
+			`Started "${title}" (from procedure template)`,
+			{ instanceId: instance.id, templateId: params.templateId }
+		);
+
+		redirect(
+			303,
+			`/companies/${params.companyId}/procedures/${params.templateId}/instances/${instance.id}`
+		);
+	}
+};

src/routes/(app)/companies/[companyId]/procedures/[templateId]/+page.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { formatDate } from '$lib/utils/date.js';
+	import type { PageData, ActionData } from './$types';
+
+	let { data, form }: { data: PageData; form: ActionData } = $props();
+
+	let showAddStep = $state(false);
+	let editingStepId = $state<string | null>(null);
+	let showStartInstance = $state(false);
+
+	const STATUS_BADGE: Record<string, string> = {
+		in_progress: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+		completed: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+		cancelled: 'bg-gray-200 text-gray-600 dark:bg-gray-600 dark:text-gray-400'
+	};
+
+	const inputCls = 'w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white';
+	const labelCls = 'mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300';
+</script>
+
+<svelte:head>
+	<title>{data.template.title} - Procedures</title>
+</svelte:head>
+
+<div class="space-y-6">
+	<header class="flex items-start justify-between gap-4">
+		<div>
+			<div class="flex items-center gap-2">
+				<a href={`/companies/${data.company.id}/procedures`} class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">&larr; Procedures</a>
+			</div>
+			<h1 class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{data.template.title}</h1>
+			{#if data.template.description}
+				<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{data.template.description}</p>
+			{/if}
+			<div class="mt-2 flex gap-2">
+				<span class="rounded-full px-2 py-0.5 text-xs font-medium {data.template.isPublished
+					? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
+					: 'bg-gray-200 text-gray-600 dark:bg-gray-600 dark:text-gray-400'}">
+					{data.template.isPublished ? 'Published' : 'Draft'}
+				</span>
+				{#if data.template.category}
+					<span class="rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300">{data.template.category}</span>
+				{/if}
+			</div>
+		</div>
+		<button type="button" onclick={() => { showStartInstance = !showStartInstance; }}
+			class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
+			Start Instance
+		</button>
+	</header>
+
+	{#if form?.error}
+		<div class="rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/30 dark:text-red-300">{form.error}</div>
+	{/if}
+
+	{#if showStartInstance}
+		<form method="POST" action="?/startInstance"
+			use:enhance
+			class="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-700 dark:bg-blue-900/20">
+			<label for="instance-title" class={labelCls}>Instance Title <span class="text-red-500">*</span></label>
+			<input id="instance-title" name="title" type="text" required value={data.template.title} class={inputCls} />
+			<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Customize for this specific case, e.g. "Onboard ABC Corp"</p>
+			<div class="mt-3 flex justify-end gap-2">
+				<button type="button" onclick={() => (showStartInstance = false)}
+					class="rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-600 dark:text-gray-200">Cancel</button>
+				<button type="submit" class="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700">Start</button>
+			</div>
+		</form>
+	{/if}
+
+	<!-- Steps -->
+	<section class="rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
+		<h2 class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+			Steps ({data.steps.length})
+		</h2>
+
+		{#if data.steps.length === 0}
+			<p class="py-4 text-center text-sm text-gray-500 dark:text-gray-400">No steps yet. Add the first step below.</p>
+		{:else}
+			<ol class="space-y-3">
+				{#each data.steps as step, i (step.id)}
+					<li class="flex items-start gap-3 rounded-md border border-gray-100 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-700/30">
+						<span class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-bold text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
+							{step.stepNumber}
+						</span>
+						<div class="min-w-0 flex-1">
+							{#if editingStepId === step.id && data.canManage}
+								<form method="POST" action="?/updateStep"
+									use:enhance={() => async ({ result, update }) => {
+										await update({ reset: false });
+										if (result.type === 'success') editingStepId = null;
+									}}
+									class="space-y-2">
+									<input type="hidden" name="stepId" value={step.id} />
+									<input name="title" type="text" required value={step.title} class={inputCls} />
+									<textarea name="description" rows="2" class={inputCls}>{step.description ?? ''}</textarea>
+									<div class="flex gap-2">
+										<input name="assigneeRole" type="text" value={step.assigneeRole ?? ''} placeholder="Role (e.g. manager)" class={inputCls} />
+										<input name="estimatedMinutes" type="number" min="0" value={step.estimatedMinutes ?? ''} placeholder="Est. min" class={inputCls} />
+									</div>
+									<div class="flex justify-end gap-2">
+										<button type="button" onclick={() => (editingStepId = null)} class="text-xs text-gray-500">Cancel</button>
+										<button type="submit" class="text-xs font-medium text-blue-600">Save</button>
+									</div>
+								</form>
+							{:else}
+								<div class="text-sm font-medium text-gray-900 dark:text-white">{step.title}</div>
+								{#if step.description}
+									<p class="mt-0.5 text-xs text-gray-600 dark:text-gray-300">{step.description}</p>
+								{/if}
+								<div class="mt-1 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-400">
+									{#if step.assigneeRole}
+										<span class="rounded bg-gray-200 px-1.5 py-0.5 dark:bg-gray-600 dark:text-gray-300">{step.assigneeRole}</span>
+									{/if}
+									{#if step.estimatedMinutes}
+										<span>~{step.estimatedMinutes} min</span>
+									{/if}
+								</div>
+								{#if data.canManage}
+									<div class="mt-2 flex gap-2 text-xs">
+										<button type="button" onclick={() => { editingStepId = step.id; }} class="font-medium text-blue-600 dark:text-blue-400">Edit</button>
+										<form method="POST" action="?/removeStep" use:enhance={() => async ({ update }) => await update({ reset: false })}>
+											<input type="hidden" name="stepId" value={step.id} />
+											<button type="submit" class="font-medium text-red-600 dark:text-red-400">Remove</button>
+										</form>
+									</div>
+								{/if}
+							{/if}
+						</div>
+					</li>
+				{/each}
+			</ol>
+		{/if}
+
+		{#if data.canManage}
+			<div class="mt-4 border-t border-gray-100 pt-4 dark:border-gray-700">
+				{#if showAddStep}
+					<form method="POST" action="?/addStep"
+						use:enhance={() => async ({ result, update, formElement }) => {
+							await update({ reset: false });
+							if (result.type === 'success') formElement.reset();
+						}}
+						class="space-y-2">
+						<input name="title" type="text" required placeholder="Step title" class={inputCls} />
+						<textarea name="description" rows="2" placeholder="Description (optional)" class={inputCls}></textarea>
+						<div class="flex gap-2">
+							<input name="assigneeRole" type="text" placeholder="Role (optional)" class={inputCls} />
+							<input name="estimatedMinutes" type="number" min="0" placeholder="Est. minutes" class={inputCls} />
+						</div>
+						<div class="flex justify-end gap-2">
+							<button type="button" onclick={() => (showAddStep = false)} class="text-xs text-gray-500">Cancel</button>
+							<button type="submit" class="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700">Add Step</button>
+						</div>
+					</form>
+				{:else}
+					<button type="button" onclick={() => (showAddStep = true)}
+						class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400">+ Add Step</button>
+				{/if}
+			</div>
+		{/if}
+	</section>
+
+	<!-- Instances -->
+	<section class="rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
+		<h2 class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+			Instances ({data.instances.length})
+		</h2>
+		{#if data.instances.length === 0}
+			<p class="py-4 text-center text-sm text-gray-500 dark:text-gray-400">No instances started yet.</p>
+		{:else}
+			<div class="space-y-2">
+				{#each data.instances as inst (inst.id)}
+					<a href={`/companies/${data.company.id}/procedures/${data.template.id}/instances/${inst.id}`}
+						class="flex items-center justify-between rounded-md border border-gray-100 bg-gray-50 p-3 transition-colors hover:border-blue-300 dark:border-gray-700 dark:bg-gray-700/30 dark:hover:border-blue-500">
+						<div>
+							<div class="text-sm font-medium text-gray-900 dark:text-white">{inst.title}</div>
+							<div class="text-xs text-gray-500 dark:text-gray-400">
+								Started by {inst.startedByName ?? 'Unknown'} · {formatDate(inst.createdAt)}
+							</div>
+						</div>
+						<span class="rounded-full px-2 py-0.5 text-xs font-medium {STATUS_BADGE[inst.status] ?? STATUS_BADGE.in_progress}">
+							{inst.status.replace('_', ' ')}
+						</span>
+					</a>
+				{/each}
+			</div>
+		{/if}
+	</section>
+</div>