30 Claude Prompts That Build Ops Dashboards

You are a support operations analyst who builds queue boards a shift lead can staff from. <context> I need a support queue load dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic waiting tickets so I can click the working screen in the chat. </context> <inputs> - Queue name: [QUEUE NAME] - Other queues: [E.G. BILLING, TECH, VIP] - Channels: [E.G. EMAIL, CHAT, PHONE] - Staff on now: [COUNT OR NAMES] - Breach wait: [E.G. 15 MIN CHAT, 4H EMAIL] </inputs> <task> Build the dashboard with: a header for [QUEUE NAME] plus queue tabs; KPI cards (waiting now, oldest wait, arrivals last hour, agents available); a stacked bar of waiting tickets by queue and channel; a wait-time histogram; a staffing strip (agents versus waiting tickets); and a waiting table with ticket id, queue, channel, wait, last customer message snippet, and assignee. Tabs filter to one queue. Compute waits from sample timestamps versus a now constant I can edit. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - All tickets and agents in labeled JS constants at the top. - Rows past [BREACH WAIT] flagged red. Tabs must filter. Accessible contrast. - Do not invent a live helpdesk socket. Sample data plus a note for an export or API. </constraints> <format> Return the full HTML as an artifact, then explain wait math and which arrays to replace with a helpdesk export. </format>

You are a support operations analyst who builds first-response clocks that catch a breach before it happens. <context> I need a first-response SLA dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic open tickets so I can click the working screen in the chat. </context> <inputs> - First-response target: [SLA TARGET] - Channel overrides: [E.G. CHAT 15M, EMAIL 4H, PHONE 60S] - Business hours: [E.G. 9-17 WEEKDAYS] or 24/7 - Team: [NAME] - Date range for the trend: [E.G. LAST 7 DAYS] </inputs> <task> Build the dashboard with: KPI cards (median first response, percent inside [SLA TARGET], breaches today, tickets inside 20% of the clock); a line of daily first-response hit rate; a bar by channel; a ticking watchlist of open tickets with minutes remaining, sorted soonest-to-breach; and a closed-ticket table that shows actual first-response versus target. Compute remaining time from opened-at, channel target, and a now constant. Pause the clock outside business hours only if I asked for that. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - All tickets and SLA constants at the top in labeled JS. - Under 20% remaining amber; breached red. Accessible contrast. - State whether the clock is calendar time or business hours. Do not hide that choice. </constraints> <format> Return the full HTML as an artifact, then explain remaining-time math and how to paste a ticket export. </format>

You are a support operations analyst who builds aging boards that make stuck work impossible to ignore. <context> I need a ticket aging dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic open tickets so I can click the working screen in the chat. </context> <inputs> - Priority levels: [PRIORITY LEVELS] - Age buckets: [E.G. 0-1D, 1-3D, 3-7D, 7D+] - Statuses that count as open: [E.G. NEW, OPEN, PENDING, REOPENED] - Pending-on-customer: [COUNT SEPARATELY / INCLUDE] - Owners: [NAMES OR TEAMS] </inputs> <task> Build the dashboard with: a priority-by-age heatmap using [PRIORITY LEVELS] and the buckets; KPI cards (open, 7d+, pending on customer, reopened); a bar of tickets per owner; an owner-by-age table; and a stuck list (7d+ or P1/P2 past a tighter age). Priority chips filter every view. Compute age from last-customer-update if pending-on-customer is counted separately, else from created-at. Show that rule on the page. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - All tickets in labeled JS constants at the top. - Heatmap cells clickable to list those tickets. Accessible contrast, not color-only. - Do not invent CSAT. This board is age and ownership only. </constraints> <format> Return the full HTML as an artifact, then explain the age rule and which array to replace. </format>

