Major Rework: Upgrade to v3 – New UI/UX & More 🚀

[a3ryk]

📢 Overview

This PR delivers a major overhaul of the platform, introducing a modernized UI/UX, enhanced dashboard features, improved authentication flows, real-time notifications, and significant code optimizations.

✨ What's New

🎨 UI/UX Improvements

• Custom Cursor Styling – A sleek new cursor design for a modern feel.
• Skeleton Loaders – Improve perceived performance for HeaderAvatar and ProfileCard.
• Refreshed Dashboard Header – Better authentication handling and navigation.
• Revamped Error & 404 Pages – More user-friendly and visually appealing.
• New Loaders & Spinners – Enhanced user experience with smoother animations.
• Styled Scrollbar & Progress Bar – Improved UI consistency and aesthetics.
• Feature Section for Premium Page – Highlighting exclusive features effectively.
• Updated Navigation – /dash is now /dashboard for better clarity.
• Revamped Authentication Pages – Improved "Auth In Progress" and "Auth Failure" pages for a smoother experience.
• New Authentication Loader – Added a sleek new loader for authentication states.

📊 Dashboard & Analytics Enhancements

• API Usage Charts – Visual insights into API request trends and popular endpoints.
• Leaderboard Component – Ranking and tracking system for better engagement.
• Breadcrumb Navigation – Improved user navigation across dashboard pages.
• My Analytics Page Enhancements – Integrated charts and leaderboard for better insights.

🔐 Authentication & User Management

• RequireDiscordOAuth Component – Enforcing authentication where necessary.
• Change Email, Username & Password Pages – Includes validation, error handling & security improvements.
• Password Strength Meter – Visual feedback for stronger passwords.

🌐 Real-Time & WebSocket Upgrades

• WebSocketProvider – Enables real-time notifications across the platform.
• Live Notification Popup – Get notified instantly without refreshing the page.

🛠 New Components & Features

• Custom Dashboard Footer – Personalized branding and useful links.
• Toggle Switches for Privacy Settings – Seamless control over user preferences.
• New Sidebar for Upcoming Dashboard – Improved structure and accessibility.
• useTypewriter Hook – Smooth, animated text effects.

🏗 Refactoring & Codebase Optimization

• Modularized UI Components – Moved features, head, and header into reusable sections.
• Deprecated Tools Page Removed – Transitioned to new dashboard sections.
• Revamped Plan Cards UI – Better layout for displaying premium features.
• Removed react-progressbar Package – Replaced with a custom implementation for efficiency.
• Refactored UI Components – Removed unnecessary imports and integrated useRouter for better routing.
• Dashboard Structure Update – Moved the old dashboard to /old/dashboard and removed outdated files.
• PageWrapper Component – Added PageWrapper to check page status from the backend.
• Refactored Page Fetching – Integrated PageWrapper into existing pages for consistent status checks.
• Updated Fetch Validation – Adjusted fetchValidation according to the updated response format.
• Utility Functions Moved – Moved formatTime and playNotificationSound to an external utilities file.
• Improved Error Page – Optimized for better readability and reduced redundant code.
• Updated Navigation Route – Changed /dash to /dashboard for better clarity.

🔄 API & Backend Enhancements

• New POST /api/notifications Route – Fetch notifications efficiently.
• Page Validator Utility – Useful for debugging and testing.
• Optimized Cookie Settings – Improved security and compliance.
• New GET users/:id/roles Route – Fetch user roles from the external API.
• New Internal API for Discord – Retrieve Discord user information directly from the Discord API.
• Validator Endpoint Enhancements – Updated validator API with new features.

🚀 Miscellaneous Updates

• Removed Unused Components – Cleaned up the old directory structure.
• Deprecated Settings Page – Removed the outdated settings page.

📌 Summary

This upgrade brings a refined UI, smoother user experience, and powerful new features. The dashboard is now more intuitive, authentication is more secure, and real-time notifications keep users updated effortlessly.

🚀 This is a game-changing update, making the platform faster, smarter, and more user-friendly! 🔥

[Copilot]

Pull Request Overview

This PR represents a major overhaul to upgrade the platform to version 3, emphasizing a modernized UI/UX, enhanced real-time features, and significant backend/API improvements. Key changes include:

• Introduction of new UI components (e.g., custom loaders, notifications popup, revamped headers/footers)
• Refactoring and consolidation of code for improved modularity and performance
• Updates to authentication flows and real-time notification handling

Reviewed Changes

Copilot reviewed 98 out of 98 changed files in this pull request and generated 1 comment.

File	Description
src/components/pages/dashboard/Leaderboard.js	Fetch functions renamed and logic updated to improve clarity
src/components/pages/dashboard/ContentWrapper.js	Conditional logic for service availability flagged for review
Other files (Headers, Notifications, Footer, etc.)	New/updated UI components, hooks and API changes supporting new UI/UX

Comments suppressed due to low confidence (1)

src/components/pages/dashboard/Leaderboard.js:14

• Multiple functions named 'fetchTopEndpoints' are defined to fetch different data sets. Consider renaming them (e.g., fetchTopUsers, fetchPopularEndpoints, fetchUserQuota) for improved clarity and maintainability.

async function fetchTopEndpoints() {

[Copilot]

Pull Request Overview

This PR implements a major overhaul of the platform with a focus on modernizing the UI/UX, enhancing dashboard features and authentication flows, and optimizing the overall codebase. Key changes include refactored components (e.g. notifications, maintenance and header components), updated API endpoints and integration of real-time notifications via WebSocket, and an upgrade of dependencies along with improved styling and layout adjustments.

Reviewed Changes

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

File	Description
src/components/pages/dashboard/*	New pages and components added for service restrictions, notifications, UI loaders, and dashboards.
src/components/navbar/* and footer/*	Updated navigation with premium options and footer improvements.
src/components/hooks/WebsocketProvider.js	Introduced real-time notifications through WebSocket with reconnection logic.
package.json	Upgraded to version 3.0.0 with dependency updates and use of turbopack in dev.