# Consent & Declaration / Consent History Consent history patterns showing audit trail data, timeline views, and scrollable card layouts for reviewing past consents. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-consent-history--consent-audit-trail ## Pattern variants - Consent Audit Trail: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-consent-history--consent-audit-trail - Consent History - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-consent-history--consent-history-full-screen - Consent History - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-consent-history--consent-history-card ## When to use this pattern Use Consent & Declaration / Consent History 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 Consent & Declaration / Consent History. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. C A R D_1 — Consent History - Card HTML: ```html

Scheme	Third Party	Data Shared	Date Given	Status	Action
PM Kisan	Bank of India	Aadhaar, Name	12 Jan 2024	Active	View
PM Kisan	Payment Corp	Transaction ID	12 Jan 2024	Active	View
PM Kisan	SMS Gateway	Mobile Number	15 Jan 2024	Withdrawn	View
PMAY	Housing Board	Address, Income	03 Mar 2023	Expired	View

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

Consent History

A complete audit trail of all your data sharing consents for government schemes.

Scheme	Third Party	Data Shared	Date Given	Status	Action
PM Kisan	Bank of India	Aadhaar, Name	12 Jan 2024	Active	View
PM Kisan	Payment Corp	Transaction ID	12 Jan 2024	Active	View
PM Kisan	SMS Gateway	Mobile Number	15 Jan 2024	Withdrawn	View
PMAY	Housing Board	Address, Income	03 Mar 2023	Expired	View

Showing 4 of 4 consents Download Consent History (PDF)

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

Scheme	Third Party	Data Shared	Date Given	Status	Action
PM Kisan	Bank of India	Aadhaar, Name	12 Jan 2024	Active	View
PM Kisan	Payment Corp	Transaction ID	12 Jan 2024	Active	View
PM Kisan	SMS Gateway	Mobile Number	15 Jan 2024	Withdrawn	View
PMAY	Housing Board	Address, Income	03 Mar 2023	Expired	View

``` ### 2. F U L L S C R E E N_1 — Consent Audit Trail HTML: ```html

Data Type	Date & Time	Version	Status	Action
Aadhaar Number	10 Apr 2026, 14:34	v2.1	Active	Withdraw
Address	02 Jan 2026, 09:15	v1.8	Active	Withdraw
Email	15 Sep 2025, 11:02	v1.6	Withdrawn	Restore

Download consent history (PDF)

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

Your Data, Your Control

A complete record of all consents you have given, including date, time, IP address, and policy version. You can withdraw any active consent below.

Data Type	Date & Time	Version	Status	Action
Aadhaar Number	10 Apr 2026, 14:34	v2.1	Active	Withdraw
Address	02 Jan 2026, 09:15	v1.8	Active	Withdraw
Email	15 Sep 2025, 11:02	v1.6	Withdrawn	Restore

Download consent history (PDF)

Cancel

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

Data Type	Date & Time	Version	Status	Action
Aadhaar Number	10 Apr 2026, 14:34	v2.1	Active	Withdraw
Address	02 Jan 2026, 09:15	v1.8	Active	Withdraw
Email	15 Sep 2025, 11:02	v1.6	Withdrawn	Restore

Download consent history (PDF)

``` ### 3. F U L L S C R E E N_2 — Consent History - Full Screen HTML: ```html

Scheme	Third Party	Data Shared	Date Given	Status	Action
PM Kisan	Bank of India	Aadhaar, Name	12 Jan 2024	Active	View
PM Kisan	Payment Corp	Transaction ID	12 Jan 2024	Active	View
PM Kisan	SMS Gateway	Mobile Number	15 Jan 2024	Withdrawn	View
PMAY	Housing Board	Address, Income	03 Mar 2023	Expired	View

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

Consent History

A complete audit trail of all your data sharing consents for government schemes.

Scheme	Third Party	Data Shared	Date Given	Status	Action
PM Kisan	Bank of India	Aadhaar, Name	12 Jan 2024	Active	View
PM Kisan	Payment Corp	Transaction ID	12 Jan 2024	Active	View
PM Kisan	SMS Gateway	Mobile Number	15 Jan 2024	Withdrawn	View
PMAY	Housing Board	Address, Income	03 Mar 2023	Expired	View

Showing 4 of 4 consents Download Consent History (PDF)

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

Scheme	Third Party	Data Shared	Date Given	Status	Action
PM Kisan	Bank of India	Aadhaar, Name	12 Jan 2024	Active	View
PM Kisan	Payment Corp	Transaction ID	12 Jan 2024	Active	View
PM Kisan	SMS Gateway	Mobile Number	15 Jan 2024	Withdrawn	View
PMAY	Housing Board	Address, Income	03 Mar 2023	Expired	View

```