You are a support operations analyst who builds occupancy dashboards that are fair to agents and honest to the queue. <context> I need an agent occupancy dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic agent intervals so I can click the working screen in the chat. </context> <inputs> - Agents: [AGENT NAMES] - Channels they take: [CHAT / EMAIL / PHONE / MIX] - Occupancy target: [E.G. 75-85%] - Shift: [E.G. TODAY 9-17] - Concurrency cap: [E.G. 3 CHATS] </inputs> <task> Build the dashboard with: an agent selector using [AGENT NAMES]; KPI cards (occupancy, average handle time, concurrency now, idle percent); a timeline of each agent's hour with busy/idle/break blocks; a team occupancy bar versus the target band; a handle-time distribution; and an agent table (tickets closed, AHT, occupancy, after-call work, utilization). Compute occupancy as busy time divided by logged-in time minus unpaid break. Keep interval rows in labeled JS constants. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - All intervals and tickets in labeled JS constants at the top. - Flag occupancy above the band as overload, below as idle. Accessible contrast. - Do not rank agents as good or bad from occupancy alone. Show the number and the queue they sat. </constraints> <format> Return the full HTML as an artifact, then write the occupancy formula and which constants to replace with a workforce export. </format>

You are a support operations analyst who builds escalation boards that show when first-line work is bouncing. <context> I need an escalation and reopen dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic ticket events so I can click the working screen in the chat. </context> <inputs> - Escalation path: [ESCALATION PATH] - Reopen window: [E.G. 7 DAYS AFTER SOLVE] - Reason codes: [E.G. WRONG ANSWER, PRODUCT BUG, POLICY] - Teams: [L1, L2, ENG, BILLING] - Date range: [E.G. LAST 30 DAYS] </inputs> <task> Build the dashboard with: KPI cards (escalation rate, reopen rate, median time to L2, repeat customers); a funnel along [ESCALATION PATH]; a reason bar; a team table (received, sent up, sent back, reopen after that team closed); and a watchlist of tickets escalated twice or reopened twice. Compute rates from sample events (created, escalated, solved, reopened). A reason chip filters the watchlist. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - All events in labeled JS constants at the top. - Reopen means solved then opened again inside [REOPEN WINDOW]. Show that rule. - Accessible contrast. Do not invent CSAT or refund dollars unless I add them later. </constraints> <format> Return the full HTML as an artifact, then explain escalation and reopen formulas and which event array to replace. </format>

You are an inventory analyst who builds cover dashboards a planner can trust at the morning huddle. <context> I need a stock-cover dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SKU rows so I can click the working screen in the chat. </context> <inputs> - SKU set: [SKU SET] - Sites: [E.G. WH1, WH2] or one site - Cover target: [E.G. 21 DAYS] - Demand basis: [TRAILING 14-DAY DAILY SALES] - Unit: [UNITS / CASES] </inputs> <task> Build the dashboard with: a header for [SKU SET]; KPI cards (SKUs tracked, SKUs below target cover, units on hand, weighted days of cover); a histogram of days of cover; a site comparison bar if more than one site; a SKU table (sku, name, on hand, inbound, daily demand, days of cover, status); and a below-target list sorted thinnest first. Days of cover = (on hand + inbound in window) / daily demand. Demand of zero shows as infinite cover with a flag, not a crash. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - All SKU rows in labeled JS constants at the top. - Below-target rows amber or red. Sortable table. Accessible contrast. - Do not invent supplier lead times here. Cover only. </constraints> <format> Return the full HTML as an artifact, then write the cover formula and which array to replace with a stock extract. </format>

You are an inventory analyst who builds stockout-risk boards that tell planners what will break before the next PO lands. <context> I need a stockout risk dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SKU and PO rows so I can click the working screen in the chat. </context> <inputs> - Reorder policy: [REORDER POLICY] - Lead time source: [PER SKU DAYS / DEFAULT DAYS] - Safety stock rule: [E.G. 7 DAYS DEMAND] - Horizon: [E.G. NEXT 21 DAYS] - Demand: [TRAILING DAILY SALES] </inputs> <task> Build the dashboard with: KPI cards (SKUs at risk, expected stockout date count this week, open POs, units short); a timeline of projected stockouts across [HORIZON]; a risk table (sku, on hand, daily demand, safety stock, open PO qty and ETA, days until stockout, suggested reorder qty using [REORDER POLICY]); and a PO table that shows whether each inbound saves a SKU in time. Compute projected on-hand as on hand minus demand plus POs by date. Filter: at risk / all. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - SKUs and POs in labeled JS constants at the top. - Show the reorder formula on the page. Accessible contrast. - Mark missing lead times as [VERIFY], do not silently assume 7 days if I left them blank. </constraints> <format> Return the full HTML as an artifact, then explain stockout-date math and which constants to replace. </format>

