# Payment & Transactions / Pending Tasks Dashboard pending tasks view with overdue alerts, filter chips, expandable result list items, and action buttons. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-payment-transactions-pending-tasks--pending-tasks ## Pattern variants - Pending Tasks: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-payment-transactions-pending-tasks--pending-tasks - No Pending Tasks: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-payment-transactions-pending-tasks--no-pending-tasks ## When to use this pattern Use Payment & Transactions / Pending Tasks 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 Payment & Transactions / Pending Tasks. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. No Pending Tasks — No Pending Tasks HTML: ```html
arrow_back Back to home

No pending tasks

You have no pending tasks right now. All your applications are progressing smoothly.

``` React: ```jsx import React from 'react'; const PaymentTransactionsPendingTasksExample1Demo = () => ( <>
arrow_back Back to home

No pending tasks

You have no pending tasks right now. All your applications are progressing smoothly.

); export default PaymentTransactionsPendingTasksExample1Demo; ``` Angular: ```html
arrow_back Back to home

No pending tasks

You have no pending tasks right now. All your applications are progressing smoothly.

``` ### 2. Pending Tasks — Pending Tasks Dashboard HTML: ```html

Pending Tasks

3 tasks need your attention

error
1 task is overdue Upload income proof for your Income Certificate before your application is rejected.
cloud_upload

Upload income proof

Income Certificate - INC-2026-MH-04127
Overdue by 2 days
payments

Pay application fee

Birth Certificate - BC-2026-MH-001
Due in 3 days
event

Schedule field inspection

Property Mutation - PM-2026-MH-089
Due in 7 days
``` React: ```jsx import React from 'react'; const PaymentTransactionsPendingTasksExample2Demo = () => ( <>

Pending Tasks

3 tasks need your attention

error
1 task is overdue Upload income proof for your Income Certificate before your application is rejected.
cloud_upload

Upload income proof

Income Certificate - INC-2026-MH-04127
Overdue by 2 days
payments

Pay application fee

Birth Certificate - BC-2026-MH-001
Due in 3 days
event

Schedule field inspection

Property Mutation - PM-2026-MH-089
Due in 7 days
); export default PaymentTransactionsPendingTasksExample2Demo; ``` Angular: ```html

Pending Tasks

3 tasks need your attention

error
1 task is overdue Upload income proof for your Income Certificate before your application is rejected.
cloud_upload

Upload income proof

Income Certificate - INC-2026-MH-04127
Overdue by 2 days
payments

Pay application fee

Birth Certificate - BC-2026-MH-001
Due in 3 days
event

Schedule field inspection

Property Mutation - PM-2026-MH-089
Due in 7 days
```