[Backoffice] Request Details and management
Overview
The admin request details page shows complete information about a single text-to-audio request. Admins can update the status and upload audio files here.
Access: Admin login required
Purpose: Process individual requests manually
Key Actions:
- View complete request details
- Update request status (pending → processing → done)
- Upload audio file (MP3)
- System auto-sends email notifications
Live Preview
Request REQ-001234
Created 2 hours ago by john@example.com
⏳ Status: Pending
API Endpoints
This page uses the following API endpoints:
Get Submission by ID
Endpoint: GET /api/v1/text-to-speech/{id}
Authentication: Required (Bearer token)
Role Required: admin role for viewing any submission
Description: Retrieves detailed information for a specific submission. Admins can access any submission. Clients can only access their own submissions.
Update Submission (Admin)
Endpoint: PUT /api/v1/text-to-speech/{id}
Authentication: Required (Bearer token)
Role Required: admin role for updating any submission
Description: Updates submission fields (voiceId, audioUrl, status). Admins can update any submission. For audio file uploads, use S3 Pre-Signed URLs to upload directly to S3, then update the submission with the audioUrl.
The text field cannot be modified after submission. Once created, text content is read-only to ensure data integrity.
Request Body Fields (all optional):
- voiceId: string. Updated voice model ID
- audioUrl: string. S3 URL of uploaded audio file
- status: string. Updated status:
pending,processing,completed,failed
Audio Upload Process:
- Request pre-signed URL:
POST /api/v1/text-to-speech/upload-url - Upload file directly to S3 using pre-signed URL
- Update submission with
audioUrlusing this endpoint
Response: Returns updated submission with new status and timestamps.
Accessibility
Form Labels
- Every input has associated
<label>withforattribute - Labels are visible (not hidden)
- Helper text uses
aria-describedbyif needed
Keyboard Navigation
- All interactive elements are keyboard accessible
- Tab order follows logical flow
- Focus styles are visible
Screen Readers
- Semantic HTML5 elements (
<form>,<fieldset>,<legend>) - ARIA labels where needed
- Status messages announced with
role="status"
Success Criteria
- ✅ Form structure follows semantic HTML5
- ✅ All inputs have proper labels
- ✅ Read-only fields are clearly indicated
- ✅ File upload has clear instructions
- ✅ Buttons have descriptive text
- ✅ Validation messages are clear
- ✅ Success/error feedback is immediate
- ✅ Keyboard navigation works
- ✅ Responsive on all screen sizes
Related Documentation
- Admin Backoffice - Dashboard
- User Flow - Complete workflow
- Request Management API - Backend API
- Email Notifications - Email system