You are a warehouse inventory analyst who builds accuracy dashboards that drive the next cycle count, not a vanity percent. <context> I need a bin accuracy dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic count results so I can click the working screen in the chat. </context> <inputs> - Warehouse: [WAREHOUSE] - Zones or aisles: [E.G. A-F, BULK, PICK FACE] - Count window: [E.G. LAST 30 DAYS] - Pass rule: [E.G. VARIANCE UNDER 2%] - Count types: [CYCLE / FULL / SPOT] </inputs> <task> Build the dashboard with: a header for [WAREHOUSE]; KPI cards (locations counted, accuracy hit rate, units variance, locations overdue for count); a bar of accuracy by zone; a map-like grid of aisles colored by last-count result; a variance table (location, sku, system qty, counted qty, variance, count type, date); and an overdue list. Hit rate = locations that passed [PASS RULE] / locations counted. Zone chips filter the table. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Count rows in labeled JS constants at the top. - Failed locations red. The aisle grid can be CSS boxes, not a real floor CAD. - Do not invent a WMS adjustment API. </constraints> <format> Return the full HTML as an artifact, then write the pass rule math and which array to replace with a cycle-count export. </format>

You are a warehouse inbound analyst who builds receipt boards a dock lead can run before the first truck. <context> I need an inbound receipts dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic ASN and PO rows so I can click the working screen in the chat. </context> <inputs> - Inbound window: [INBOUND WINDOW] - Dock doors: [E.G. D1-D8] - Statuses: [E.G. DUE, ARRIVED, UNLOADING, PUTAWAY, CLOSED] - Late rule: [E.G. PAST ETA BY 2H] - Sites: [ONE OR MORE] </inputs> <task> Build the dashboard with: a header for [INBOUND WINDOW]; KPI cards (ASNs due, arrived, late, lines still in putaway); a dock-slot board (door, current ASN, status, remaining lines); a daily inbound volume bar; a late PO table (po, vendor, ETA, hours late, lines, sku risk); and a receipt table with search. Compute late from ETA versus a now constant. Door cards are clickable and filter the tables. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - ASNs, POs, and doors in labeled JS constants at the top. - Late rows red. Search must filter. Accessible contrast. - Do not invent live GPS. ETA is a timestamp I will replace. </constraints> <format> Return the full HTML as an artifact, then explain the late rule and which arrays to replace with an ASN export. </format>

You are an inventory analyst who builds dead-stock boards that force a sell, kit, return, or scrap decision. <context> I need a dead-stock dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic aging SKUs so I can click the working screen in the chat. </context> <inputs> - Dead-stock threshold: [DEAD STOCK DAYS] - Value basis: [UNIT COST / RETAIL] - Sites: [E.G. WH1] - Action options: [SELL DOWN, RETURN, KIT, SCRAP] - Exclude: [E.G. NEW SKUS UNDER 60 DAYS] </inputs> <task> Build the dashboard with: KPI cards (dead SKUs, value stuck, share of inventory value, SKUs with inbound after last sale); a value-by-age bar (30/60/90/[DEAD STOCK DAYS]+); a category donut; a watchlist table (sku, on hand, last movement, days idle, value, inbound after last sale flag, suggested action from simple rules); and a filter for action. Days idle from last movement date. Exclude rules applied in JS from constants. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - SKU rows in labeled JS constants at the top. - Sort default: value stuck descending. Accessible contrast. - Suggested actions are rules I can edit, not finance advice. No tax or write-off claims. </constraints> <format> Return the full HTML as an artifact, then list the idle-day formula, exclude rules, and which array to replace. </format>

You are an incident operations analyst who builds boards a commander can run without opening five tabs. <context> I need an open-incident dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic incidents so I can click the working screen in the chat. </context> <inputs> - Service to lead with: [SERVICE NAME] - Other services: [LIST] - Severity levels: [E.G. SEV1-SEV4] - Statuses: [INVESTIGATING, IDENTIFIED, MONITORING, RESOLVED] - Page threshold: [E.G. SEV1 AND SEV2] </inputs> <task> Build the dashboard with: a service filter defaulting to [SERVICE NAME]; KPI cards (open, SEV1/SEV2 open, oldest age, customer-impacting count); a severity strip; a status kanban of open incidents with age and commander; a 24h volume sparkline of opened versus resolved; and a table (id, service, sev, status, age, commander, last update). Compute age from opened-at versus a now constant. Sev chips filter the kanban and table. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Incidents in labeled JS constants at the top. - SEV1 always at the top and visually loud. Accessible contrast, not color-only. - Do not invent paging vendors or chat bridges. Sample board only. </constraints> <format> Return the full HTML as an artifact, then explain age math and which array to replace with an incident export. </format>

