> ## 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.
# ITSM Vendors
> Browse, view, create, and edit IT vendor relationships including contact information, performance metrics, and associated contracts.
This page lists all IT vendors and provides filtering tools. Navigate to it at `/it/vendors`.
## Overview
The Vendors page displays a filterable, paginated table of IT vendors using `VendorFilterBar` and `VendorTable` components. The **New Vendor** button navigates to `/it/vendors/new`. Clicking a vendor row navigates to the vendor's detail page.
## Who it's for
This route is protected by `IT_PERMISSIONS.VIEW` (`it.view`) via the module-level `ITViewGuard`. No additional per-route permission gate exists beyond the module guard.
## Before you start
* No prerequisites. The list loads automatically.
## Steps
1. Navigate to **IT > Vendors**, or go directly to `/it/vendors`.
2. Use the `VendorFilterBar` filters to search or filter by type and status.
3. Click a vendor row to open the vendor detail page.
4. Click **New Vendor** to add a new vendor record.
## Key concepts
* **vendor\_type** — classification of the vendor's products or services.
* **status** — active/inactive state of the vendor relationship.
* **Pagination** — page size defaults to 20 records; scroll or paginate to see more.
## Viewing a vendor
This page displays the full detail view for a single IT vendor record. Navigate to it at `/it/vendors/:id`.
The Vendor Details page shows the vendor name, type badge, status badge, contact information (name, email, phone, website, address), performance metrics (satisfaction rating, average response time, active and total contract counts), notes, and a list of associated contracts via `VendorContractList`. The **Edit** button navigates to `/it/vendors/:id/edit`.
Before you start: the vendor record must already exist.
1. Navigate to **IT > Vendors** and click a vendor row, or navigate directly to `/it/vendors/:id`.
2. Review **Contact Information**: name, email (clickable mailto link), phone (clickable tel link), website, and address.
3. Review **Performance** metrics: satisfaction rating, average response time, and contract counts.
4. Review **Notes** if present.
5. Review the **Contracts** section for all associated vendor contracts.
6. Click **Edit** to modify the vendor record.
**satisfaction\_rating** — numeric score out of 5.0.\
**average\_response\_time\_hours** — average response time in hours.\
**VendorContractList** — component listing contracts associated with this vendor.
## Creating a vendor
This page provides a form to create a new IT vendor record. Navigate to it at `/it/vendors/new`.
The New Vendor page renders the shared `VendorForm` component inside a card. On successful creation a toast notification is shown with the new vendor name, and the user is redirected to the vendor's detail page at `/it/vendors/:id`.
This route is protected by `IT_PERMISSIONS.VIEW` (`it.view`) via the module-level `ITViewGuard`. No additional per-route permission gate exists beyond the module guard.
Before you start: have the vendor's business name, type, and primary contact information ready. Know the vendor's status (active, inactive, etc.).
1. Navigate to **IT > Vendors** and click **New Vendor**, or go directly to `/it/vendors/new`.
2. Enter the **Vendor Name** (required).
3. Select the **Vendor Type** and **Status**.
4. Optionally fill in contact details: name, email, phone, website.
5. Optionally enter the vendor's address.
6. Add any relevant **Notes**.
7. Click the form's submit action. On success you are redirected to the vendor detail page.
**Contact information** — fields `contact_name`, `contact_email`, `contact_phone`, and `website` are all optional.
## Editing a vendor
The Edit Vendor screen allows updating an existing vendor record and is accessible at `/it/vendors/:id/edit`.
The Edit Vendor page loads the existing vendor via `useVendor`. The form is rendered using the shared `VendorForm` component pre-populated with the existing vendor data. Fields include: vendor name, vendor type, status, notes, contact name, contact email, contact phone, website, and address fields (address\_line1, address\_line2, city, state, postal\_code, country). On save, `updateVendor` is called with updated fields, and the user is redirected to the vendor detail page. A loading skeleton is shown while data loads.
Before you start: the vendor must exist in the system.
1. From the vendor detail page, click the edit action to navigate to `/it/vendors/:id/edit`.
2. Modify name, type, status, contact information, and address fields in the `VendorForm`.
3. Submit the form. On success, you are redirected to the vendor detail page.
4. Click **Cancel** in the form to return to the vendor detail page without saving.
**VendorForm** — Shared component used for both creating and editing vendor records.\
**vendor\_type** — Type classification for the vendor; exact values in `src/cores/it/types/vendors.ts`.\
**status** — Vendor status; exact values in `src/cores/it/types/vendors.ts`.
## Related
IT Service Management overview.
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.
* src/routes/it.tsx
* src/cores/it/pages/vendors/VendorListPage.tsx
* src/cores/it/pages/vendors/VendorDetailPage.tsx
* src/cores/it/pages/vendors/NewVendorPage.tsx
* src/cores/it/pages/vendors/EditVendorPage.tsx
* src/cores/it/hooks/useVendors.ts
* src/cores/it/hooks/useVendor.ts
* src/cores/it/hooks/useVendorMutations.ts
* src/cores/it/components/vendors/VendorFilterBar.tsx
* src/cores/it/components/vendors/VendorForm.tsx
* src/cores/it/components/vendors/VendorContractList.tsx