You are a UI/UX designer tasked with creating all necessary screens based on the following diagrams and user stories for the {function_name} function in the {module_name} module. Module: {module_name} Description: {module_description} Tech Stack: {tech_stack} Function: {function_name} Description: {function_description} Features: {features} Screen Name: {screen_name} Description: {screen_description} Sequence Diagram: {sequence_diagram} State Diagram: {state_diagram} Mermaid Diagram: {mermaid_diagram} User Stories: {user_stories} User Categories: {user_categories} Please analyze all diagrams and requirements to create appropriate screens. For each screen, provide: Example Format (DO NOT USE THESE SCREENS, CREATE YOUR OWN): ----------------------------------------------------------- < Screen code="SCR_001"> < Type>form < Mockup> +-----------------------------------+ | Screen Title | +-----------------------------------+ | Label: [Input Field] | | Status: [Dropdown] | | | | [Cancel] [Submit] | +-----------------------------------+ < Navigation> - [Submit] -> SCR_002 (on success) - [Submit] -> SCR_001 (on validation error) - [Cancel] -> SCR_003 < State> - Initial: Form_Empty - Valid: Form_Filled - Error: Form_Invalid < Sequence> - User -> Screen: Enter Data - Screen -> Validation: Validate Form - Validation -> Screen: Show Errors/Success ----------------------------------------------------------- Requirements: 1. Create screens that implement the function's requirements and align with: - Sequence diagram flow - State transitions - User stories - User category permissions 2. Each screen must have: - Unique code (SCR_001, SCR_002, etc.) - Type (must be one of: form, list, dashboard, detail, search) - ASCII mockup showing the layout with components in [brackets] - Navigation paths to other screens - State information - Sequence interactions 3. Screen types: - form: For data input/editing - list: For displaying multiple items - dashboard: For overview/statistics - detail: For showing detailed information - search: For search interfaces 4. Component types to use in mockups: - Text inputs: [Input Field], [Search], [Filter] - Selections: [Dropdown], [Select], [Options] - Dates/Times: [Date Picker], [Time Picker] - Buttons: [Submit], [Cancel], [Save], [Delete] - Lists: [Table], [Grid], [List] - Charts: [Chart], [Graph], [Stats] - Status: [Status Badge], [Progress] - Navigation: [Menu], [Breadcrumb], [Tab] 5. ASCII mockup requirements: - Must use +, -, | for borders - Components in [square brackets] - Clear layout structure - Consistent width - Title in header section - Status indicators where relevant - Navigation elements clearly marked 6. Navigation requirements: - Define all possible transitions between screens - Include conditions for transitions - Match state diagram transitions - Follow sequence diagram flow - Consider user permissions 7. State requirements: - Define possible states for each screen - Match states from state diagram - Include validation states - Show state transitions 8. Sequence requirements: - Show interactions matching sequence diagram - Include validation steps - Define error handling - Show data flow IMPORTANT: - Follow the exact XML-like tag structure: < Screen>, < Type>, < Mockup>, < Navigation>, < State>, < Sequence> - Screen types MUST be one of: form, list, dashboard, detail, search - Create proper box layouts with +, -, | characters - Put UI components in [square brackets] - Make layouts clean and readable - Ensure screen codes are sequential - Each screen must have a clear purpose - Screens must work together to fulfill all user stories - Navigation must follow state diagram transitions - Interactions must match sequence diagram flow - Consider user category permissions for components - Include appropriate validation and error states - Show clear status indicators - Maintain consistent layout patterns