Feat: add bulk delete, icons and enhance UI #70

tanmaygautam11 · 2025-10-03T15:34:11Z

Add bulk delete functionality with enhanced UI improvements and added icons in place of text buttons.

Description

This PR introduces bulk delete functionality for transactions, allowing users to select multiple transactions and delete them in a single operation. Additionally, the UI has been enhanced with modern hover effects and icon-based navigation for better user experience.

Key Features Added:

Bulk Selection: Individual checkboxes for each transaction
Select All: Master checkbox in table header to select/deselect all transactions
Bulk Delete: Delete button that appears when transactions are selected, with confirmation dialog
Icon Integration: Replaced text buttons with lucide-react icons for Edit/Delete actions
Enhanced Pagination: Icon-only Previous/Next buttons with improved styling
Hover Effects: Professional hover states for checkboxes, rows, and interactive elements

Related Issue

Fixes #25

Motivation and Context

Users frequently need to delete multiple transactions at once (e.g., duplicate entries, bulk cleanup, imported data corrections). The previous implementation required deleting transactions one by one, which was time-consuming and inefficient. This enhancement significantly improves user productivity by enabling bulk operations while maintaining a clean, professional interface.

Types of Changes

New feature (non-breaking change which adds functionality)
Enhancement (improvement to an existing feature)
Bug fix (non-breaking change which fixes an issue)
Breaking change (fix or feature that would cause existing functionality to change)
Test (adds or updates tests only)
Documentation (non-code change)

How Has This Been Tested?

Manual Testing: Verified bulk selection and deletion functionality across different scenarios
Edge Cases: Tested with 0 selected items, single item, multiple items, and all items selected
UI Testing: Verified hover effects work correctly across different browsers
Responsive Testing: Confirmed functionality works on mobile and desktop viewports
Accessibility Testing: Ensured proper focus states and screen reader compatibility
Error Handling: Tested network failures during bulk delete operations

Test Scenarios:

Select individual transactions and bulk delete
Use "Select All" to select/deselect all transactions
Delete all transactions on a page
Verify confirmation dialog appears before deletion
Test pagination navigation with new icon buttons
Verify edit/delete icons function properly

Screenshots (if applicable):

Checklist

My code follows the code style of this project
My change requires a change to the documentation
I have updated the documentation accordingly
I have added tests to cover my changes
All new and existing tests passed

netlify · 2025-10-03T15:34:17Z

✅ Deploy Preview for paisable ready!

Name	Link
🔨 Latest commit	`045c58a`
🔍 Latest deploy log	https://app.netlify.com/projects/paisable/deploys/68e542db0a24de00081aaf9d
😎 Deploy Preview	https://deploy-preview-70--paisable.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 95 Accessibility: 100 Best Practices: 100 SEO: 91 PWA: 70 View the detailed breakdown and full score reports

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

Copilot

Pull Request Overview

This PR adds bulk delete functionality for transactions, allowing users to select multiple transactions and delete them in a single operation. The UI has been modernized with icon-based buttons and enhanced hover effects for better user experience.

Added bulk selection with individual and master checkboxes
Implemented bulk delete with confirmation dialog
Replaced text buttons with lucide-react icons for actions and navigation

Reviewed Changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.

File	Description
frontend/src/pages/TransactionsPage.jsx	Implements bulk selection state, bulk delete functionality, and replaces text buttons with icons from lucide-react
frontend/package.json	Adds lucide-react dependency for icon components

Files not reviewed (1)

frontend/package-lock.json: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

frontend/src/pages/TransactionsPage.jsx

Copilot

Pull Request Overview

Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

frontend/package-lock.json: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

frontend/src/pages/TransactionsPage.jsx

tanmaygautam11 · 2025-10-03T16:31:41Z

@archa8 Please review this PR and tell me if you want any suggestions to be added.

archa8 · 2025-10-03T19:28:06Z

Kindly cross-link the corresponding issue. Thank you!

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

archa8

@tanmaygautam11 The Edit and Delete icons work as intended, but the bulk delete doesn't work. For this, you'll need to make changes to backend/routes/transactionRoutes.js where you'll have to write the code to handle bulk delete. I have resolved the conflicts that were occurring in the TransactionsPage.jsx, so kindly pull the changes in your branch and then update the corresponding code.

Copilot

Pull Request Overview

Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

frontend/package-lock.json: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

frontend/src/pages/TransactionsPage.jsx

archa8 · 2025-10-06T16:45:33Z