You are an incident operations analyst who builds on-call load dashboards that are honest about who is getting paged. <context> I need an on-call load dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic pages so I can click the working screen in the chat. </context> <inputs> - Rotation name: [ON-CALL ROTATION] - People on the rota: [NAMES] - Date range: [E.G. LAST 28 DAYS] - Sleep hours: [E.G. 22:00-07:00 LOCAL] - Ack target: [E.G. 5 MIN] </inputs> <task> Build the dashboard with: a header for [ON-CALL ROTATION]; KPI cards (pages, sleep-hour pages, median ack, unique people paged); a per-person stacked bar (day pages versus sleep-hour pages); a weekly heatmap of page volume; an ack-time table versus [ACK TARGET]; and a fairness note that flags anyone more than 1.5 times the team median. Compute sleep-hour flags from page timestamps and the sleep window. Person chips filter the heatmap. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Pages and rota rows in labeled JS constants at the top. - Show timezone as a labeled constant. Accessible contrast. - This is a load board, not a performance review. No hero or slacker labels. </constraints> <format> Return the full HTML as an artifact, then write sleep-hour and fairness rules and which array to replace with a pager export. </format>

You are an incident operations analyst who builds timeline boards used in the post-event review. <context> I need an incident timeline dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic event stamps so I can click the working screen in the chat. </context> <inputs> - Severity levels to include: [SEV LEVELS] - Required stamps: [DETECT, ACK, MITIGATE, RESOLVE] or my list - Update cadence target: [E.G. EVERY 15 MIN ON SEV1] - Date range: [E.G. LAST 90 DAYS] - Services: [LIST] </inputs> <task> Build the dashboard with: a filter for [SEV LEVELS] and service; KPI cards (median detect-to-ack, ack-to-mitigate, mitigate-to-resolve, MTTR); a distribution of MTTR; an incident picker; a horizontal timeline for the selected incident with the required stamps and customer updates; and a missed-update list where the gap between updates exceeds the cadence target. Compute all durations from the stamp fields. Missing stamps show as [VERIFY], not zero. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Incidents and events in labeled JS constants at the top. - Timeline must be readable on a laptop. Accessible contrast. - Do not write a legal postmortem. Times and gaps only. </constraints> <format> Return the full HTML as an artifact, then list each duration formula and which arrays to replace. </format>

You are an incident operations analyst who builds recurrence boards that show when the same failure is burning the error budget. <context> I need a recurring-incident dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic incident rows so I can click the working screen in the chat. </context> <inputs> - Error budget policy: [ERROR BUDGET] - Cluster key: [SERVICE + SYMPTOM] - Lookback: [E.G. 90 DAYS] - Repeat rule: [E.G. 3+ IN 30 DAYS] - Services: [LIST] </inputs> <task> Build the dashboard with: KPI cards (clusters that meet the repeat rule, budget burned versus [ERROR BUDGET], incidents in those clusters, clusters with no owner); a burn sparkline; a cluster table (symptom, service, count, last seen, budget minutes, owner, status of the fix); a 90-day strip of incidents in the selected cluster; and a no-owner watchlist. Compute clusters in JS from service + symptom fields. Selecting a cluster filters the strip. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Incidents and budget constants at the top. - Show the repeat rule and budget math on the page. Accessible contrast. - Do not invent SLO percentages I did not give. If budget is a count of SEV1, use that. </constraints> <format> Return the full HTML as an artifact, then explain clustering, the repeat rule, and which array to replace. </format>

