ывав

client/src/features/order-detail/ui/OrderDetailContent.tsx

@@ -1,17 +1,13 @@
 import { useMemo, useState } from 'react'
-import { Link as RouterLink } from 'react-router-dom'
 import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
-import FormControl from '@mui/material/FormControl'
-import InputLabel from '@mui/material/InputLabel'
 import Link from '@mui/material/Link'
-import MenuItem from '@mui/material/MenuItem'
-import Select from '@mui/material/Select'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useUnit } from 'effector-react'
+import { Link as RouterLink } from 'react-router-dom'
 import { postAdminOrderMessage, setAdminOrderStatus } from '@/entities/order/api/admin-order-api'
 import type { AdminOrderDetailResponse } from '@/entities/order/api/admin-order-api'
 import { deliveryCarrierLabelRu } from '@/shared/constants/delivery-carrier'
@@ -165,31 +161,34 @@ export function OrderDetailContent({ detail, orderId }: { detail: AdminOrderDeta
         <DeliveryFeeAdjustmentForm key={detail.id} orderId={detail.id} deliveryFeeCents={detail.deliveryFeeCents} />
       )}
 
-      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ alignItems: { sm: 'center' } }}>
-        <FormControl size="small" sx={{ minWidth: 240 }}>
-          <InputLabel id="next-status-label">Сменить статус</InputLabel>
-          <Select
-            labelId="next-status-label"
-            label="Сменить статус"
-            value=""
-            onChange={(e) => {
-              const next = String(e.target.value)
-              if (!next) return
-              statusMut.mutate(next)
-            }}
-            disabled={statusMut.isPending || nextStatuses.length === 0}
-          >
-            <MenuItem value="">
-              <em>Выберите…</em>
-            </MenuItem>
-            {nextStatuses.map((s) => (
-              <MenuItem key={s} value={s}>
-                {ORDER_STATUS_MAP[s] ?? s}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </Stack>
+      <Box>
+        <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 700 }}>
+          Быстрый переход статуса
+        </Typography>
+        {statusMut.isError && <Alert severity="error">Не удалось сменить статус</Alert>}
+        {nextStatuses.length === 0 ? (
+          <Typography variant="body2" color="text.secondary">
+            Статус финальный, смена недоступна
+          </Typography>
+        ) : (
+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.25}>
+            {nextStatuses.map((nextStatus) => {
+              const isCancelled = nextStatus === 'CANCELLED'
+              return (
+                <Button
+                  key={nextStatus}
+                  variant={isCancelled ? 'outlined' : 'contained'}
+                  color={isCancelled ? 'error' : 'primary'}
+                  disabled={statusMut.isPending}
+                  onClick={() => statusMut.mutate(nextStatus)}
+                >
+                  {ORDER_STATUS_MAP[nextStatus] ?? nextStatus}
+                </Button>
+              )
+            })}
+          </Stack>
+        )}
+      </Box>
 
       <Box>
         <Typography variant="subtitle2" sx={{ mb: 1 }}>