distribution_fe/app/(dashboard)/operations/rides/_components/ride-view-sheet.tsx

@@ -55,6 +55,12 @@ export function RideViewSheet({ open, onClose, ride }: RideViewSheetProps) {
           <Row label="Meter End" value={ride.meterend ? `${ride.meterend} km` : '—'} />
           <Row label="Started At" value={fmtDateTime(ride.startedAt)} />
           <Row label="Closed At" value={fmtDateTime(ride.closedAt)} />
+          {ride.status === 'Cancelled' && (
+            <>
+              <Row label="Cancel Type" value={ride.cancelTypeCode || '—'} />
+              <Row label="Cancel Reason" value={ride.cancelReason || '—'} />
+            </>
+          )}
           <Row label="Created At" value={fmtDateTime(ride.createdAt)} />
         </div>
       </DialogContent>

distribution_fe/app/(dashboard)/operations/rides/_components/rides-client.tsx

@@ -145,6 +145,7 @@ export function RidesClient() {
         {
           action: 'cancel',
           label: 'Cancel ride',
+          tone: 'destructive',
           onClick: handleCancel,
           visible: (target) => target.status === 'Open',
         },

distribution_fe/types/api.ts

@@ -561,6 +561,8 @@ export interface RideResponse {
   meterend: number
   startedAt: string | null
   closedAt: string | null
+  cancelTypeCode: CancelRequestType | null
+  cancelReason: string | null
   createdAt: string
 }