Procedures

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).

​

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.

​

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

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