# Dashboard & My Applications / Search & Filter Search and filter pattern for citizen applications with a search bar and filtered result list. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-dashboard-my-applications-search-filter--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-dashboard-my-applications-search-filter--full-screen - Desktop Workspace: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-dashboard-my-applications-search-filter--desktop-workspace ## When to use this pattern Use Dashboard & My Applications / Search & Filter 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 Dashboard & My Applications / Search & Filter. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Desktop Workspace — Search - My Applications HTML: ```html

Good morning, Ramesh

Here's an overview of your applications

search
school
INC-2026-MH-04127 Social Welfare Department

Post-Matric Scholarship

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Escalation Register grievance arrow_forward
payments
INC-2026-MH-04127 Revenue Department

Income Certificate

2 days overdue Action needed Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Action needed Upload document upload
restaurant
RCR-2026-MH-00917
Food & Civil Supplies (PDS)

Ration Card Renewal

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
volunteer_activism

Birth Certificate

check Issued check
Municipal Corporation
Reference Number GRV-2026-04127
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
``` React: ```jsx import React from 'react'; const DashboardMyApplicationsSearchFilterExample1Demo = () => ( <>

Good morning, Ramesh

Here's an overview of your applications

search
school
INC-2026-MH-04127 Social Welfare Department

Post-Matric Scholarship

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
payments
INC-2026-MH-04127 Revenue Department

Income Certificate

2 days overdue Action needed Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
restaurant
RCR-2026-MH-00917
Food & Civil Supplies (PDS)

Ration Card Renewal

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
volunteer_activism

Birth Certificate

check Issued check
Municipal Corporation
Reference Number GRV-2026-04127
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
); export default DashboardMyApplicationsSearchFilterExample1Demo; ``` Angular: ```html

Good morning, Ramesh

Here's an overview of your applications

search
school
INC-2026-MH-04127 Social Welfare Department

Post-Matric Scholarship

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Escalation Register grievance arrow_forward
payments
INC-2026-MH-04127 Revenue Department

Income Certificate

2 days overdue Action needed Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Action needed Upload document upload
restaurant
RCR-2026-MH-00917
Food & Civil Supplies (PDS)

Ration Card Renewal

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
volunteer_activism

Birth Certificate

check Issued check
Municipal Corporation
Reference Number GRV-2026-04127
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
``` ### 2. Full Screen — Search - My Applications HTML: ```html

Good morning, Ramesh

Here's an overview of your applications

search
school
INC-2026-MH-04127 Social Welfare Department

Post-Matric Scholarship

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Escalation Register grievance arrow_forward
payments
INC-2026-MH-04127 Revenue Department

Income Certificate

2 days overdue Action needed Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Action needed Upload document upload
restaurant
RCR-2026-MH-00917
Food & Civil Supplies (PDS)

Ration Card Renewal

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
volunteer_activism

Birth Certificate

check Issued check
Municipal Corporation
Reference Number GRV-2026-04127
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
``` React: ```jsx import React from 'react'; const DashboardMyApplicationsSearchFilterExample2Demo = () => ( <>

Good morning, Ramesh

Here's an overview of your applications

search
school
INC-2026-MH-04127 Social Welfare Department

Post-Matric Scholarship

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
payments
INC-2026-MH-04127 Revenue Department

Income Certificate

2 days overdue Action needed Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
restaurant
RCR-2026-MH-00917
Food & Civil Supplies (PDS)

Ration Card Renewal

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
volunteer_activism

Birth Certificate

check Issued check
Municipal Corporation
Reference Number GRV-2026-04127
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
); export default DashboardMyApplicationsSearchFilterExample2Demo; ``` Angular: ```html

Good morning, Ramesh

Here's an overview of your applications

search
school
INC-2026-MH-04127 Social Welfare Department

Post-Matric Scholarship

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Escalation Register grievance arrow_forward
payments
INC-2026-MH-04127 Revenue Department

Income Certificate

2 days overdue Action needed Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Action needed Upload document upload
restaurant
RCR-2026-MH-00917
Food & Civil Supplies (PDS)

Ration Card Renewal

2 days overdue Escalation available Last Updated Date Last updated: 10 Apr 2026
volunteer_activism

Birth Certificate

check Issued check
Municipal Corporation
Reference Number GRV-2026-04127
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
```