You are an incident operations analyst who builds customer-impact boards that comms and support can share during an outage. <context> I need a customer-impact dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic impact rows so I can click the working screen in the chat. </context> <inputs> - Customer tier to highlight: [CUSTOMER TIER] - Impact types: [E.G. FULL OUTAGE, DEGRADED, DATA DELAY] - Status-page states: [NONE, INVESTIGATING, IDENTIFIED, MONITORING, RESOLVED] - Open incidents: [SAMPLE OR INVENT 2-4] - Account fields: [NAME, TIER, USERS, ARR BAND] </inputs> <task> Build the dashboard with: an incident selector; KPI cards (accounts impacted, users impacted, [CUSTOMER TIER] accounts hit, status-page state); a tier breakdown bar; a region or product split; an impacted-account table with comms status (not notified / emailed / on a bridge); and a suggested next-comms note generated from the selected incident's state, not from invented facts. Compute user counts from the account rows linked to the incident. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Incidents and accounts in labeled JS constants at the top. - Gold or [CUSTOMER TIER] rows visually first. Accessible contrast. - Do not invent legal language or refund offers. Comms status is a dropdown I can click. </constraints> <format> Return the full HTML as an artifact, then explain how accounts link to an incident and which arrays to replace. </format>

You are an operations planner who builds capacity boards that show whether a team can take the work already promised. <context> I need a team capacity-versus-demand dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic hours so I can click the working screen in the chat. </context> <inputs> - Team: [TEAM] - Horizon: [E.G. NEXT 6 WEEKS] - Hours per person per week: [E.G. 30 PRODUCTIVE] - Demand unit: [TICKETS / ORDERS / STORY POINTS / HOURS] - People: [NAMES] plus PTO weeks if known </inputs> <task> Build the dashboard with: a header for [TEAM]; KPI cards (capacity hours, demand hours, gap this week, first week over 100%); a grouped bar of capacity versus demand by week; a people table (name, available hours after PTO, allocated, remaining); a demand backlog by type; and an overbooked-week callout that lists what to slip or staff. Convert demand units to hours with a labeled conversion constant. Week chips filter the people table. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - People, PTO, and demand in labeled JS constants at the top. - Over 100% red, 80-100% amber. Accessible contrast. - Do not invent hiring plans. Show the gap number and the week it hits. </constraints> <format> Return the full HTML as an artifact, then write the conversion and gap formulas and which constants to replace. </format>

You are an operations planner who builds utilization heatmaps a manager can read in ten seconds. <context> I need a utilization heatmap dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic bookings so I can click the working screen in the chat. </context> <inputs> - Utilization target band: [UTILIZATION TARGET] - People: [NAMES] - Days or weeks: [E.G. LAST 4 WEEKS BY DAY] - Booked versus available hours: [HOW I MEASURE] - Work types: [E.G. TICKETS, PROJECTS, MEETINGS] </inputs> <task> Build the dashboard with: KPI cards (team utilization, people over the band, people under the band, meeting-load share); a person-by-day heatmap colored by utilization versus [UTILIZATION TARGET]; a click-through that shows that cell's work-type split; a team trend line; and a table of people with average, min, max. Utilization = booked / available. Cells are buttons, not just color. A work-type toggle recalculates if I exclude meetings. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Booking rows in labeled JS constants at the top. - Color plus a percent label so the heatmap is not color-only. Accessible contrast. - No ranking language. Numbers only. </constraints> <format> Return the full HTML as an artifact, then explain utilization math and which array to replace with a time export. </format>

You are an operations analyst who builds throughput boards using arrivals, finishes, and the queue in between. <context> I need a throughput and wait dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic daily counts so I can click the working screen in the chat. </context> <inputs> - Work unit: [WORK UNIT] - Date range: [E.G. LAST 28 DAYS] - Stages: [OPTIONAL, E.G. INBOX / DOING / DONE] - Target wait: [E.G. 8 HOURS] - Target daily finish: [NUMBER OR "INFER FROM SAMPLE"] </inputs> <task> Build the dashboard with: a header naming [WORK UNIT]; KPI cards (arrivals, finishes, WIP, median wait); a dual line of daily arrivals versus finishes; a WIP area chart; a wait trend versus [TARGET WAIT]; and a table of days where arrivals beat finishes, with the resulting WIP change. If I give stages, add a small flow bar. Compute WIP as running (arrivals minus finishes) from a starting WIP constant. Median wait from sample item-level timestamps if present, else from Little's-law style WIP / finish rate and label it as an estimate. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Daily counts and optional item timestamps in labeled JS constants. - Label estimates versus measured waits. Accessible contrast. - Do not claim a factory-science proof. Show the arithmetic. </constraints> <format> Return the full HTML as an artifact, then write WIP and wait formulas and which constants to replace. </format>

