Profile Prowess Copy this Tailwind Component 0to Your Project

I’m building an **Edit Profile** page in an Angular application using PrimeNG. This page will allow a logged in user to edit their basic account information. The user data is stored in a `User` entity on the backend with the following fields: `id: Guid` `email: string` (editable) `firstName: string` (editable) `lastName: string` (editable) `role: UserRole` (not editable, just displayed) `photoUrl?: string` (optional, editable as upload) `createdOn`, `modifiedOn`, etc. are part of the audit model (not shown in the form) The user is authenticated via Azure AD, and their `UserId` (OID) is injected into the system and associated with either a `Grower` or a `Station` depending on their role. Each user can only edit their own profile. We already store `UserId` inside both `Grower` and `Station` domain entities for ownership tracking. ### Frontend stack: Angular 16+ PrimeNG (form, input, file upload, buttons, etc.) Signal based state management Forms use `FormBuilder` and `ReactiveFormsModule` ### Expectations: Generate a reactive form bound to `User` fields Show current values populated from `/users/me` Allow updates to first name, last name, email, and photo Validate inputs (e.g. email format, required names) Submit via service and show success/failure feedback Display `role` as read only label Optionally support profile photo upload with preview Please scaffold the Angular component, form group, service method, backend DTOs if needed, and ensure proper signal reactivity and loading state management. The UI should use PrimeNG with a clean layout and responsive design.