@tuturuuu/ui 0.32.0 → 0.34.0

package/src/components/ui/finance/invoices/invoice-history-filters.tsx

@@ -0,0 +1,121 @@
+'use client';
+import type { InvoiceHistoryEntry } from '@tuturuuu/internal-api/finance';
+import { Input } from '@tuturuuu/ui/input';
+import { Label } from '@tuturuuu/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { useTranslations } from 'next-intl';
+
+export interface InvoiceHistoryFilters {
+  entity: InvoiceHistoryEntry['entity_type'] | 'all';
+  action: InvoiceHistoryEntry['operation'] | 'all';
+  from: string;
+  to: string;
+  sort: 'asc' | 'desc';
+}
+export const DEFAULT_HISTORY_FILTERS: InvoiceHistoryFilters = {
+  entity: 'all',
+  action: 'all',
+  from: '',
+  to: '',
+  sort: 'desc',
+};
+
+export function InvoiceHistoryFilterBar({
+  value,
+  onChange,
+}: {
+  value: InvoiceHistoryFilters;
+  onChange: (filters: InvoiceHistoryFilters) => void;
+}) {
+  const t = useTranslations('ws-invoices');
+  return (
+    <div className="grid grid-cols-2 gap-3 lg:grid-cols-5">
+      <div className="space-y-1">
+        <Label htmlFor="invoice-history-entity">
+          {t('activity_record_type')}
+        </Label>
+        <Select
+          value={value.entity}
+          onValueChange={(entity: InvoiceHistoryFilters['entity']) =>
+            onChange({ ...value, entity })
+          }
+        >
+          <SelectTrigger id="invoice-history-entity">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{t('activity_all_types')}</SelectItem>
+            {(
+              ['invoice', 'product', 'promotion', 'group', 'payment'] as const
+            ).map((entity) => (
+              <SelectItem key={entity} value={entity}>
+                {t(`history_entities.${entity}`)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-1">
+        <Label htmlFor="invoice-history-action">{t('activity_action')}</Label>
+        <Select
+          value={value.action}
+          onValueChange={(action: InvoiceHistoryFilters['action']) =>
+            onChange({ ...value, action })
+          }
+        >
+          <SelectTrigger id="invoice-history-action">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{t('activity_all_actions')}</SelectItem>
+            <SelectItem value="INSERT">{t('activity_created')}</SelectItem>
+            <SelectItem value="UPDATE">{t('activity_updated')}</SelectItem>
+            <SelectItem value="DELETE">{t('activity_deleted')}</SelectItem>
+            <SelectItem value="RESTORE">{t('activity_restored')}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-1">
+        <Label htmlFor="invoice-history-from">{t('activity_from')}</Label>
+        <Input
+          id="invoice-history-from"
+          type="date"
+          value={value.from}
+          max={value.to || undefined}
+          onChange={(event) => onChange({ ...value, from: event.target.value })}
+        />
+      </div>
+      <div className="space-y-1">
+        <Label htmlFor="invoice-history-to">{t('activity_to')}</Label>
+        <Input
+          id="invoice-history-to"
+          type="date"
+          value={value.to}
+          min={value.from || undefined}
+          onChange={(event) => onChange({ ...value, to: event.target.value })}
+        />
+      </div>
+      <div className="col-span-2 space-y-1 lg:col-span-1">
+        <Label htmlFor="invoice-history-sort">{t('activity_sort')}</Label>
+        <Select
+          value={value.sort}
+          onValueChange={(sort: 'asc' | 'desc') => onChange({ ...value, sort })}
+        >
+          <SelectTrigger id="invoice-history-sort">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="desc">{t('activity_newest')}</SelectItem>
+            <SelectItem value="asc">{t('activity_oldest')}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/finance/invoices/invoice-history-pagination.tsx

@@ -0,0 +1,81 @@
+'use client';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { useTranslations } from 'next-intl';
+
+export function InvoiceHistoryPagination({
+  page,
+  pageSize,
+  hasMore,
+  busy,
+  failed,
+  onPageChange,
+  onPageSizeChange,
+}: {
+  page: number;
+  pageSize: number;
+  hasMore: boolean;
+  busy: boolean;
+  failed: boolean;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+}) {
+  const t = useTranslations('ws-invoices');
+  return (
+    <nav
+      aria-label={t('activity_pagination')}
+      className="flex flex-wrap items-center justify-between gap-3 border-t pt-4"
+    >
+      <div className="flex items-center gap-2 text-muted-foreground text-sm">
+        <span>{t('activity_rows_per_page')}</span>
+        <Select
+          value={String(pageSize)}
+          onValueChange={(value) => {
+            onPageSizeChange(Number(value));
+          }}
+        >
+          <SelectTrigger
+            className="w-20"
+            aria-label={t('activity_rows_per_page')}
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {[10, 25, 50].map((size) => (
+              <SelectItem key={size} value={String(size)}>
+                {size}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={page === 0 || busy}
+          onClick={() => onPageChange(page - 1)}
+        >
+          {t('activity_previous')}
+        </Button>
+        <span className="text-muted-foreground text-sm tabular-nums">
+          {t('activity_page', { page: page + 1 })}
+        </span>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={busy || failed || !hasMore}
+          onClick={() => onPageChange(page + 1)}
+        >
+          {t('activity_next')}
+        </Button>
+      </div>
+    </nav>
+  );
+}

package/src/components/ui/finance/invoices/invoice-history-row.tsx

@@ -0,0 +1,159 @@
+'use client';
+import { RotateCcw } from '@tuturuuu/icons';
+import type { InvoiceHistoryEntry } from '@tuturuuu/internal-api/finance';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { useFormatter, useTranslations } from 'next-intl';
+import {
+  FINANCE_HIDDEN_AMOUNT,
+  useFinanceConfidentialVisibility,
+} from '../shared/use-finance-confidential-visibility';
+
+export function InvoiceHistoryRow({
+  entry,
+  timeZone,
+  canRestore,
+  restoring,
+  onRestore,
+}: {
+  entry: InvoiceHistoryEntry;
+  timeZone?: string;
+  canRestore: boolean;
+  restoring: boolean;
+  onRestore: () => void;
+}) {
+  const t = useTranslations('ws-invoices');
+  const format = useFormatter();
+  const { isConfidential } = useFinanceConfidentialVisibility();
+  const displayValue = (
+    field: string,
+    value: string | number | boolean | null
+  ) => {
+    if (value == null) return '—';
+    if (
+      isConfidential &&
+      ['amount', 'price', 'paid_amount', 'total_diff', 'value'].includes(field)
+    )
+      return FINANCE_HIDDEN_AMOUNT;
+    return typeof value === 'number' ? format.number(value) : String(value);
+  };
+  return (
+    <li
+      className={`flex flex-wrap items-start justify-between gap-3 p-4 ${entry.entity_type === 'invoice' && entry.operation === 'DELETE' && entry.is_deleted ? 'border-l-2 border-l-destructive bg-destructive/5' : ''}`}
+    >
+      <div className="min-w-0 flex-1 space-y-2">
+        <div className="flex flex-wrap items-center gap-2">
+          <Badge
+            variant={entry.operation === 'DELETE' ? 'destructive' : 'secondary'}
+          >
+            {t(
+              entry.operation === 'DELETE'
+                ? 'activity_deleted'
+                : entry.operation === 'UPDATE'
+                  ? 'activity_updated'
+                  : entry.operation === 'RESTORE'
+                    ? 'activity_restored'
+                    : 'activity_created'
+            )}
+          </Badge>
+          <Badge variant="outline">
+            {t(`history_entities.${entry.entity_type}`)}
+          </Badge>
+          <span className="font-medium text-sm">
+            {entry.customer_name || t('activity_unknown_customer')}
+          </span>
+        </div>
+        {entry.amount != null && (
+          <p className="font-semibold text-sm tabular-nums">
+            {isConfidential
+              ? FINANCE_HIDDEN_AMOUNT
+              : format.number(entry.amount)}{' '}
+            {entry.currency?.toUpperCase()}
+          </p>
+        )}
+        {entry.entity_type === 'invoice' &&
+          entry.operation === 'DELETE' &&
+          entry.is_deleted && (
+            <Badge variant="outline">
+              {t(
+                entry.can_restore
+                  ? 'recovery_ready'
+                  : 'recovery_review_required'
+              )}
+            </Badge>
+          )}
+        <p className="break-all font-mono text-muted-foreground text-xs">
+          {entry.invoice_id}
+        </p>
+        <p className="text-muted-foreground text-xs">
+          {entry.actor_name ||
+            (entry.actor_id
+              ? t('activity_recorded_actor', { id: entry.actor_id })
+              : t('activity_unknown_actor'))}{' '}
+          ·{' '}
+          <time dateTime={entry.occurred_at}>
+            {format.dateTime(new Date(entry.occurred_at), {
+              dateStyle: 'medium',
+              timeStyle: 'medium',
+              timeZone,
+            })}
+          </time>
+        </p>
+        {entry.operation === 'UPDATE' && (
+          <p className="text-muted-foreground text-xs">
+            {t('activity_changed_fields')}:{' '}
+            {entry.changed_fields
+              .map((field) =>
+                t.has(`history_fields.${field}`)
+                  ? t(`history_fields.${field}`)
+                  : field
+              )
+              .join(', ')}
+          </p>
+        )}
+        {Object.keys(entry.changes ?? {}).length > 0 && (
+          <details className="text-sm">
+            <summary className="cursor-pointer text-muted-foreground">
+              {t('activity_details')}
+            </summary>
+            <dl className="mt-2 space-y-3 rounded-md bg-muted/40 p-3">
+              {Object.entries(entry.changes).map(([field, values]) => (
+                <div key={field} className="space-y-1">
+                  <dt className="font-medium">
+                    {t.has(`history_fields.${field}`)
+                      ? t(`history_fields.${field}`)
+                      : field}
+                  </dt>
+                  <dd className="whitespace-pre-wrap break-words text-muted-foreground text-xs">
+                    {t('activity_before')}: {displayValue(field, values.before)}
+                  </dd>
+                  <dd className="whitespace-pre-wrap break-words text-xs">
+                    {t('activity_after')}: {displayValue(field, values.after)}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          </details>
+        )}
+        {entry.entity_type === 'invoice' &&
+          entry.operation === 'DELETE' &&
+          !entry.can_restore && (
+            <p className="max-w-xl text-muted-foreground text-xs">
+              {t('recovery_unavailable')}
+            </p>
+          )}
+      </div>
+      {entry.can_restore && canRestore && (
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={restoring}
+          onClick={onRestore}
+        >
+          <RotateCcw className="size-4" />
+          {t('restore_invoice')}
+        </Button>
+      )}
+    </li>
+  );
+}

package/src/components/ui/finance/invoices/invoice-history.test.tsx

@@ -0,0 +1,170 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => ({
+  query: vi.fn(),
+  mutate: vi.fn(),
+  refetch: vi.fn(),
+  confidential: false,
+  toggleConfidential: vi.fn(),
+}));
+vi.mock('../shared/use-finance-confidential-visibility', () => ({
+  FINANCE_HIDDEN_AMOUNT: '•••••',
+  useFinanceConfidentialVisibility: () => ({
+    isConfidential: mocks.confidential,
+    toggleConfidential: mocks.toggleConfidential,
+  }),
+}));
+vi.mock('@tanstack/react-query', () => ({
+  keepPreviousData: (data: unknown) => data,
+  useQuery: mocks.query,
+  useMutation: () => ({ mutate: mocks.mutate, isPending: false }),
+  useQueryClient: () => ({}),
+}));
+vi.mock('next/navigation', () => ({ useRouter: () => ({ refresh: vi.fn() }) }));
+vi.mock('next-intl', () => ({
+  useTranslations: () =>
+    Object.assign((key: string) => key, { has: () => true }),
+  useFormatter: () => ({
+    dateTime: () => 'Sep 16, 2026',
+    number: (value: number) => String(value),
+  }),
+}));
+vi.mock('@tuturuuu/internal-api/finance', () => ({
+  getInvoiceHistory: vi.fn(),
+  restoreInvoice: vi.fn(),
+}));
+
+import { InvoiceHistory } from './invoice-history';
+
+const entry = {
+  id: '1',
+  occurred_at: '2026-09-16T11:30:00Z',
+  operation: 'DELETE',
+  entity_type: 'invoice',
+  invoice_id: 'invoice-id',
+  actor_name: 'Actor',
+  customer_name: 'Customer',
+  changed_fields: [],
+  can_restore: true,
+  is_deleted: true,
+  amount: 100,
+  currency: 'VND',
+};
+describe('InvoiceHistory', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.confidential = false;
+    mocks.query.mockReturnValue({
+      data: { data: [entry], hasMore: false },
+      isPending: false,
+      isError: false,
+      refetch: mocks.refetch,
+    });
+  });
+  it('opens with deleted invoices highlighted for administrator review', () => {
+    render(<InvoiceHistory wsId="workspace" canRestore />);
+    expect(mocks.query.mock.calls[0]?.[0].queryKey[2]).toBe(true);
+    expect(screen.getByText('recovery_review_title')).toBeInTheDocument();
+    expect(screen.getByText('100 VND')).toBeInTheDocument();
+    expect(screen.getByText('recovery_ready')).toBeInTheDocument();
+    expect(mocks.mutate).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: 'activity_show_all' }));
+    expect(mocks.query.mock.lastCall?.[0].queryKey[2]).toBe(false);
+  });
+  it('respects finance amount visibility in the audit trail', () => {
+    mocks.confidential = true;
+    render(<InvoiceHistory wsId="workspace" canRestore />);
+    expect(screen.queryByText('100 VND')).not.toBeInTheDocument();
+    expect(screen.getByText('••••• VND')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'show_confidential' }));
+    expect(mocks.toggleConfidential).toHaveBeenCalledOnce();
+  });
+  it('requires confirmation before restoring the invoice and payment', () => {
+    render(<InvoiceHistory wsId="workspace" canRestore />);
+    fireEvent.click(screen.getByRole('button', { name: 'restore_invoice' }));
+    expect(screen.getByRole('alertdialog')).toHaveTextContent(
+      'recovery_confirmation'
+    );
+    expect(mocks.mutate).not.toHaveBeenCalled();
+    fireEvent.click(
+      screen.getAllByRole('button', { name: 'restore_invoice' }).at(-1)!
+    );
+    expect(mocks.mutate).toHaveBeenCalledWith('invoice-id');
+  });
+  it('does not offer restoration without mutation permission', () => {
+    render(<InvoiceHistory wsId="workspace" canRestore={false} />);
+    expect(
+      screen.queryByRole('button', { name: 'restore_invoice' })
+    ).not.toBeInTheDocument();
+  });
+  it('explains older deletions that lack a recovery snapshot', () => {
+    mocks.query.mockReturnValue({
+      data: { data: [{ ...entry, can_restore: false }] },
+    });
+    render(<InvoiceHistory wsId="workspace" canRestore />);
+    expect(screen.getByText('recovery_unavailable')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'restore_invoice' })
+    ).not.toBeInTheDocument();
+  });
+  it('uses server lookahead instead of guessing from a full page', () => {
+    mocks.query.mockReturnValue({
+      data: {
+        data: Array.from({ length: 25 }, (_, id) => ({
+          ...entry,
+          id: String(id),
+        })),
+        hasMore: false,
+      },
+    });
+    render(<InvoiceHistory wsId="workspace" canRestore />);
+    expect(
+      screen.getAllByRole('button', { name: 'activity_next' })[0]!
+    ).toBeDisabled();
+  });
+  it('pages forward and resets to the first page when searching', () => {
+    mocks.query.mockReturnValue({ data: { data: [entry], hasMore: true } });
+    render(<InvoiceHistory wsId="workspace" canRestore />);
+    fireEvent.click(
+      screen.getAllByRole('button', { name: 'activity_next' })[0]!
+    );
+    expect(mocks.query.mock.lastCall?.[0].queryKey[3]).toBe(1);
+    fireEvent.change(screen.getByRole('textbox', { name: 'activity_search' }), {
+      target: { value: 'Customer' },
+    });
+    fireEvent.click(
+      screen.getByRole('button', { name: 'activity_search_action' })
+    );
+    expect(mocks.query.mock.lastCall?.[0].queryKey[3]).toBe(0);
+    fireEvent.click(
+      screen.getByRole('button', { name: 'activity_clear_filters' })
+    );
+    expect(
+      screen.getByRole('textbox', { name: 'activity_search' })
+    ).toHaveValue('');
+  });
+  it('keeps results visible but blocks stale restoration and paging while fetching', () => {
+    mocks.query.mockReturnValue({
+      data: { data: [entry], hasMore: true },
+      isFetching: true,
+      isPlaceholderData: true,
+    });
+    render(<InvoiceHistory wsId="workspace" canRestore />);
+    expect(screen.getByText('Customer')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'restore_invoice' })
+    ).toBeDisabled();
+    expect(
+      screen.getAllByRole('button', { name: 'activity_next' })[0]!
+    ).toBeDisabled();
+    expect(screen.getByText('activity_loading')).toBeInTheDocument();
+  });
+  it('offers retry rather than presenting an error as empty history', () => {
+    mocks.query.mockReturnValue({ isError: true, refetch: mocks.refetch });
+    render(<InvoiceHistory wsId="workspace" canRestore />);
+    fireEvent.click(screen.getByRole('button', { name: 'activity_retry' }));
+    expect(mocks.refetch).toHaveBeenCalledOnce();
+    expect(screen.queryByText('activity_empty')).not.toBeInTheDocument();
+  });
+});