# Status Tracker / Grievance Tracker Grievance tracking with SLA progress, detail cards, escalation paths, and journey timeline. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-status-tracker-grievance-tracker--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-status-tracker-grievance-tracker--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-status-tracker-grievance-tracker--card - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-status-tracker-grievance-tracker--column ## When to use this pattern Use Status Tracker / Grievance Tracker 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 / Grievance Tracker. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Grievance Tracker - Overview with Escalation HTML: ```html

Delay in certificate issuance

Grievance ID · GRV-2026-MH-04127

In Progress

8 days left

Grievance details

Category Certificate issuance

Lodged on 02 Apr 2026

Against Revenue Dept, Pune

Current stage District Officer

Escalation path

Your grievance moves up a level if it is not resolved within the SLA.

Level 1 · District Grievance Officer

Revenue Dept, Pune · Active since 10 Apr 2026

Level 2 · State Appellate Authority

Pending — escalates after SLA breach

Level 3 · CPGRAMS (National portal)

Pending — final escalation level

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

arrow_back Back

Delay in certificate issuance

Grievance ID · GRV-2026-MH-04127

pending_actions In Progress

8 days left

Grievance details

Category Certificate issuance

Lodged on 02 Apr 2026

Against Revenue Dept, Pune

Current stage District Officer

Escalation path

Your grievance moves up a level if it is not resolved within the SLA.

Level 1 · District Grievance Officer

Revenue Dept, Pune · Active since 10 Apr 2026

Level 2 · State Appellate Authority

Pending — escalates after SLA breach

Level 3 · CPGRAMS (National portal)

Pending — final escalation level

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

Back

Delay in certificate issuance

Grievance ID · GRV-2026-MH-04127

In Progress

8 days left

Grievance details

Category Certificate issuance

Lodged on 02 Apr 2026

Against Revenue Dept, Pune

Current stage District Officer

Escalation path

Your grievance moves up a level if it is not resolved within the SLA.

Level 1 · District Grievance Officer

Revenue Dept, Pune · Active since 10 Apr 2026

Level 2 · State Appellate Authority

Pending — escalates after SLA breach

Level 3 · CPGRAMS (National portal)

Pending — final escalation level

``` ### 2. Column — Grievance Tracker - Overview with Escalation HTML: ```html

Back

Delay in certificate issuance

Grievance ID · GRV-2026-MH-04127

In Progress

8 days left

Grievance details

Category Certificate issuance

Lodged on 02 Apr 2026

Against Revenue Dept, Pune

Current stage District Officer

Escalation path

Your grievance moves up a level if it is not resolved within the SLA.

Level 1 · District Grievance Officer

Revenue Dept, Pune · Active since 10 Apr 2026

Level 2 · State Appellate Authority

Pending — escalates after SLA breach

Level 3 · CPGRAMS (National portal)

Pending — final escalation level

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

arrow_back Back

Delay in certificate issuance

Grievance ID · GRV-2026-MH-04127

pending_actions In Progress

8 days left

Grievance details

Category Certificate issuance

Lodged on 02 Apr 2026

Against Revenue Dept, Pune

Current stage District Officer

Escalation path

Your grievance moves up a level if it is not resolved within the SLA.

Level 1 · District Grievance Officer

Revenue Dept, Pune · Active since 10 Apr 2026

Level 2 · State Appellate Authority

Pending — escalates after SLA breach

Level 3 · CPGRAMS (National portal)

Pending — final escalation level

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

Back

Delay in certificate issuance

Grievance ID · GRV-2026-MH-04127

In Progress

8 days left

Grievance details

Category Certificate issuance

Lodged on 02 Apr 2026

Against Revenue Dept, Pune

Current stage District Officer

Escalation path

Your grievance moves up a level if it is not resolved within the SLA.

Level 1 · District Grievance Officer

Revenue Dept, Pune · Active since 10 Apr 2026

Level 2 · State Appellate Authority

Pending — escalates after SLA breach

Level 3 · CPGRAMS (National portal)

Pending — final escalation level

``` ### 3. Full Screen — Grievance Tracker - Overview with Escalation HTML: ```html

Back

Delay in certificate issuance

Grievance ID · GRV-2026-MH-04127

In Progress

8 days left

Grievance details

Category Certificate issuance

Lodged on 02 Apr 2026

Against Revenue Dept, Pune

Current stage District Officer

Escalation path

Your grievance moves up a level if it is not resolved within the SLA.

Level 1 · District Grievance Officer

Revenue Dept, Pune · Active since 10 Apr 2026

Level 2 · State Appellate Authority

Pending — escalates after SLA breach

Level 3 · CPGRAMS (National portal)

Pending — final escalation level

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

arrow_back Back

Delay in certificate issuance

Grievance ID · GRV-2026-MH-04127

pending_actions In Progress

8 days left

Grievance details

Category Certificate issuance

Lodged on 02 Apr 2026

Against Revenue Dept, Pune

Current stage District Officer

Escalation path

Your grievance moves up a level if it is not resolved within the SLA.

Level 1 · District Grievance Officer

Revenue Dept, Pune · Active since 10 Apr 2026

Level 2 · State Appellate Authority

Pending — escalates after SLA breach

Level 3 · CPGRAMS (National portal)

Pending — final escalation level

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

Back

Delay in certificate issuance

Grievance ID · GRV-2026-MH-04127

In Progress

8 days left

Grievance details

Category Certificate issuance

Lodged on 02 Apr 2026

Against Revenue Dept, Pune

Current stage District Officer

Escalation path

Your grievance moves up a level if it is not resolved within the SLA.

Level 1 · District Grievance Officer

Revenue Dept, Pune · Active since 10 Apr 2026

Level 2 · State Appellate Authority

Pending — escalates after SLA breach

Level 3 · CPGRAMS (National portal)

Pending — final escalation level

```