feat(admin): implement admin dashboard layout and components with API…

[System625]

📌 Implement Admin Dashboard with API Integration

📋 Description

Implemented a comprehensive admin dashboard that provides platform administrators with an overview of key metrics, user activity, and recent transactions. The dashboard features a responsive design that adapts to different screen sizes and integrates with the backend API using React Query for efficient data fetching and caching.

🛠 Changes Implemented

• Created admin dashboard page at app/admin/page.tsx with Layout component integration
• Built AdminOverviewCards component displaying total users, transactions, pending KYC, and currencies
• Implemented AdminRecentTransactions component with responsive table design
• Added useAdminDashboard hook with React Query for API integration
• Created adminService with endpoints for overview, transactions, currencies, and user stats
• Configured environment variable NEXT_PUBLIC_API_BASE_URL in .env.example
• Added responsive grid layout with mobile-first design approach
• Implemented loading skeletons and error states for better UX
• Created admin layout with sidebar and header components

✅ How to Test

1. Setup:

   • Copy .env.example to .env.local
   • Set NEXT_PUBLIC_API_BASE_URL to your backend URL
   • Run npm install and npm run dev

2. Run Tests:

   • Navigate to /admin route
   • Verify all metric cards load with data or show loading states
   • Check responsive behavior on mobile and desktop
   • Test API integration with network tab

3. Expected Output:

   • Dashboard displays overview cards with metrics
   • Recent transactions table shows user data
   • Responsive layout adapts to screen size
   • Loading states appear while fetching data

🔍 Screenshots (if applicable)

🚀 Checklist

• Code follows project style guidelines
• Changes are tested and verified
• Documentation is updated (if needed)
• TypeScript types are properly defined
• React Query integration is implemented
• Responsive design is implemented
• Loading states and error handling are included

🔗 Related Issues

• Closes Implement Admin Dashboard with API Integration #56

[portableDD]

LGTM