Facilities Vendors

This screen lists all vendors and is available at /fm/vendors.

​

Overview

The Vendors page loads vendors via useVendorList and supports pull-to-refresh on mobile via MobilePullToRefresh. Users can search by text, filter by Category (using VENDOR_CATEGORY_LABELS), filter by Status (active/inactive), and filter by Preferred status (preferred/not preferred). The VendorTable renders the list. An Add Vendor button opens VendorFormDialog. Note: The route /fm/vendors/new is not defined in fm.tsx and does not render any screen. Vendor creation is performed via the VendorFormDialog opened by the Add Vendor button on this page.

​

Who it’s for

Requires permission fm.dashboard.view. Adding vendors requires fm.vendors.create.

​

Before you start

• Hold fm.dashboard.view and, for creating vendors, fm.vendors.create.

​

Finding a vendor

1. Navigate to /fm/vendors via the FM sidebar or the Active Vendors stat card on the dashboard.
2. Use the search bar and the Category, Status, and Preferred dropdowns to narrow the list.
3. Click Add Vendor to open the vendor creation dialog; fill in the vendor name, category, contact information, and payment terms.
4. Click any vendor row to navigate to /fm/vendors/:id.

• Preferred vendor — vendors flagged as preferred surface in the preferred filter and may be prioritized in work order assignment (confirm with SME).
• is_active — inactive vendors do not appear in work order vendor selection (confirm with SME).

​

Viewing a vendor

The Vendor Detail page (/fm/vendors/:id) loads a vendor by ID via useVendorDetail. The header displays vendor name, category badge, and status badges (active, approved, preferred). A two-column grid shows Contact Information (contact name, phone, email, address, masked tax ID, payment terms) and a Vendor Performance Widget. Below are cards for Certifications (with add, renew, and delete actions) and Work Orders associated with this vendor. The Approve button is shown for active, unapproved vendors; the Deactivate button is shown for active vendors. Both require confirmation dialogs. Requires fm.dashboard.view. Editing vendors requires fm.vendors.edit; approving or deactivating may require additional permissions — confirm with SME. Before you start: the vendor must exist and not have been deleted.

1. From the Vendors list, click any row to navigate to /fm/vendors/:id.
2. Check name, phone, email, address, tax ID (masked), and payment terms.
3. The Vendor Performance Widget surfaces performance metrics (confirm with SME what metrics are shown).
4. If the vendor is active but unapproved, click Approve to mark them approved.
5. Click Add in the Certifications card to add a new certification, or use Renew / Delete actions per certification.
6. Scroll to the Work Orders card to see work orders linked to this vendor.
7. Click Edit to open the vendor edit dialog.
8. Click Deactivate and confirm in the dialog to mark the vendor inactive.

• Tax ID masking — maskTaxId(vendor.tax_id, vendor.tax_id_type) is applied before display; raw tax ID is never shown in plaintext.
• Certifications — each certification has an expiration that can be tracked and renewed.
• Payment terms — displayed as {payment_terms_days} days.

​

Related

Documentation sources

• src/routes/fm.tsx
• src/cores/fm/pages/VendorsPage.tsx
• src/cores/fm/pages/VendorDetailPage.tsx