You are a workforce analyst who builds shift-coverage boards that show the hour you are about to miss before it happens. <context> I need a shift coverage dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic roster rows so I can click the working screen in the chat. </context> <inputs> - Shift pattern: [SHIFT PATTERN] - Skills or seats: [E.G. CHAT, PHONE, PACK] - Demand by hour: [SEATS NEEDED] or ask Claude to invent a realistic curve - People and skills: [ROSTER] - Timezone: [E.G. AMERICA/NEW_YORK] </inputs> <task> Build the dashboard with: a day picker; a header for [SHIFT PATTERN]; KPI cards (hours with a gap, worst gap size, unused surplus, people out); a stacked bar of filled versus needed seats by hour and skill; a gap table (hour, skill, needed, filled, gap, who is on); and a spare-people list whose skills do not match the gap. Compute filled from roster intervals overlapping that hour. Hour cells click through to names. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Roster and demand in labeled JS constants at the top. - Gap cells red, surplus muted. Timezone labeled. Accessible contrast. - Do not auto-assign people. Show the gap and the spare list only. </constraints> <format> Return the full HTML as an artifact, then explain overlap math and which arrays to replace with a roster export. </format>

You are an operations planner who builds workload forecasts a founder can use to decide when to hire or refuse work. <context> I need a workload forecast dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic history so I can click the working screen in the chat. </context> <inputs> - Forecast horizon: [FORECAST WEEKS] - History: [E.G. LAST 8 WEEKS OF VOLUME] - Capacity now: [PEOPLE AND HOURS] - Hours per work unit: [E.G. 0.4H PER TICKET] - Hiring trigger: [E.G. 3 WEEKS OVER 100%] - Scenarios: [BASE, BUSY +20%, SLOW -15%] </inputs> <task> Build the dashboard with: scenario toggles; KPI cards (projected peak utilization, first week over 100%, weeks over trigger, extra people the busy case wants); a line of history plus projected volume; a capacity band; a table by week (volume, hours, utilization, hire-or-hold); and a note that this is a flat or simple-trend projection, not a statistical model. Compute projections in JS from history, scenario multipliers, and hours per unit. Mark the trigger week. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - History, capacity, and scenario multipliers in labeled JS constants. - Label the method in one sentence on the page. Accessible contrast. - Do not invent seasonality I did not describe. No finance or headcount-cost claims. </constraints> <format> Return the full HTML as an artifact, then write the projection and trigger rules and which constants to replace. </format>

You are a procurement operations analyst who builds vendor scorecards a weekly stand-up can argue from. <context> I need a vendor OTIF dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic receipt rows so I can click the working screen in the chat. </context> <inputs> - Vendors: [VENDOR LIST] - Date range: [E.G. LAST 90 DAYS] - OTIF target: [E.G. 95%] - In-full rule: [E.G. 100% OF LINES, OR WITHIN 2%] - Categories: [E.G. PACKAGING, PARTS] </inputs> <task> Build the dashboard with: a vendor filter using [VENDOR LIST]; KPI cards (receipts, OTIF, on-time only, in-full only); a grouped bar of on-time versus in-full by vendor; a monthly OTIF line; a rank table (vendor, volume, on-time, in-full, OTIF, versus target); and a miss log (po, vendor, late or short, qty gap). Compute OTIF as receipts that are both on-time and in-full under my rule. Clicking a vendor filters the miss log. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Receipts in labeled JS constants at the top. - Below-target vendors flagged. Sortable rank table. Accessible contrast. - Do not invent chargebacks. Score only. </constraints> <format> Return the full HTML as an artifact, then write OTIF math and which array to replace with a receipts export. </format>

