DCR Time-to-Decision Dashboard

A Power BI–style web dashboard prototype that measures how many days pass from DCR Created Date (day 0) until the request reaches a stop state (decision).

Quick Start

npm install
npm run dev

Open http://localhost:5173 in your browser.

Features

Interactive Slicers (Filters)

• Created Date Range – filter by date within 2025
• Product – multi-select product filter
• Customer – multi-select customer filter
• Stop State – multi-select stop state filter
• Status – toggle between All / Completed / In Progress

KPI Cards

All metrics update dynamically with filters:

• Avg Days: Initial Review
• Avg Days: Rejected (Not Aligned with Strategy)
• Avg Days: Evidence Gathering
• Avg Days: Engineering Backlog
• Avg Days: Engineering Commitment
• Avg Days: End-to-End
• Total DCR Count
• % Rejected
• % Sent to Engineering

Charts

• Bar Chart – Average End-to-End Days by Product
• Stacked Column – DCR Count by Stop State per Product
• Histogram – Distribution of End-to-End Days (bins: 0–7, 8–14, 15–30, 31–60, 61–90, 90+)
• Trend Line – Monthly DCR Created count in 2025

Data Table

• Sortable by any column (click headers)
• Searchable (free-text filter)
• Shows: DCR ID, Title, Customer, Product, Created Date, Stop State, Stop State Date, E2E Days, Status, Feature Request ID

Stop State Logic

The clock always starts at DCR.createdDate.

A DCR reaches a "full stop" when it hits one of these states:

1. Rejected – Not Aligned with Strategy
2. Evidence Gathering (Reject – Evidence Not Sufficient)
3. Engineering Backlog
4. Engineering Commitment

The stop state is determined by the earliest populated stop-state date. If none exist, the DCR is marked as In Progress and excluded from end-to-end averages.

Project Structure

src/
├── App.tsx                    # Main app with filter logic
├── App.css                    # Power BI–style dashboard CSS
├── index.css                  # Global styles
├── types.ts                   # TypeScript interfaces
├── data/
│   └── generateMockData.ts    # Programmatic mock dataset (60 DCRs)
├── utils/
│   └── dcrUtils.ts            # dateDiffInDays, resolveStopState, calculateAverages
└── components/
    ├── FiltersPanel.tsx        # Sidebar filter slicers
    ├── KpiCards.tsx            # KPI metric cards
    ├── ChartsSection.tsx       # 4 Recharts visualizations
    └── DcrTable.tsx            # Sortable/searchable data table

Products in Dataset

• Microsoft Defender for Endpoint
• Microsoft Defender for Identity
• Microsoft Sentinel
• Microsoft Defender for Office 365

Tech Stack

• React 18 + TypeScript
• Vite (dev server & build)
• Recharts (charting library)
• date-fns (date utilities)