# Status Tracker / Introduction Status Tracker patterns for government services including application status tracking with timeline, grievance tracking with escalation paths, and inspection/test slot scheduling. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-status-tracker-introduction--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-status-tracker-introduction--full-screen ## When to use this pattern Use Status Tracker / Introduction when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Status Tracker / Introduction. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Full Screen — Full Screen HTML: ```html

Patterns

Status Tracker

Patterns for tracking application status, grievance resolution, and inspection/test slot scheduling in government services.

track_changes

Application Tracker

Track application status with SLA progress bars, vertical journey timelines, action required alerts, and rejection feedback screens.

feedback

Grievance Tracker

Grievance status overview with escalation paths, timeline tracking, detail cards, and multi-level resolution flow.

calendar_month

Inspection & Test Slot

Field inspection notification, calendar-based slot selection with availability badges, and confirmation stepper flow.

``` React: ```jsx import React from 'react'; const StatusTrackerIntroductionExample1Demo = () => ( <>

Patterns

Status Tracker

Patterns for tracking application status, grievance resolution, and inspection/test slot scheduling in government services.

{/* Application Status Tracker */}

track_changes

Application Tracker

Track application status with SLA progress bars, vertical journey timelines, action required alerts, and rejection feedback screens.

{/* Grievance Tracker */}

feedback

Grievance Tracker

Grievance status overview with escalation paths, timeline tracking, detail cards, and multi-level resolution flow.

{/* Test Slot Booking */}

calendar_month

Inspection & Test Slot

Field inspection notification, calendar-based slot selection with availability badges, and confirmation stepper flow.

); export default StatusTrackerIntroductionExample1Demo; ``` Angular: ```html

Patterns

Status Tracker

Patterns for tracking application status, grievance resolution, and inspection/test slot scheduling in government services.

track_changes

Application Tracker

Track application status with SLA progress bars, vertical journey timelines, action required alerts, and rejection feedback screens.

feedback

Grievance Tracker

Grievance status overview with escalation paths, timeline tracking, detail cards, and multi-level resolution flow.

calendar_month

Inspection & Test Slot

Field inspection notification, calendar-based slot selection with availability badges, and confirmation stepper flow.

```