You are a vendor-management analyst who builds SLA compliance boards that sit next to the contract, not in a separate myth. <context> I need a vendor SLA dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic monthly results so I can click the working screen in the chat. </context> <inputs> - SLA metric to lead with: [SLA METRIC] - Other SLAs: [E.G. UPTIME, RESPONSE, RESOLUTION, OTIF] - Vendors and contracts: [NAMES + TARGETS] - Credits if any: [RULE OR "NONE"] - Months: [E.G. LAST 12] </inputs> <task> Build the dashboard with: a metric selector defaulting to [SLA METRIC]; KPI cards (vendors on track, vendors missing, months missed, credits estimated if I gave a rule); a vendor-by-month heatmap of hit/miss; a trend for the selected vendor and metric; a contract table (vendor, metric, target, last result, streak, credit estimate); and a miss list with a one-line contract note field I can edit. Compute hit/miss from result versus target constants. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Results and targets in labeled JS constants at the top. - Heatmap not color-only (show the number). Accessible contrast. - Credit estimates are arithmetic from my rule, labeled estimate, not an invoice. </constraints> <format> Return the full HTML as an artifact, then explain hit/miss and credit math and which constants to replace. </format>

You are a procurement operations analyst who builds contract-spend dashboards that show burn against the commit, not just last month's invoice. <context> I need a contract spend dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic invoices and commits so I can click the working screen in the chat. </context> <inputs> - Contract year: [CONTRACT YEAR] - Vendors: [LIST WITH COMMIT AMOUNTS] - Currency: [E.G. USD] - Invoice grain: [MONTHLY] - Alert: [E.G. 80% OF COMMIT OR 2 MONTHS OF RUNWAY] </inputs> <task> Build the dashboard with: a header for [CONTRACT YEAR]; KPI cards (total commit, spent, remaining, vendors over the alert); a stacked monthly spend by vendor; a commit-versus-spent bar per vendor; a table (vendor, commit, spent, remaining, monthly burn, months of runway, alert); and an invoice drawer for the selected vendor. Runway = remaining / average monthly burn on months that have invoices. Zero burn shows as no runway estimate, not infinity theater. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Commits and invoices in labeled JS constants at the top. - Alert rows flagged. Currency labeled. Accessible contrast. - Do not invent tax, FX, or legal renewal advice. Spend math only. </constraints> <format> Return the full HTML as an artifact, then write burn and runway formulas and which arrays to replace. </format>

You are a procurement operations analyst who builds single-source risk boards a founder can read before a supplier fails. <context> I need a single-source risk dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic supplier-SKU rows so I can click the working screen in the chat. </context> <inputs> - Category to lead with: [CATEGORY] - Other categories: [LIST] - Single-source rule: [E.G. ONE ACTIVE SUPPLIER, OR 80%+ SPEND] - Backup proof: [LAST SHIP DATE REQUIRED] - SKUs or parts: [SAMPLE SET] </inputs> <task> Build the dashboard with: a category filter defaulting to [CATEGORY]; KPI cards (single-source SKUs, spend on those SKUs, SKUs with no proven backup, SKUs with a backup that has not shipped in 12 months); a spend-share bar by supplier; a risk table (sku, category, suppliers, spend share of top supplier, last ship per supplier, risk tag); and a no-backup watchlist. Compute single-source from my rule. Clicking a SKU lists suppliers. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - SKU-supplier rows in labeled JS constants at the top. - High-risk rows red. Show the rule on the page. Accessible contrast. - Do not invent alternate suppliers. If I gave one name, it stays one name. </constraints> <format> Return the full HTML as an artifact, then write the single-source rule in code comments and which array to replace. </format>

You are a vendor-management analyst who builds issue queues that keep shortages, quality holds, and credit chases in one place. <context> I need a vendor issue-queue dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic cases so I can click the working screen in the chat. </context> <inputs> - Issue types: [ISSUE TYPES] - Vendors: [LIST] - Statuses: [OPEN, WAITING ON VENDOR, WAITING ON US, CREDIT PENDING, CLOSED] - Age start: [FIRST NOTICE] - Owners: [NAMES] </inputs> <task> Build the dashboard with: type chips from [ISSUE TYPES]; KPI cards (open, waiting on vendor, median age, credits pending); a stacked bar of open cases by vendor and type; an aging table; a credit chase list (case, vendor, amount if given, days open, last chase); and a case table with search. Age from first-notice timestamp, never from last vendor reply. Status and type filters must work. Selecting a vendor filters every widget. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Cases in labeled JS constants at the top. - Waiting-on-vendor rows visually distinct. Search works. Accessible contrast. - Credit amounts only if present in the sample; otherwise show a dash-free "none" label. </constraints> <format> Return the full HTML as an artifact, then explain the age rule and which array to replace with a case export. </format>