Create Profile Edit Page (Admin) with Multiple Features

[IkkiOcean]

Description:

This pull request introduces the ProfileEdit page along with its associated components for a more modular and maintainable codebase. The Profile Edit page is divided into smaller, reusable components, each handling a specific section of the profile settings.

Changes Made:

1. Main ProfileEdit Component:

   • The main component holds the overall layout and state management for the profile edit page.
   • Introduced tab navigation to switch between different profile sections (Personal Info, Password, Notifications, Security, Activity Log, Active Sessions).

2. Tab Navigation Component (TabNav):

   • A reusable navigation component to allow users to switch between tabs (Personal Info, Password, Notifications, etc.).
   • Active tab is dynamically managed via state.

3. PersonalInfo Component:

   • Handles the form for editing personal information (name, email, and profile picture).
   • Includes state management for form input changes and form submission.

4. PasswordForm Component:

   • Handles the form for updating the password.
   • Includes validation to ensure the new password and confirmation match.

5. Notifications Component (Notifications.jsx):

   • Manages the settings for email, SMS, and app notifications, as well as order and inventory-related notifications.
   • Includes toggles for enabling/disabling specific notification types.
   • Allows users to save changes to their notification preferences.

6. SecuritySettings Component:

   • Manages settings for security questions and account lockout preferences.

7. ActivityLog Component:

   • Displays a list of recent activity logs such as login, profile updates, and password changes.

8. ActiveSessions Component:

   • Shows active sessions on different devices, including last active timestamps.

9. Message Component:

   • Displays success or error messages upon form submission. It takes message and type (success or error) as props to determine the message content and style.

Files Added:

• ProfileEdit.js: Main component that houses all the sections and controls the active tab.

• TabNav.js: Tab navigation for switching between sections.

• PersonalInfo.js: Component to handle personal information editing.

• PasswordForm.js: Component to handle password changes.

• Notifications.jsx: Component to manage notification settings.

• SecuritySettings.js: Component for security settings management.

• ActivityLog.js: Component for displaying recent activity logs.

• ActiveSessions.js: Component for displaying active sessions.

• Message.js: Component for displaying success/error messages after form submission.

• closes Create Enhanced Profile Edit Page under Admin Settings #976

video

ff.mp4

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
agro-tech-ai	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 10, 2024 10:49am

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[github-actions]

🎉 Your pull request has been successfully merged! 🎉 Thank you for your valuable contribution to our project. Your efforts are greatly appreciated. Feel free to reach out if you have any more contributions or if there's anything else we can assist you with. Keep up the fantastic work! 🚀