Skip to main content

[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

Request Information

REQ-001234

👩

Rachel - Female, American

Welcome to MicDots! Scan the QR code to hear your personalized message.

Character count: 187 / 1000

Jan 22, 2024 14:30

Jan 22, 2024 14:30

Upload Audio File

After requesting the audio from ElevenLabs, upload the MP3 file here.

📁

Drop MP3 file here or click to browse

Maximum file size: 10MB

What happens after upload:

  1. Audio stored on S3
  2. QR code automatically generated
  3. Status updated to "done"
  4. Email sent to user with audio link and QR code

Update Status

This will send a "Processing" email to the user

Quick Actions

Processing Notes

Steps to process this request:

  1. Click "Mark as Processing" above
  2. Copy text to ElevenLabs
  3. Select voice: Rachel
  4. Generate and download MP3
  5. Upload MP3 file above
  6. System handles the rest automatically

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.

Text Field is Read-Only

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:

  1. Request pre-signed URL: POST /api/v1/text-to-speech/upload-url
  2. Upload file directly to S3 using pre-signed URL
  3. Update submission with audioUrl using this endpoint

Response: Returns updated submission with new status and timestamps.


Accessibility

Form Labels

  • Every input has associated <label> with for attribute
  • Labels are visible (not hidden)
  • Helper text uses aria-describedby if 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