Styled Paper - Copy this React, Mui Component to your project
General-Layout-Header-Section:-Display-user-profile-details,-including-a-profile-icon,-name,-and-status-(e.g.,-"Active").-Show-a-unique-identifier-(e.g.,-VAT-number).-Include-a-rating-system-with-a-score-(e.g.,-"1-/-5")-and-a-star-based-rating.-Contact-Details-Section:-Display-a-list-of-contact-numbers-with-associated-actions-(e.g.,-call,-edit,-delete).-Each-contact-should-have-multiple-interaction-options,-such-as:-Call:-A-button/icon-to-initiate-a-phone-call.-Edit:-A-button/icon-to-edit-the-contact-details.-Delete:-A-button/icon-to-remove-the-contact.-Contact-numbers-should-be-listed-vertically-for-clarity.-Action-Button:-Provide-a-return-button-(e.g.,-"Επιστροφή")-for-navigation-purposes.-Functional-Requirements-User-Profile-Management:-Ability-to-view,-edit,-and-display-user-related-information-like-VAT-and-rating.-Status-indicators-(e.g.,-Active/Inactive)-to-denote-the-user-account's-current-state.-Contact-Management:-List-and-manage-multiple-phone-numbers-for-a-user.-Provide-interactive-options-(call,-edit,-delete)-for-each-contact.-Ratings-System:-Implement-a-visual-rating-system-with-stars-and-numerical-values.-Ratings-should-be-read-only-in-some-scenarios.-Responsive-Design:-Ensure-the-layout-adapts-well-to-different-screen-sizes-and-devices.-Action-Oriented-UI:-Clear-and-intuitive-placement-of-action-buttons-for-each-contact.-Return-button-to-navigate-back-without-confusion.-Design-Specifications-Typography:-Use-bold-text-for-labels-(e.g.,-"Α.Φ.Μ:",-"Βαθμολογία").-Use-standard-font-sizes-for-data-display.-Spacing-and-Alignment:-Align-data-points-and-action-buttons-properly-for-readability.-Separate-sections-with-adequate-spacing-for-clarity.-Iconography:-Use-universally-recognizable-icons-for-actions-(e.g.,-phone-for-calling,-pencil-for-edit,-trash-for-delete).-Theme-and-Colors:-Ensure-a-clean-and-minimal-design,-emphasizing-readability-and-usability.
