feat(approval): /my-drafts maker self-tracking view + /api/v1/drafts/me

Approval Workflow v2 Phase 4 — UX:

Backend:
- DraftController.myDrafts: GET /api/v1/drafts/me?page&size — все статусы
  (PENDING/APPROVED/REJECTED/WITHDRAWN) текущего authenticated user, sorted
  submitted_at DESC. Resolve maker_id из JWT subject (fallback "anonymous"
  если auth off).
- Reuses existing DraftService.listByMaker (Phase 1 method, был не exposed).

Frontend:
- routes/my-drafts.tsx: новый маршрут с табличным view.
  Колонки: businessKey / operation / status / submittedAt / reviewedAt /
  reviewerId / comment / actions. Status badge tinted (warning/success/
  error/neutral). PENDING строки имеют Withdraw кнопку (calls existing
  useWithdrawDraft с confirm).
- api/queries.ts: useMyDrafts (refetch 30s — maker увидит когда reviewer
  decide).
- api/mutations.ts: useWithdrawDraft теперь invalidate'ит ['drafts'] —
  /me + by-dict обе видят изменение.
- routes/__root.tsx: nav link "Мои черновики" / "My drafts" (после Reviews).
- i18n RU/EN: 18 keys (nav.myDrafts, myDrafts.* col/action/status).
  Pluralization для total через i18next plurals.

Why это нужно:
- До этого maker submit'нул draft и пропадал — единственный feedback был
  badge "На review" в records list (только для текущего dict). Здесь — все
  его submissions с history + withdraw для PENDING.
- Reviewer pool (D3=A) маленький, /reviews queue только для них. Maker
  без role'а не видит queue, но должен tracking своих submissions.

Tests: ordinis-rest-api unit 119/119, ordinis-app e2e 28/28, vitest 89/89.
This commit is contained in:
Zimin A.N.
2026-05-10 12:07:35 +03:00
parent b2e7fd84c9
commit aedeafc84e
7 changed files with 259 additions and 0 deletions
+148
View File
@@ -0,0 +1,148 @@
import { useState } from 'react'
import { createFileRoute } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import {
Alert,
Badge,
Button,
EmptyState,
LoadingBlock,
PageHeader,
Panel,
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableRow,
} from '@nstart/ui'
import { useMyDrafts } from '@/api/queries'
import { useWithdrawDraft } from '@/api/mutations'
import type { DraftOperation, DraftStatus } from '@/api/client'
export const Route = createFileRoute('/my-drafts')({
component: MyDraftsPage,
})
const operationVariant = (op: DraftOperation): 'info' | 'success' | 'warning' => {
if (op === 'CREATE') return 'success'
if (op === 'CLOSE') return 'warning'
return 'info'
}
const statusVariant = (
s: DraftStatus,
): 'warning' | 'success' | 'error' | 'neutral' => {
if (s === 'PENDING') return 'warning'
if (s === 'APPROVED') return 'success'
if (s === 'REJECTED') return 'error'
return 'neutral'
}
/**
* Approval Workflow v2 Phase 4: maker self-tracking. Maker видит свои
* submissions всех статусов (PENDING/APPROVED/REJECTED/WITHDRAWN), sorted
* submitted_at DESC. Polled каждые 30s — maker увидит когда reviewer
* approve/reject. Withdraw кнопка для PENDING (только свои + maker-only
* gate в backend).
*/
function MyDraftsPage() {
const { t } = useTranslation()
const drafts = useMyDrafts(0, 50)
const withdrawMut = useWithdrawDraft()
const [busyId, setBusyId] = useState<string | undefined>(undefined)
const handleWithdraw = (id: string) => {
if (!confirm(t('myDrafts.confirmWithdraw'))) return
setBusyId(id)
withdrawMut.mutate(id, {
onSettled: () => setBusyId(undefined),
})
}
return (
<div className="space-y-4">
<PageHeader
title={t('myDrafts.title')}
description={t('myDrafts.description')}
/>
{drafts.isLoading && <LoadingBlock size="md" label={t('loading')} />}
{drafts.error && (
<Alert variant="error" title={t('error.failed')}>
{String(drafts.error)}
</Alert>
)}
{drafts.data && drafts.data.totalElements === 0 && (
<EmptyState title={t('myDrafts.empty')} />
)}
{drafts.data && drafts.data.totalElements > 0 && (
<Panel>
<div className="flex items-center justify-between mb-3">
<p className="text-2xs text-carbon/60">
{t('myDrafts.total', { count: drafts.data.totalElements })}
</p>
</div>
<Table>
<TableHead>
<TableRow>
<TableHeaderCell>{t('myDrafts.col.bk')}</TableHeaderCell>
<TableHeaderCell>{t('myDrafts.col.op')}</TableHeaderCell>
<TableHeaderCell>{t('myDrafts.col.status')}</TableHeaderCell>
<TableHeaderCell>{t('myDrafts.col.submitted')}</TableHeaderCell>
<TableHeaderCell>{t('myDrafts.col.reviewed')}</TableHeaderCell>
<TableHeaderCell>{t('myDrafts.col.reviewer')}</TableHeaderCell>
<TableHeaderCell>{t('myDrafts.col.comment')}</TableHeaderCell>
<TableHeaderCell>{t('myDrafts.col.actions')}</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
{drafts.data.items.map((d) => (
<TableRow key={d.id}>
<TableCell className="font-mono text-2xs">{d.businessKey}</TableCell>
<TableCell>
<Badge variant={operationVariant(d.operation)}>{d.operation}</Badge>
</TableCell>
<TableCell>
<Badge variant={statusVariant(d.status)}>{d.status}</Badge>
</TableCell>
<TableCell className="text-2xs text-carbon/70">
{new Date(d.submittedAt).toLocaleString()}
</TableCell>
<TableCell className="text-2xs text-carbon/70">
{d.reviewedAt
? new Date(d.reviewedAt).toLocaleString()
: '—'}
</TableCell>
<TableCell className="font-mono text-2xs">
{d.reviewerId ?? '—'}
</TableCell>
<TableCell className="text-2xs text-carbon/80 max-w-md">
{d.reviewComment ?? d.makerComment ?? '—'}
</TableCell>
<TableCell>
{d.status === 'PENDING' ? (
<Button
variant="secondary"
size="sm"
disabled={busyId === d.id}
onClick={() => handleWithdraw(d.id)}
>
{t('myDrafts.action.withdraw')}
</Button>
) : (
<span className="text-2xs text-carbon/40"></span>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Panel>
)}
</div>
)
}