Skip to content

Kan 62 export data add export UI to settings page - #75

Open
Jsofeng wants to merge 4 commits into
mainfrom
kan-62-export-data-add-export-ui-to-settings-page
Open

Jsofeng wants to merge 4 commits into
mainfrom
kan-62-export-data-add-export-ui-to-settings-page

Conversation

@Jsofeng

@Jsofeng Jsofeng commented Jun 29, 2026

Copy link
Copy Markdown

JIRA TICKET LINK: https://anselatria2.atlassian.net/jira/software/projects/KAN/boards/1?selectedIssue=KAN-62
[FE] Export Data - Add data export UI to Settings page (JSON & CSV)

Migrations Required?

NO

Summary (a few sentences describing what this PR is doing)

This PR adds the frontend UI for the user data export feature on the Settings page at /SettingsPage.

A new "Data Export" card was added with two buttons -> Export JSON and Export CSV. Clicking either button calls GET /user/export/?format={json|csv} via the existing authenticatedFetch helper, converts the response to a Blob, and triggers a browser file download named townhall-user-data.{format}. Both buttons disable during an active export to prevent concurrent requests, and toast notifications confirm success or failure. The download icon was registered in the central Icons.js registry. Button layout stacks vertically on mobile and switches to a two-column grid at the sm breakpoint.

Checks

  • I have run the frontend build locally and it compiles successfully
npm run build
Compiled successfully

Note: pre-existing Sass deprecation warnings from unrelated styles are present in the build output but do not affect compilation.

@netlify

netlify Bot commented Jun 29, 2026

Copy link
Copy Markdown

Deploy Preview for atriacoop ready!

Name Link
🔨 Latest commit c81c3c2
🔍 Latest deploy log https://app.netlify.com/projects/atriacoop/deploys/6a42a2da2bd950000836897b
😎 Deploy Preview https://deploy-preview-75--atriacoop.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Jul 16, 2026

Copy link
Copy Markdown

Deploy Preview for atriacoop ready!

Name Link
🔨 Latest commit 4bea1aa
🔍 Latest deploy log https://app.netlify.com/projects/atriacoop/deploys/6a59433db164f20008d5046c
😎 Deploy Preview https://deploy-preview-75--atriacoop.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@ansel-rangers11 ansel-rangers11 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a short video or screen capture showcasing this work @Jsofeng

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants