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.
2026-05-10 12:07:35 +03:00
parent b2e7fd84c9
commit aedeafc84e
7 changed files with 259 additions and 0 deletions
@@ -383,6 +383,7 @@ export const useWithdrawDraft = () => {
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['review-queue'] })
      qc.invalidateQueries({ queryKey: ['draft'] })
+      qc.invalidateQueries({ queryKey: ['drafts'] }) // /me + by-dict
    },
  })
 }
@@ -430,6 +430,26 @@ export const useDictPendingDrafts = (dictName: string | undefined) =>
    enabled: Boolean(dictName),
  })

+/**
+ * Maker self-tracking — "что я отправил". Все статусы (PENDING/APPROVED/
+ * REJECTED/WITHDRAWN), sorted submitted_at DESC. Refetch на 30s — maker
+ * увидит когда reviewer approve/reject.
+ */
+export const myDraftsQuery = (page = 0, size = 50) =>
+  queryOptions({
+    queryKey: ['drafts', 'me', page, size] as const,
+    queryFn: async (): Promise<ReviewQueuePage> => {
+      const { data } = await apiClient.get<ReviewQueuePage>('/drafts/me', {
+        params: { page, size },
+      })
+      return data
+    },
+    refetchInterval: 30_000,
+  })
+
+export const useMyDrafts = (page = 0, size = 50) =>
+  useQuery(myDraftsQuery(page, size))
+
 /** Single draft by id — for diff viewer drawer. */
 export const draftQuery = (id: string) =>
  queryOptions({
@@ -19,6 +19,24 @@ i18n
          'nav.webhooks': 'Webhooks',
          'nav.search': 'Поиск',
          'nav.reviews': 'Согласования',
+          'nav.myDrafts': 'Мои черновики',
+          'myDrafts.title': 'Мои черновики',
+          'myDrafts.description': 'Все ваши submissions с историей: pending, approved, rejected, withdrawn.',
+          'myDrafts.empty': 'Вы пока не отправляли черновиков.',
+          'myDrafts.total_one': '{{count}} черновик',
+          'myDrafts.total_few': '{{count}} черновика',
+          'myDrafts.total_many': '{{count}} черновиков',
+          'myDrafts.total_other': '{{count}} черновиков',
+          'myDrafts.col.bk': 'Бизнес-ключ',
+          'myDrafts.col.op': 'Операция',
+          'myDrafts.col.status': 'Статус',
+          'myDrafts.col.submitted': 'Отправлено',
+          'myDrafts.col.reviewed': 'Решено',
+          'myDrafts.col.reviewer': 'Reviewer',
+          'myDrafts.col.comment': 'Комментарий',
+          'myDrafts.col.actions': 'Действия',
+          'myDrafts.action.withdraw': 'Отозвать',
+          'myDrafts.confirmWithdraw': 'Отозвать draft? Это безвозвратно — статус станет WITHDRAWN.',
          'reviews.title': 'Очередь согласований',
          'reviews.description': 'Pending drafts от makers, ждут approve/reject. Pool model: первый approver обрабатывает.',
          'reviews.empty': 'Нет pending согласований. Все обработаны 👍',
@@ -425,6 +443,22 @@ i18n
          'nav.webhooks': 'Webhooks',
          'nav.search': 'Search',
          'nav.reviews': 'Reviews',
+          'nav.myDrafts': 'My drafts',
+          'myDrafts.title': 'My drafts',
+          'myDrafts.description': 'All your submissions with history: pending, approved, rejected, withdrawn.',
+          'myDrafts.empty': "You haven't submitted any drafts yet.",
+          'myDrafts.total_one': '{{count}} draft',
+          'myDrafts.total_other': '{{count}} drafts',
+          'myDrafts.col.bk': 'Business key',
+          'myDrafts.col.op': 'Operation',
+          'myDrafts.col.status': 'Status',
+          'myDrafts.col.submitted': 'Submitted',
+          'myDrafts.col.reviewed': 'Reviewed',
+          'myDrafts.col.reviewer': 'Reviewer',
+          'myDrafts.col.comment': 'Comment',
+          'myDrafts.col.actions': 'Actions',
+          'myDrafts.action.withdraw': 'Withdraw',
+          'myDrafts.confirmWithdraw': 'Withdraw draft? This is irreversible — status becomes WITHDRAWN.',
          'reviews.title': 'Review queue',
          'reviews.description': 'Pending drafts from makers awaiting approve/reject. Pool model: first approver handles.',
          'reviews.empty': 'No pending reviews. All clear 👍',
@@ -13,6 +13,7 @@ import { Route as WebhooksRouteImport } from './routes/webhooks'
 import { Route as SearchRouteImport } from './routes/search'
 import { Route as ReviewsRouteImport } from './routes/reviews'
 import { Route as OutboxRouteImport } from './routes/outbox'
+import { Route as MyDraftsRouteImport } from './routes/my-drafts'
 import { Route as DictionariesRouteImport } from './routes/dictionaries'
 import { Route as AuditRouteImport } from './routes/audit'
 import { Route as IndexRouteImport } from './routes/index'
@@ -41,6 +42,11 @@ const OutboxRoute = OutboxRouteImport.update({
  path: '/outbox',
  getParentRoute: () => rootRouteImport,
 } as any)
+const MyDraftsRoute = MyDraftsRouteImport.update({
+  id: '/my-drafts',
+  path: '/my-drafts',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const DictionariesRoute = DictionariesRouteImport.update({
  id: '/dictionaries',
  path: '/dictionaries',
@@ -81,6 +87,7 @@ export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
  '/audit': typeof AuditRoute
  '/dictionaries': typeof DictionariesRouteWithChildren
+  '/my-drafts': typeof MyDraftsRoute
  '/outbox': typeof OutboxRoute
  '/reviews': typeof ReviewsRoute
  '/search': typeof SearchRoute
@@ -93,6 +100,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
  '/audit': typeof AuditRoute
+  '/my-drafts': typeof MyDraftsRoute
  '/outbox': typeof OutboxRoute
  '/reviews': typeof ReviewsRoute
  '/search': typeof SearchRoute
@@ -106,6 +114,7 @@ export interface FileRoutesById {
  '/': typeof IndexRoute
  '/audit': typeof AuditRoute
  '/dictionaries': typeof DictionariesRouteWithChildren
+  '/my-drafts': typeof MyDraftsRoute
  '/outbox': typeof OutboxRoute
  '/reviews': typeof ReviewsRoute
  '/search': typeof SearchRoute
@@ -121,6 +130,7 @@ export interface FileRouteTypes {
    | '/'
    | '/audit'
    | '/dictionaries'
+    | '/my-drafts'
    | '/outbox'
    | '/reviews'
    | '/search'
@@ -133,6 +143,7 @@ export interface FileRouteTypes {
  to:
    | '/'
    | '/audit'
+    | '/my-drafts'
    | '/outbox'
    | '/reviews'
    | '/search'
@@ -145,6 +156,7 @@ export interface FileRouteTypes {
    | '/'
    | '/audit'
    | '/dictionaries'
+    | '/my-drafts'
    | '/outbox'
    | '/reviews'
    | '/search'
@@ -159,6 +171,7 @@ export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  AuditRoute: typeof AuditRoute
  DictionariesRoute: typeof DictionariesRouteWithChildren
+  MyDraftsRoute: typeof MyDraftsRoute
  OutboxRoute: typeof OutboxRoute
  ReviewsRoute: typeof ReviewsRoute
  SearchRoute: typeof SearchRoute
@@ -195,6 +208,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof OutboxRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/my-drafts': {
+      id: '/my-drafts'
+      path: '/my-drafts'
+      fullPath: '/my-drafts'
+      preLoaderRoute: typeof MyDraftsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/dictionaries': {
      id: '/dictionaries'
      path: '/dictionaries'
@@ -279,6 +299,7 @@ const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  AuditRoute: AuditRoute,
  DictionariesRoute: DictionariesRouteWithChildren,
+  MyDraftsRoute: MyDraftsRoute,
  OutboxRoute: OutboxRoute,
  ReviewsRoute: ReviewsRoute,
  SearchRoute: SearchRoute,
@@ -65,6 +65,13 @@ function RootLayout() {
            >
              {t('nav.reviews')}
            </Link>
+            <Link
+              to="/my-drafts"
+              className="text-carbon hover:text-ultramarain"
+              activeProps={{ className: 'text-ultramarain font-medium' }}
+            >
+              {t('nav.myDrafts')}
+            </Link>
          </nav>
          <div className="ml-auto flex items-center gap-3">
            <LanguageSwitch
@@ -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>
+  )
+}