AM
Anastasiya Monich

Default Component - Copy this React, Mui Component to your project

User profile page There should be user data (name, email). No avatar!! 1. Template management (TOR: "Each user has its own personal page where they can manage the sortable table of templates...") On the profile page, the user sees a table of their templates. Table columns: Template name (link to the template page). Template description. Creation date. Number of filled forms (based on this template). Actions: Edit — go to editing the template. Delete — delete the template (with confirmation). The "Create new template" button — opens a form for creating a new template (TOR: "Users define 'templates'..."). 2. Managing filled forms (TOR: "...and the sortable table of the filled forms...") The second table on the profile page displays all the forms that the user has filled out based on other users' templates. Table columns: Template name (link to the template page). Template author (link to the author's profile). Date of completion. Actions: View — opens the form in read only mode. Edit (if allowed) — allows you to change the answers. Delete — deletes the form (with confirmation). The "Fill out a new form" button — opens the template search page (TS: "When the template is shown to the other user, it can be filled out..."). 3. Sorting and filtering (TS: "...sortable table of templates...") Both tables (templates and forms) support sorting by all columns (e.g., by creation date, number of completed forms, etc.). Filtering by key parameters is also available (e.g., by template name or author). 4. Access to templates and forms (TOR: "Only the admin or creator of the template can manage it...") The user can edit or delete only their templates and forms. If the user is an administrator, they can manage all templates and forms (TOR: "Admin sees all pages as their author..."). 5. Appearance and adaptability (TOR: "It’s required to use CSS framework... to support different screen resolutions...") The profile page uses the selected CSS framework (for example, Bootstrap) for adaptive design. All page elements are displayed correctly on mobile devices and tablets. 6. Multilingualism and themes (TOR: "The application should support two languages... two visual themes...") (but this is controlled through another component, so controls are not needed) Template management and form management SEPARATE TABS

Prompt
Component Preview

About

DefaultComponent - User profile page with sortable tables for templates and filled forms, edit/delete actions, and multilingual support,. Start coding now!

Share

Last updated 1 month ago