spec-writing-ui

name	spec-writing-ui
description	Specifies user interface designs, React components, and interaction flows following component-based architecture. Use when designing UI specifications, defining component props and state, or documenting user interaction flows for GloboTicket features.

User Interface Specification

## User Interface Design

### Page Structure & Navigation

**New Pages**:
1. `/resources` - Resource listing page
2. `/resources/create` - Resource creation page
3. `/resources/:id` - Resource detail page
4. `/resources/:id/edit` - Resource edit page

**Navigation Updates**:
- Add "Resources" link to main navigation menu
- Update breadcrumb component to include resource paths

### Component Breakdown

#### ResourceListPage

**Purpose**: Display paginated, filterable list of resources

**Props**: None (uses URL query params)

**State Management**: Use Tanstack Query to fetch resources based on filters using endpoint `GET /api/resources` with query key ['resources', filters]

**Child Components**:
- `ResourceCard`: Display individual resource summary
- `ResourceFilters`: Filter controls
- `Pagination`: Page navigation

**User Interactions**:
- Click card → Navigate to detail page
- Apply filters → Update URL params, refetch
- Change page → Update URL, refetch

#### ResourceForm

**Purpose**: Reusable form for create/edit operations

**Props**:
- initialValues: ResourceFormData | undefined
- onSubmit: (data: ResourceFormData) => Promise<void>
- isLoading: boolean

**Validation Rules**:
Define validation once here, then reference in API section:
- Name: Required, max 100 characters
- Description: Optional, max 500 characters
- [List all validation rules with exact constraints matching OpenAPI spec]

**Form Fields**:
1. Name (text input, required, maxLength: 100)
2. Description (textarea, optional, maxLength: 500)
3. [List all fields with types - validation rules already defined above]

**API Integration**:
- Create mode: `POST /api/resources` (see [OpenAPI spec](#openapi-specification))
- Edit mode: `PUT /api/resources/:id`
- Uses validation rules defined above

### Interaction Flows

#### Create Resource Flow
1. User clicks "Create Resource" button
2. Navigate to /resources/create
3. User fills form (fields and validation defined in ResourceForm component)
4. On submit:
   a. Validate form data (using validation rules from component spec)
   b. POST /api/resources
   c. On success: Navigate to detail page
   d. On error: Display inline validation errors

### Accessibility Requirements
- All form inputs have associated labels
- Error messages announced to screen readers
- Keyboard navigation supported throughout
- Focus management on modal open/close
- ARIA labels on icon-only buttons

### Responsive Behavior
- Desktop (>1024px): 3-column grid
- Tablet (768-1024px): 2-column grid
- Mobile (<768px): Single column, stacked layout

UI Design Principles

• Component-based architecture (atomic design)
• Use Tanstack Query for server state
• Implement optimistic updates where appropriate
• Show loading states during async operations
• Display meaningful error messages
• Support keyboard navigation
• Follow existing UI patterns in codebase
• Mobile-first responsive design
• Ensure accessibility compliance (WCAG 2.1 AA)