The Repair Detail Page

Page Header & Actions

The top of the repair detail page shows the essential identification information and action buttons.

• Repair Code — the unique identifier (e.g., SHOP-B001-R0042) displayed prominently with a status badge beside it.
• Status Badge — color-coded badge showing the current status with a dot indicator.
• Item Name and Creation Date — shown together on a secondary line below the code (e.g., 'iPhone 15 Pro · Created Apr 10, 2026').
• Action Buttons — Print, Waiting for Parts (or Resume Repair), Next Status (or Deliver), and Delete.

Repair Progress Timeline

A visual horizontal timeline shows the repair's journey through the six main statuses. This gives you an instant understanding of where the repair stands.

• Completed steps show a checkmark icon inside a circle.
• The current step is highlighted with a ring accent.
• Future steps display their sequence number (1-6).
• If the repair is in Waiting for Parts, an amber alert banner appears below the timeline explaining the pause.

Problem Description & Internal Notes

The problem description section shows the full text describing the customer's issue. If internal notes were added, they appear below in a separate section.

• Problem description preserves formatting exactly as entered.
• Internal Notes are displayed with a muted style and labeled 'Internal Notes' in uppercase tracking.
• Internal notes are visible to your team only — they are hidden on printed receipts.

Photos & Lightbox

Photos uploaded during repair creation are displayed in a grid. Clicking any photo opens a full-screen lightbox viewer.

1. 1Photos are shown in a grid layout — 3 columns on mobile, 4 columns on larger screens.
2. 2Click any photo to open the lightbox.
3. 3Use the left/right arrows or keyboard to navigate between photos.
4. 4A counter shows your position (e.g., '2 / 5').
5. 5Click the X button or click outside the photo to close the lightbox.

Customer Information Card

The right sidebar shows the customer's contact details and quick action buttons. This card is hidden for Technician role users.

• Customer avatar with initials and full name — clicking the name links to the customer's profile page.
• Total repairs count showing how many jobs this customer has had.
• Phone number with a click-to-call button.
• Email address (if available).
• WhatsApp button — opens a WhatsApp conversation with the customer.
• Call button — initiates a phone call.

Customer Tracking Card

Below the customer card, the Customer Tracking section provides a shareable link that lets the customer track their repair status online. Like the customer card, this section is hidden for Technician role users.

1. 1The tracking URL is displayed in a read-only field (e.g., /track/abc123...).
2. 2Click the copy button to copy the link to your clipboard.
3. 3Share the link with the customer via WhatsApp, SMS, email, or print it on their receipt.
4. 4The customer can open this link anytime — no login required — to see their repair's current status.

Technician Assignment

The Assigned To card shows which technician is working on the repair and allows reassignment.

1. 1The current technician is shown with their avatar, name, and role.
2. 2To reassign, use the dropdown below. Options include 'Unassigned' and all team members with their role in parentheses.
3. 3Only Admins and Managers can reassign technicians. The dropdown is hidden for Technicians and Cashiers.
4. 4Reassignment is not available on Delivered or Cancelled repairs.

Deleting a Repair

Repairs can be permanently deleted from the detail page. This action is irreversible.

1. 1Click the delete button (trash icon) in the header action buttons.
2. 2A confirmation dialog appears with the title 'Delete Repair' and the message: 'This will permanently delete this repair and all associated data. This action cannot be undone.'
3. 3Click 'Delete' to confirm or 'Cancel' to go back.
4. 4On deletion, you are redirected to the repairs list.