Feature/implement transaction page in dashboard

[legend4tech]

Implement Transaction Page In Dashboard

📋 Overview

Added a comprehensive transaction dashboard to the application with advanced filtering, sorting, and pagination capabilities. This feature provides users with a complete view of their transaction history with intuitive controls for data manipulation.

✨ Features Added

• Transaction Statistics Cards: Real-time overview of total, canceled, and successful transactions
• Advanced Filtering: Filter by DAO, project, action type, and search functionality
• Column Sorting: Individual ascending/descending sort controls for all table columns
• Pagination: Navigate through large transaction datasets efficiently
• Responsive Design: Mobile-optimized layout with proper breakpoints
• Optimized Loading States: Smart loading indicators that distinguish between initial load and subsequent operations

📁 Files Added

Core Components

• app/dashboard/transactions/page.tsx - Main transaction page (Server Component)
• app/dashboard/transactions/components/transaction-dashboard-section.tsx - Main dashboard container (Client Component)
• app/dashboard/transactions/components/transaction-stats.tsx - Statistics cards with gradient styling
• app/dashboard/transactions/components/transaction-filters.tsx - Filter controls (DAO, Project, Action)
• app/dashboard/transactions/components/transaction-table.tsx - Data table with sorting and empty states
• app/dashboard/transactions/components/transaction-pagination.tsx - Pagination controls with loading states

Utilities & Hooks

• hooks/use-transactions.ts - Custom hook for data fetching, filtering, and state management

UI Components (Updated)

• components/ui/table.tsx - Enhanced table components

🎨 Design Implementation

• Color Scheme: Dark theme with purple gradients (#894DBD to #5E5EFF)
• Border Colors: Consistent #42415B borders throughout
• Typography: Proper font weights and spacing for readability
• Responsive Layout: Mobile-first approach with proper breakpoints

🚀 Performance Optimizations

• Smart Loading States: Full skeleton only on initial load, lightweight indicators for subsequent operations
• Optimized Re-renders: Proper state management to prevent unnecessary updates
• Type Safety: Full TypeScript implementation with proper interfaces

🔧 Technical Details

• Architecture: Server/Client component separation following Next.js App Router best practices
• State Management: Local state with custom hooks for data operations
• Accessibility: Proper ARIA labels, keyboard navigation, and semantic HTML
• Error Handling: Graceful error states with user-friendly messages

📱 Mobile Responsiveness

• Responsive grid layouts for statistics cards
• Mobile-optimized table with horizontal scroll
• Flexible filter controls that stack on smaller screens
• Touch-friendly pagination controls

This implementation provides a solid foundation for transaction management while maintaining excellent performance and user experience across all device sizes.

📸 Screenshot

Closes #84

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
budget-chain	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 3, 2025 2:59am

[Pvsaint]

@legend4tech please fix the width of the transaction page, make it match the width of other compomenents in the dashboard, it is squashing the sidebar.

[legend4tech]

@Pvsaint i have made the changes