Hey @tanmaygautam11, kindly use the existing EmptyState component instead of creating one for no transactions and look at Copilot's suggestions for once. Rest all looks fine to me.

Copilot

Pull Request Overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

frontend/package-lock.json: Language not supported

Comments suppressed due to low confidence (1)

backend/controllers/transactionController.js:1

Using alert() for error handling in modern React applications is not a best practice. Consider using a proper notification system or state-based error handling instead.

const IncomeExpense = require('../models/IncomeExpense');

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

frontend/src/pages/TransactionsPage.jsx

tanmaygautam11 · 2025-10-07T16:46:10Z

Hey @archa8, I have looked at the copilot suggestions and added the important ones. Also I have improved debouncing logic in the code. Please review the changes and tell me if you want any other changes.

archa8

Looks good and works as intended. LGTM!

tanmaygautam11 added 3 commits October 3, 2025 20:01

feat: add bulk delete functionality

a874188

add hover effect

0e860d8

add icons on transactions page

10ffcac

Copilot AI review requested due to automatic review settings October 3, 2025 15:34

Copilot AI reviewed Oct 3, 2025

View reviewed changes

frontend/src/pages/TransactionsPage.jsx Outdated Show resolved Hide resolved

frontend/src/pages/TransactionsPage.jsx Show resolved Hide resolved

frontend/src/pages/TransactionsPage.jsx Outdated Show resolved Hide resolved

tanmaygautam11 added 2 commits October 3, 2025 21:19

add suggestion

91bdc00

fix deploy error

941b025

Copilot AI review requested due to automatic review settings October 3, 2025 15:57

Copilot AI reviewed Oct 3, 2025

View reviewed changes

frontend/src/pages/TransactionsPage.jsx Outdated Show resolved Hide resolved

frontend/src/pages/TransactionsPage.jsx Outdated Show resolved Hide resolved

frontend/src/pages/TransactionsPage.jsx Outdated Show resolved Hide resolved

using text-center in place of flex for checkbox

9f81fea

tanmaygautam11 changed the title ~~Feat/bulk delete~~ Feat: add bulk delete, icons and enhance UI Oct 3, 2025

Merge branch 'master' into feat/bulk-delete

bfb1d6c

Copilot AI review requested due to automatic review settings October 4, 2025 17:13

Copilot AI reviewed Oct 4, 2025

View reviewed changes

archa8 requested changes Oct 4, 2025

View reviewed changes

archa8 and others added 2 commits October 4, 2025 23:01

fix: resolve file conflicts

1fb1d0f

Merge branch 'Code-A2Z:master' into feat/bulk-delete

d074f9e

Copilot AI review requested due to automatic review settings October 6, 2025 16:03

Copilot AI reviewed Oct 6, 2025

View reviewed changes

frontend/src/pages/TransactionsPage.jsx Outdated Show resolved Hide resolved

frontend/src/pages/TransactionsPage.jsx Outdated Show resolved Hide resolved

frontend/src/pages/TransactionsPage.jsx Outdated Show resolved Hide resolved

add bulk delete api route

b8bdba2

add requested change and copilot suggestions

2b3b2b8

Copilot AI review requested due to automatic review settings October 7, 2025 16:14

Copilot AI reviewed Oct 7, 2025

View reviewed changes

frontend/src/pages/TransactionsPage.jsx Show resolved Hide resolved

frontend/src/pages/TransactionsPage.jsx Show resolved Hide resolved

frontend/src/pages/TransactionsPage.jsx Outdated Show resolved Hide resolved

improve code and add suggestions

045c58a

tanmaygautam11 requested a review from archa8 October 7, 2025 16:46

archa8 approved these changes Oct 7, 2025

View reviewed changes

archa8 merged commit 54d6e98 into Code-A2Z:master Oct 7, 2025
4 checks passed

Feat: add bulk delete, icons and enhance UI #70

Feat: add bulk delete, icons and enhance UI #70

Uh oh!

Conversation

tanmaygautam11 commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Key Features Added:

Related Issue

Motivation and Context

Types of Changes

How Has This Been Tested?

Test Scenarios:

Screenshots (if applicable):

Checklist

Uh oh!

netlify bot commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for paisable ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tanmaygautam11 commented Oct 3, 2025

Uh oh!

archa8 commented Oct 3, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

archa8 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

archa8 commented Oct 6, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tanmaygautam11 commented Oct 7, 2025

Uh oh!

archa8 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tanmaygautam11 commented Oct 3, 2025 •

edited

Loading

netlify bot commented Oct 3, 2025 •

edited

Loading

archa8 left a comment •

edited

Loading