Tag Management Page

Objective

• Provide a dedicated Tag Management page where all existing tags can be seen, managed, and configured in one place.
• Support editing tag names, deleting tags, and creating or editing conditions so the new tag conditions from ATT-177 (e.g. "Job count as Role") can be attached to tags from this page.

User impact: Today tags can only be edited on individual contact profiles. With a dedicated page, admins can visualize all tags, rename or remove them, and manage the conditions that control when tags are applied (e.g. auto-add when "contact has done 3 inspections as Client"), without hunting through contacts.

Additional Context (June 2026)

A user managing VIP agent tags across 8 markets surfaced a specific pain point: while it's possible to add tags to agents in Attik, removing tags and seeing which agents have a given tag is difficult. They need to update all VIP agents across 8 markets and find it much easier to filter agents by tag in Spectora and bulk-edit/remove from that list view — but changes made in Spectora don't reliably sync back to Attik contact profiles.

The Spectora integration is webhook-based and tied to work order events, so tag edits made in Spectora only propagate to Attik when that agent is added to a new Spectora-created work order. Bulk tag edits in Spectora will not update Attik contact profiles retroactively. This makes Attik the system of record for contact tags, but it currently lacks the filtering and bulk management tools needed to make that practical at scale.

Key asks from this use case:

• Ability to filter/view all contacts with a given tag from a central page
• Ability to remove a tag from multiple contacts without opening each profile individually

Background

• Tags today are stored on contacts: attik-backend/src/models/contactSchema.ts has tags: [{ type: String }]. There is no separate Tag entity; the backend exposes GET /tags in attik-backend/src/routes/contact.ts (e.g. distinct('tags') scoped by company). Contact list supports ?tag= filtering; contact PATCH updates a contact's tags array. The only place to add or edit tags in the UI is on a contact profile (e.g. ContactForm.tsx with TagInput.tsx).
• ATT-177 introduces tag automations (add/remove tag flow actions and conditions like "Job count as Role"). Product need: a single place to manage all tags and to configure those conditions per tag (or for tag-based automations). This page will be that place.

Scope

Backend (attik-backend)

• Existing: attik-backend/src/routes/contact.ts already has list (with req.query.tag), PATCH (contact update including tags), and GET /tags returning distinct tag strings for the company. No new backend is strictly required for "list all tags" or "edit/delete a tag" if edit/delete are implemented as: list contacts with that tag, then update each contact's tags array (e.g. rename string or $pull for delete). If product prefers a dedicated API (e.g. "rename tag company-wide" or "delete tag from all contacts"), add or extend routes accordingly; schema stays contact-centric unless the team introduces a separate Tag model.
• ATT-177 linkage: If tag conditions from ATT-177 are stored per tag (e.g. "tag X has condition job count as role greater than 2"), backend may need a place to read/write that config (e.g. company-level tag metadata or flow/tag-condition mapping). If conditions live only in flow actions, the tag management page may just consume existing flow/condition APIs; scope depends on how ATT-177 conditions are associated with tags.

Frontend (attik-frontend)

• New page: A dedicated Tag Management page under tools/settings (e.g. attik-frontend/src/app/tools/settings/tags/page.tsx or similar) so it sits alongside other settings (contact-roles, discount-codes, etc.). The page should: (1) visualize all tags (e.g. from GET /tags or contact list), (2) support edit tag name (rename across contacts or via backend rename endpoint), (3) support delete tag (remove from all contacts or via backend), (4) support create or edit conditions for tags so the new tag conditions from ATT-177 can be added to tags here.
• Reuse: attik-frontend/src/components/forms/TagInput.tsx and attik-frontend/src/components/contacts/DisplayTags.tsx or TagColorGenerator.tsx may be reusable for display or input; contact types in attik-frontend/src/util/types/serverTypeCollection/contact.ts already include tags. Condition UI from ATT-177 (e.g. ValueConditionInput.tsx, conditions types) can be reused or mirrored for "conditions on this tag" if the data model supports it.
• Navigation: Add a link to the new Tag Management page from the tools/settings layout or navigation so users can open it without going through a contact.

References

• No external links were provided in the issue.
• Codebase touchpoints:
• Backend: attik-backend/src/models/contactSchema.ts, attik-backend/src/routes/contact.ts (list, PATCH, GET tags)
• Frontend: attik-frontend/src/app/tools/settings/ (layout and sibling pages), attik-frontend/src/components/forms/TagInput.tsx, attik-frontend/src/components/contacts/DisplayTags.tsx; ATT-177 condition UI in attik-frontend/src/components/conditions/ and flow/action types in attik-frontend/src/util/types/serverTypeCollection/actionFlows.ts

Diagram

Current state: tags are only editable on contact profile. Desired state: dedicated Tag Management page for list, edit, delete, and tag conditions (ATT-177).

flowchart LR
    subgraph Current["Current state"]
        A[Contact profile only]
        B[Edit tags per contact]
    end

    subgraph Desired["Desired state"]
        C[Tag Management page]
        D[Visualize all tags]
        E[Edit name, delete tag]
        F[Add or edit conditions per tag]
    end

    A --> B
    C --> D
    C --> E
    C --> F