Add procedures templates, step management, and nav tab
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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)
|
||||
);
|
||||
|
||||
|
||||
@@ -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' };
|
||||
}
|
||||
};
|
||||
@@ -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>
|
||||
@@ -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}`
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -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">← 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>
|
||||
Reference in New Issue
Block a user