Refine manager bonus and order detail views

app/pages/bonus-system/withdrawals/[id].vue

@@ -21,14 +21,22 @@ const withdrawalsQuery = useQuery(ManagerWithdrawalRequestsDocument, {
 });
 const reviewMutation = useMutation(ReviewRewardWithdrawalDocument);
 
-const decision = ref<'APPROVE' | 'REJECT'>('APPROVE');
-const reviewComment = ref('');
 const reviewResult = ref('');
+const isProcessed = ref(true);
+const savePending = computed(() => reviewMutation.loading.value);
 
 const currentWithdrawal = computed(() =>
   (withdrawalsQuery.result.value?.managerWithdrawalRequests ?? []).find((item: WithdrawalItem) => item.id === withdrawalId.value),
 );
 
+watch(currentWithdrawal, (withdrawal) => {
+  if (!withdrawal) {
+    return;
+  }
+
+  isProcessed.value = withdrawal.status !== 'REJECTED';
+}, { immediate: true });
+
 async function reviewWithdrawal() {
   if (!currentWithdrawal.value) {
     return;
@@ -37,8 +45,7 @@ async function reviewWithdrawal() {
   const response = await reviewMutation.mutate({
     input: {
       withdrawalId: currentWithdrawal.value.id,
-      decision: decision.value,
-      reviewComment: reviewComment.value || undefined,
+      decision: isProcessed.value ? 'APPROVE' : 'REJECT',
     },
   });
 
@@ -48,7 +55,7 @@ async function reviewWithdrawal() {
 </script>
 
 <template>
-  <section class="space-y-6 max-w-3xl">
+  <section class="space-y-6">
     <div v-if="withdrawalsQuery.loading.value" class="manager-empty-state">
       Загружаем заявку на вывод...
     </div>
@@ -65,22 +72,35 @@ async function reviewWithdrawal() {
         :subtitle="`${currentWithdrawal.requesterFullName} · ${currentWithdrawal.requesterEmail} · Сумма: ${currentWithdrawal.amount}`"
       />
 
-      <div class="surface-card rounded-3xl p-5 space-y-3">
-        <label class="form-control">
-          <span class="label-text">Решение</span>
-          <select v-model="decision" class="select manager-field w-full">
-            <option value="APPROVE">Одобрить</option>
-            <option value="REJECT">Отклонить</option>
-          </select>
-        </label>
+      <div class="surface-card rounded-3xl p-5 md:p-6">
+        <div class="space-y-5">
+          <label class="flex items-start gap-4 rounded-[24px] bg-[#f5faf7] px-4 py-4">
+            <input
+              v-model="isProcessed"
+              type="checkbox"
+              class="checkbox mt-1 border-[#b9d7c5] bg-white [--chkbg:#123824] [--chkfg:#ffffff]"
+            >
+            <span class="space-y-1">
+              <span class="block text-base font-bold text-[#123824]">Проведено</span>
+              <span class="block text-sm leading-6 text-[#5c7b69]">
+                Отметьте выплату как проведённую. Если галочка снята, заявка будет отклонена.
+              </span>
+            </span>
+          </label>
 
-        <label class="form-control">
-          <span class="label-text">Комментарий</span>
-          <textarea v-model="reviewComment" class="textarea manager-field min-h-28 w-full" placeholder="Комментарий для заявки" />
-        </label>
-
-        <div>
-          <button class="btn btn-primary border-0" @click="reviewWithdrawal">Сохранить решение</button>
+          <button
+            class="btn h-12 w-full rounded-full border-0 bg-[#123824] text-white shadow-[0_16px_32px_rgba(18,56,36,0.18)] hover:bg-[#0f2f20] disabled:border-0 disabled:bg-[#cfd8d2] disabled:text-[#6f8579]"
+            :disabled="savePending"
+            @click="reviewWithdrawal"
+          >
+            {{
+              savePending
+                ? 'Сохраняем...'
+                : isProcessed
+                  ? 'Провести выплату'
+                  : 'Отклонить заявку'
+            }}
+          </button>
         </div>
       </div>