> ## Documentation Index
> Fetch the complete documentation index at: https://docs.encoreos.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Procedures

> Browse, view, create, and edit operational procedures — with category and status filters, visual workflow canvas, and version history.

The Procedures page is the main library for all organizational procedures. It is located at route `/gr/procedures` and provides search, category/status filtering, and grid or list view toggle.

## Overview

The page fetches procedures using `useProcedureList` with live search (deferred for performance) and filters for category and status. Users with `gr.procedures.create` see an **Add Procedure** button that navigates to `/gr/procedures/new`. Each card links to the Procedure Details page. View can be toggled between grid and list layout.

Available categories: `clinical`, `operational`, `safety`, `hr`, `financial`, `it`, `emergency`, `other`.

Available statuses: `draft`, `review`, `approved`, `deprecated`, `archived`.

## Who it's for

Requires permission: `gr.procedures.view`

## Before you start

* Your account must have the `gr.procedures.view` permission.
* Creating procedures additionally requires `gr.procedures.create`.

## Finding a procedure

1. Go to **Governance & Compliance → Procedures** at `/gr/procedures`.
2. Use the search bar to filter by title or keyword.
3. Apply **Category** and **Status** filters as needed.
4. Toggle between grid and list views using the layout buttons.
5. Select a procedure card to open the Procedure Details page.
6. To create a new procedure, select **Add Procedure** (requires `gr.procedures.create`).

| Concept          | Description                                                                 |
| ---------------- | --------------------------------------------------------------------------- |
| Category         | Classifies the procedure domain (clinical, safety, operational, etc.)       |
| Status lifecycle | `draft` → `review` → `approved`; deprecated/archived for retired procedures |
| Deferred search  | Search input is debounced via React's `useDeferredValue`                    |

## Viewing a procedure

The Procedure Details page (`/gr/procedures/:id`) displays a single procedure record — its metadata, visual step canvas, version history, and execution log.

The page renders four tabs — **Overview**, **Steps**, **Versions**, and **Executions** — controlled via URL query parameter `?tab=`. The active tab persists in the URL for shareability. A visual canvas (`ProcedureCanvas`) renders workflow nodes and edges in read-only mode. Users with `gr.procedures.edit` see an **Edit** button; users with `gr.procedure_executions.create` see an **Execute** button when the procedure status is `approved`. Users with `gr.procedure_templates.contribute` may save an approved procedure as a template from this page.

1. Navigate to **Governance & Compliance → Procedures** at `/gr/procedures`.
2. Select a procedure card or row to open its detail page.
3. Review the **Overview** tab for title, owner, category, effective date, review cycle, current version, and linked policy (if any).
4. Select the **Steps** tab to view the visual workflow canvas.
5. Select the **Versions** tab to review published version history.
6. Select the **Executions** tab to view execution records.
7. Use the **Execute** button (visible on approved procedures with the required permission) to record a new execution.
8. Use **Edit** to open the procedure editor.

| Concept                                              | Description                                                       |
| ---------------------------------------------------- | ----------------------------------------------------------------- |
| `procedure_number`                                   | Unique identifier displayed in monospace; assigned at creation    |
| Workflow canvas                                      | Read-only visual diagram of `workflow_nodes` and `workflow_edges` |
| Tabs (`overview`, `steps`, `versions`, `executions`) | URL-synced via `?tab=` param                                      |
| Status                                               | `draft` → `review` → `approved` → `deprecated` / `archived`       |
| `review_cycle_months`                                | Displayed on the Overview tab; defaults to 12                     |

## Creating a procedure

The New Procedure page (`/gr/procedures/new`) renders `ProcedureEditPage` in creation mode for a new `gr_procedures` record. Requires `gr.procedures.create`.

Before you start: have the procedure title, category, responsible owner, and content ready.

1. Navigate to `/gr/procedures/new` or use the create action from `/gr/procedures`. The `ProcedureEditPage` loads in creation mode.
2. Fill in the procedure title, category, and assign an owner. Complete the procedure content using the editor.
3. Optionally enter description, linked policy (optional), and review cycle in months.
4. Click the save action. The procedure is inserted into `gr_procedures`.
5. After creation you are navigated to the procedure detail or list page. You can edit the procedure from its detail page (`/gr/procedures/:id/edit`) with `gr.procedures.edit`.

## Editing a procedure

The Edit Procedure page (`/gr/procedures/:id/edit`) provides the full editor for updating an existing procedure. Also reached at `/gr/procedures/new` for new procedure creation. Requires `gr.procedures.edit`.

The page renders two panels side-by-side: a left-side metadata form (title, description, category, linked policy, review cycle in months) and a right-side interactive workflow canvas (`ProcedureCanvas`) where step nodes and edges can be added or manipulated. When creating a new procedure, an `AIProcedureGenerator` panel can optionally populate the form fields and canvas with AI-generated content. On save, `useProcedureMutation` creates or updates the procedure and navigates to the procedure's detail page. The form uses `zod` validation with `react-hook-form`.

Before you start: to create a procedure — have title, category, and at least one workflow step ready. To edit — you must have the procedure's `id` and the `gr.procedures.edit` permission. Linking to a policy requires that the policy exists in the policy library.

1. Navigate to `/gr/procedures/:id/edit` to edit, or `/gr/procedures/new` to create.
2. Enter the procedure title (required), description, category, linked policy (optional), and review cycle in months (optional).
3. Add step nodes to the `ProcedureCanvas` and connect them with edges to define the procedure flow.
4. Click the AI generator option to auto-populate form fields and canvas nodes from a prompt (new procedures only).
5. Click **Save** to create or update the procedure. The page navigates to the procedure detail page on success.

**Category** — one of: `clinical`, `operational`, `safety`, `hr`, `financial`, `it`, `emergency`, `other`.

**Implements policy** — optional UUID link to a policy record (`implements_policy_id`).

**Review cycle** — integer in months (1–60), used to schedule periodic reviews.

**Workflow canvas** — uses `@xyflow/react` for the visual node/edge editor (`ProcedureCanvas`).

**ProcedureEditPage** — shared page component used for both new-procedure creation and editing an existing procedure; behavior is determined by whether an `:id` param is present.

## Related

<Columns cols={2}>
  <Card title="Governance & Compliance" icon="scale-balanced" href="/gr/overview">
    Governance & Compliance core overview.
  </Card>

  <Card title="Governance & parity" icon="clipboard-check" href="/governance/index">
    Documentation coverage and governance.
  </Card>
</Columns>

<Note>
  This page documents shipped product behavior. It is not medical, legal, or
  billing advice. Verify against your organization's policies and applicable
  regulations before using it for clinical, compliance, or billing decisions.
  Protected health information (PHI) shown in the product is governed by your
  tenant's access controls and is never exposed in this documentation.
</Note>

<Accordion title="Documentation sources">
  * src/routes/gr.tsx
  * src/cores/gr/pages/ProcedureListPage.tsx
  * src/cores/gr/pages/ProcedureDetailPage.tsx
  * src/cores/gr/pages/ProcedureEditPage.tsx
  * src/cores/gr/hooks/useProcedureList.ts
  * src/cores/gr/hooks/useProcedureDetail.ts
  * src/cores/gr/hooks/useProcedureMutation.ts
  * src/platform/permissions/constants.ts
</Accordion>