> ## Documentation Index > Fetch the complete documentation index at: https://docs.anchorage.com/llms.txt > Use this file to discover all available pages before exploring further. # Operation tagging > Create and apply tags to operations, filter the Operations tab by tag, and build tag-filtered reports. export const ImageCarousel = ({images, perView = 3, thumbMaxWidth = 220, children}) => { const [page, setPage] = useState(0); const [imgH, setImgH] = useState(0); const [zoomIdx, setZoomIdx] = useState(null); const stripRef = useRef(null); const THUMB_MAX_WIDTH = thumbMaxWidth; const PEEK_WIDTH = 34; const STAGE_HEIGHT = 460; const fromChildren = React.Children.toArray(children).map(c => c && c.props && c.props.src ? { src: c.props.src, alt: c.props.alt } : null).filter(Boolean); const items = fromChildren.length ? fromChildren : images || []; const count = items.length; const columns = Math.min(perView, count) || 1; const totalPages = Math.ceil(count / columns); const showControls = totalPages > 1; const goTo = p => setPage((p % totalPages + totalPages) % totalPages); const prev = () => goTo(page - 1); const next = () => goTo(page + 1); const zoomTo = i => { const idx = (i % count + count) % count; setZoomIdx(idx); setPage(Math.floor(idx / columns)); }; useEffect(() => { if (zoomIdx === null) return; const item = items[zoomIdx]; const overlay = document.createElement("div"); overlay.setAttribute("role", "dialog"); overlay.setAttribute("aria-modal", "true"); overlay.setAttribute("aria-label", item.alt || "Screenshot"); Object.assign(overlay.style, { position: "fixed", top: "0", left: "0", right: "0", bottom: "0", zIndex: "2147483000", background: "rgba(5, 5, 5, 0.98)", display: "flex", alignItems: "center", justifyContent: "center", padding: "24px 72px", cursor: "zoom-out" }); const img = document.createElement("img"); img.src = item.src; img.alt = item.alt || ""; Object.assign(img.style, { maxWidth: "94vw", maxHeight: "88vh", width: "auto", height: "auto", borderRadius: "10px", boxShadow: "0 8px 40px rgba(0, 0, 0, 0.5)", cursor: "zoom-out" }); overlay.appendChild(img); const makeButton = (label, text, position) => { const b = document.createElement("button"); b.type = "button"; b.setAttribute("aria-label", label); b.textContent = text; Object.assign(b.style, { position: "absolute", width: "40px", height: "40px", borderRadius: "50%", border: "1px solid rgba(255, 255, 255, 0.35)", background: "rgba(255, 255, 255, 0.16)", color: "#fff", fontSize: "20px", lineHeight: "38px", textAlign: "center", cursor: "pointer", padding: "0" }, position); overlay.appendChild(b); return b; }; const closeButton = makeButton("Close", "×", { top: "18px", right: "18px" }); let prevButton = null; let nextButton = null; if (count > 1) { prevButton = makeButton("Previous screenshot", "‹", { left: "18px", top: "calc(50% - 20px)" }); nextButton = makeButton("Next screenshot", "›", { right: "18px", top: "calc(50% - 20px)" }); const counter = document.createElement("div"); counter.textContent = `${zoomIdx + 1} of ${count}`; Object.assign(counter.style, { position: "absolute", bottom: "16px", left: "0", right: "0", textAlign: "center", fontSize: "13px", color: "rgba(255, 255, 255, 0.85)" }); overlay.appendChild(counter); } const close = () => setZoomIdx(null); overlay.addEventListener("click", e => { if (e.target === prevButton || e.target === nextButton) return; close(); }); if (prevButton) prevButton.addEventListener("click", () => zoomTo(zoomIdx - 1)); if (nextButton) nextButton.addEventListener("click", () => zoomTo(zoomIdx + 1)); const onKey = e => { if (e.key === "Escape") close(); else if (e.key === "ArrowLeft") zoomTo(zoomIdx - 1); else if (e.key === "ArrowRight") zoomTo(zoomIdx + 1); }; window.addEventListener("keydown", onKey); const previousOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; document.body.appendChild(overlay); closeButton.focus(); return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = previousOverflow; overlay.remove(); }; }, [zoomIdx]); useEffect(() => { const strip = stripRef.current; if (!strip) return; const measure = () => { const box = strip.querySelector("[data-carousel-imgbox]"); if (box && box.clientHeight) setImgH(box.clientHeight); }; measure(); const ro = new ResizeObserver(measure); ro.observe(strip); return () => ro.disconnect(); }, []); if (!items.length) return null; const start = page * columns; const visible = items.slice(start, start + columns); const zoomBtnStyle = { position: "absolute", zIndex: 2, width: "40px", height: "40px", borderRadius: "50%", border: "1px solid rgba(255, 255, 255, 0.3)", background: "rgba(255, 255, 255, 0.14)", color: "#fff", fontSize: "20px", lineHeight: "38px", textAlign: "center", cursor: "pointer", padding: 0 }; const pager = showControls ?
{start + 1} {visible.length > 1 ? "–" + (start + visible.length) : ""} of {count}
: null; if (perView === 1) { const img = items[page]; const overlayArrow = side => { const isLeft = side === "left"; return ; }; return
{showControls && overlayArrow("left")} {showControls && overlayArrow("right")}
{img.alt &&
{img.alt}
} {pager}
; } const prevPeek = start > 0 ? items[start - 1] : null; const nextPeek = start + columns < count ? items[start + columns] : null; const renderPeek = (img, side) => { if (!img) return null; const isLeft = side === "left"; return }
{renderPeek(prevPeek, "left")} {} {Array.from({ length: columns }).map((_, i) => { const img = visible[i]; const slotStyle = { margin: 0, flex: "1 1 0", maxWidth: THUMB_MAX_WIDTH + "px", minWidth: 0 }; if (!img) { return {showControls && }
{pager} ; }; Tags let your organization label operations with your own categories—for example, by desk, strategy, or client—so they're easier to find, filter, and report on later. You can add tags when you initiate an operation or at any time afterward, and each operation can carry up to 10 tags. ## Adding tags when initiating an operation Tags are added on the **Preview operation** screen, after you've entered the operation details. Initiate the operation and enter its details as usual. On the **Preview operation** screen, find the **Tags** section and its **Add tags** bar. Select the **Add tags** bar to open your organization's library of existing tags. Search for and select the tags you want to apply. To create a tag that doesn't exist yet, type its name in the search field, then select **Create** or press Enter. Select the **x** on a tag pill in the bar to remove it. Select **Confirm and submit for approval**. Everyone in the approval quorum sees the applied tags when reviewing the operation. Preview operation screen showing the Tags section with an empty Add tags bar Tag library open under the Add tags bar with a tag selected and the cursor over the list Text typed into the tag search field showing matching tags and the Create option Cursor over the x on a tag pill in the Tags bar Approvers see the operation's tags during quorum review in the iOS app ## Viewing and editing tags on an existing operation Select an operation in the **Operations** tab to open its details panel and see the tags applied to it. From there, you can add more tags from the **Tags** bar or remove tags by selecting the **x** on a tag pill—the same way as during initiation, with the same 10-tag maximum. Changes to tags save to the operation automatically as you add or remove them. Tags on a completed operation's details panel ## Filtering operations by tag Navigate to the **Operations** tab. Select **Add filter**, then **Tags**. Select one or more tags. The table updates to show matching operations, and the active filter appears as a pill above the table. Selecting multiple tags shows every operation that carries any of the selected tags—an operation only needs to match one of them to appear. To remove filters, select the **x** on a filter pill or select **Clear all filters**. Operations tab with the Add filter menu open and the cursor over Tags Operations tab with type and tag filter pills applied and the filtered results displayed ## Creating a report filtered by tag You can use tags as a filter when building a transaction report in the [Reporting](/knowledge-base/platform/users/web-dashboard/reporting) section. Go to the **Reporting** section and select **Create new report**. Select **Transaction Report** as the report type, then enter your desired inputs, such as the report name, format, and date range. Select **Add filter**, then **Tags**, and select the tags you want the report to cover. As with operation filtering, multiple tags match operations that carry any of the selected tags. Select **Create report**. The generated report includes a **Tag Names** column listing the tags that apply to each transaction. Create new report modal with the Add filter menu open and the cursor over Tags Create new report modal showing the tag list with checkboxes in the filter The Tag Names column in a generated transaction report ## Related topics * [Operations](/knowledge-base/platform/users/web-dashboard/operations) — View, filter, and download pending and past account operations * [Reporting](/knowledge-base/platform/users/web-dashboard/reporting) — View statements and download balance and transaction reports ## Related topics - [Operations](/knowledge-base/platform/users/web-dashboard/operations.md) - [Reporting](/knowledge-base/platform/users/web-dashboard/reporting.md) - [Overview](/knowledge-base/platform/developers/webhooks/webhooks-overview.md) - [API Changelog](/knowledge-base/porto/api-reference/changelog.md)