@tuturuuu/ui 0.32.0 → 0.34.0

package/src/components/ui/custom/report-preview.tsx

@@ -20,6 +20,7 @@ import {
   type ReportFlowSegment,
   type ReportSectionTone,
 } from './report-preview-pagination';
+import { ReportPreviewViewport } from './report-preview-viewport';
 
 const PAGE_HEIGHT_MM = 297;
 const PAGE_WIDTH_MM = 210;
@@ -763,9 +764,7 @@ export default function ReportPreview({
 
       {singlePagePreview ? (
         <>
-          <div className="mx-auto flex w-[210mm] min-w-[210mm] flex-col gap-6 print:hidden">
-            {visiblePreviewPage}
-          </div>
+          <ReportPreviewViewport>{visiblePreviewPage}</ReportPreviewViewport>
           {paginationReady ? (
             <div className="pointer-events-none fixed top-0 -left-[99999px] z-[-1]">
               <div

package/src/components/ui/finance/categories-tags-tabs.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Receipt, Tags } from '@tuturuuu/icons';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import { CategoryBreakdownChart } from '@tuturuuu/ui/finance/shared/charts/category-breakdown-chart';
 import { TagManager } from '@tuturuuu/ui/finance/tags/tag-manager';
@@ -58,9 +59,11 @@ export default function CategoriesTagsTabs({
     >
       <TabsList>
         <TabsTrigger value="categories">
+          <Receipt className="size-4" />
           {t('ws-transaction-categories.plural')}
         </TabsTrigger>
         <TabsTrigger value="tags">
+          <Tags className="size-4" />
           {t('ws-transaction-tags.plural')}
         </TabsTrigger>
       </TabsList>

package/src/components/ui/finance/invoices/charts/subscription-payment-chart.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import type { SubscriptionPaymentPeriod } from '@tuturuuu/internal-api/finance-subscription-analytics';
+import { useLocale, useTranslations } from 'next-intl';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { FINANCE_HIDDEN_AMOUNT } from '../../shared/use-finance-confidential-visibility';
+
+export type PaymentMetric =
+  | 'amount'
+  | 'paidUsers'
+  | 'paidGroups'
+  | 'memberships';
+export function SubscriptionPaymentChart({
+  periods,
+  metric,
+  currency,
+  hidden,
+}: {
+  periods: SubscriptionPaymentPeriod[];
+  metric: PaymentMetric;
+  currency: string;
+  hidden: boolean;
+}) {
+  const t = useTranslations('invoice-subscriptions');
+  const locale = useLocale();
+  const number = new Intl.NumberFormat(locale);
+  const money = new Intl.NumberFormat(locale, { style: 'currency', currency });
+  const label = (value: string) =>
+    value.length === 4
+      ? value
+      : new Intl.DateTimeFormat(locale, {
+          month: 'short',
+          year: 'numeric',
+          timeZone: 'UTC',
+        }).format(new Date(`${value}-01T00:00:00Z`));
+  const format = (value: number, key: string) =>
+    key === 'amount'
+      ? hidden
+        ? FINANCE_HIDDEN_AMOUNT
+        : money.format(value)
+      : number.format(value);
+  if (hidden && metric === 'amount')
+    return (
+      <div className="flex h-64 items-center justify-center rounded-lg bg-muted/40 text-muted-foreground text-sm">
+        {t('hidden')}
+      </div>
+    );
+  return (
+    <div
+      className="h-72 w-full min-w-0"
+      role="img"
+      aria-label={t('chart_label', { metric: t(metric) })}
+    >
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart
+          data={periods}
+          accessibilityLayer
+          margin={{ top: 16, right: 12, left: 12, bottom: 0 }}
+        >
+          <CartesianGrid
+            vertical={false}
+            stroke="var(--border)"
+            strokeDasharray="3 3"
+          />
+          <XAxis
+            dataKey="period"
+            tickFormatter={label}
+            tick={{ fill: 'var(--muted-foreground)', fontSize: 12 }}
+            tickLine={false}
+            axisLine={false}
+            minTickGap={24}
+          />
+          <YAxis
+            tick={{ fill: 'var(--muted-foreground)', fontSize: 12 }}
+            tickLine={false}
+            axisLine={false}
+            allowDecimals={metric === 'amount'}
+            width={66}
+            tickFormatter={(value) =>
+              new Intl.NumberFormat(locale, { notation: 'compact' }).format(
+                value
+              )
+            }
+          />
+          <Tooltip
+            cursor={{ fill: 'var(--muted)', opacity: 0.5 }}
+            content={({ active, payload }) => {
+              const row = payload?.[0]?.payload as
+                | SubscriptionPaymentPeriod
+                | undefined;
+              if (!active || !row) return null;
+              return (
+                <div className="min-w-52 rounded-xl border bg-popover p-4 text-popover-foreground shadow-lg">
+                  <p className="mb-3 font-semibold">{label(row.period)}</p>
+                  {(
+                    [
+                      'amount',
+                      'paidUsers',
+                      'paidGroups',
+                      'memberships',
+                    ] as const
+                  ).map((key) => (
+                    <div
+                      key={key}
+                      className="flex justify-between gap-6 py-1 text-sm"
+                    >
+                      <span className="text-muted-foreground">{t(key)}</span>
+                      <span className="font-medium tabular-nums">
+                        {format(row[key], key)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              );
+            }}
+          />
+          <Bar
+            dataKey={metric}
+            name={t(metric)}
+            fill="var(--primary)"
+            radius={[5, 5, 0, 0]}
+            maxBarSize={48}
+            isAnimationActive={false}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/components/ui/finance/invoices/charts/subscription-payment-details.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import type { SubscriptionPaymentCurrency } from '@tuturuuu/internal-api/finance-subscription-analytics';
+import { useLocale, useTranslations } from 'next-intl';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../../../tooltip';
+import { FINANCE_HIDDEN_AMOUNT } from '../../shared/use-finance-confidential-visibility';
+
+export function SubscriptionPaymentDetails({
+  data,
+  hidden,
+}: {
+  data: SubscriptionPaymentCurrency;
+  hidden: boolean;
+}) {
+  const t = useTranslations('invoice-subscriptions');
+  const locale = useLocale();
+  const format = (value: number) =>
+    hidden
+      ? FINANCE_HIDDEN_AMOUNT
+      : new Intl.NumberFormat(locale, {
+          style: 'currency',
+          currency: data.currency,
+        }).format(value);
+  const max = Math.max(1, ...data.distribution.map((bin) => bin.userCount));
+  return (
+    <div className="space-y-5">
+      <div className="rounded-xl border bg-muted/20 p-4">
+        <h3 className="font-medium text-sm">{t('distribution')}</h3>
+        <p className="mt-1 text-muted-foreground text-xs">
+          {t('distribution_help')}
+        </p>
+        <TooltipProvider>
+          <div className="mt-4 flex flex-wrap gap-3">
+            {data.distribution.map((bin) => (
+              <Tooltip key={bin.groupCount}>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className="min-w-36 flex-1 rounded-lg border bg-background p-3 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    aria-label={t('distribution_value', bin)}
+                  >
+                    <div className="flex justify-between gap-4 text-sm">
+                      <span>
+                        {t('groups_count', { count: bin.groupCount })}
+                      </span>
+                      <strong className="tabular-nums">{bin.userCount}</strong>
+                    </div>
+                    <div className="mt-2 h-1.5 rounded-full bg-muted">
+                      <div
+                        className="h-full rounded-full bg-primary"
+                        style={{ width: `${(bin.userCount / max) * 100}%` }}
+                      />
+                    </div>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>{t('distribution_value', bin)}</TooltipContent>
+              </Tooltip>
+            ))}
+          </div>
+        </TooltipProvider>
+      </div>
+      <details className="rounded-xl border p-4">
+        <summary className="cursor-pointer font-medium text-sm focus-visible:outline-ring">
+          {t('table')}
+        </summary>
+        <div className="mt-4 overflow-x-auto">
+          <table className="w-full text-sm tabular-nums">
+            <caption className="sr-only">{t('title')}</caption>
+            <thead>
+              <tr className="border-b text-muted-foreground">
+                {[
+                  'period',
+                  'paidUsers',
+                  'paidGroups',
+                  'memberships',
+                  'amount',
+                ].map((key) => (
+                  <th
+                    key={key}
+                    scope="col"
+                    className="px-3 py-2 text-start font-medium"
+                  >
+                    {t(key)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {data.periods.map((row) => (
+                <tr key={row.period} className="border-b last:border-0">
+                  <th scope="row" className="px-3 py-2 text-start font-medium">
+                    {row.period}
+                  </th>
+                  <td className="px-3 py-2">{row.paidUsers}</td>
+                  <td className="px-3 py-2">{row.paidGroups}</td>
+                  <td className="px-3 py-2">{row.memberships}</td>
+                  <td className="px-3 py-2">{format(row.amount)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </details>
+    </div>
+  );
+}

package/src/components/ui/finance/invoices/columns.tsx

@@ -30,6 +30,7 @@ type DeleteInvoiceAction = (
 
 interface InvoiceExtraData {
   canDeleteInvoices?: boolean;
+  canRestoreInvoices?: boolean;
   deleteInvoiceAction?: DeleteInvoiceAction;
   currency?: string;
 }
@@ -359,6 +360,7 @@ export const invoiceColumns = ({
           row={row}
           href={row.original.href}
           canDeleteInvoices={extraData?.canDeleteInvoices}
+          canRestoreInvoices={extraData?.canRestoreInvoices}
           deleteInvoiceAction={extraData?.deleteInvoiceAction}
         />
       ),

package/src/components/ui/finance/invoices/components/invoice-checkout-summary.tsx

@@ -38,6 +38,8 @@ export function InvoiceCheckoutSummary({
   currency = 'VND',
 }: InvoiceCheckoutSummaryProps) {
   const t = useTranslations();
+  const displayedDiscount =
+    discountAmount ?? Math.max(0, subtotal - totalBeforeRounding);
   return (
     <div className="space-y-4">
       <div className="space-y-2">
@@ -51,15 +53,16 @@ export function InvoiceCheckoutSummary({
           />
         </div>
 
-        {discountAmount !== undefined && discountLabel && (
+        {displayedDiscount > 0 && (
           <div className="flex justify-between">
             <span className="text-muted-foreground">
-              {t('ws-invoices.discount')} ({discountLabel})
+              {t('ws-invoices.discount')}
+              {discountLabel ? ` (${discountLabel})` : ''}
             </span>
             <FinanceDisplayAmount
               alwaysShow
               className={discountClassName}
-              value={`-${formatCurrency(discountAmount, currency)}`}
+              value={`-${formatCurrency(displayedDiscount, currency)}`}
             />
           </div>
         )}

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

@@ -0,0 +1,27 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { InvoiceDataState } from './invoice-data-state';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+describe('InvoiceDataState', () => {
+  it('announces loading without offering duplicate requests', () => {
+    render(<InvoiceDataState loading onRetry={vi.fn()} />);
+    expect(screen.getByRole('status')).toHaveTextContent('ws-invoices.loading');
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('replaces loading with an actionable retry after failure', () => {
+    const onRetry = vi.fn();
+    const { rerender } = render(<InvoiceDataState loading onRetry={onRetry} />);
+    rerender(<InvoiceDataState loading={false} onRetry={onRetry} />);
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      'ws-invoices.load_failed'
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'common.retry' }));
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+});

package/src/components/ui/finance/invoices/components/invoice-data-state.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Loader2 } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { useTranslations } from 'next-intl';
+
+export function InvoiceDataState({
+  loading,
+  onRetry,
+}: {
+  loading: boolean;
+  onRetry: () => void;
+}) {
+  const t = useTranslations();
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 py-8">
+      <div
+        role={loading ? 'status' : 'alert'}
+        className="flex items-center gap-2"
+      >
+        {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+        <p className="text-muted-foreground text-sm">
+          {t(loading ? 'ws-invoices.loading' : 'ws-invoices.load_failed')}
+        </p>
+      </div>
+      {!loading && (
+        <Button type="button" variant="outline" onClick={onRetry}>
+          {t('common.retry')}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/ui/finance/invoices/components/subscription-group-selector.tsx

@@ -35,6 +35,7 @@ type LatestInvoice = {
   group_id?: string;
   valid_until?: string | null;
   created_at?: string | null;
+  covered_months?: string[] | null;
 };
 
 type UserGroupItem = {
@@ -77,6 +78,7 @@ function GroupRow({
   isSelected,
   isMonthPaid,
   latestInvoice,
+  coverageInvoices,
   locale,
   isLoadingSubscriptionData,
   onToggle,
@@ -86,12 +88,17 @@ function GroupRow({
   isSelected: boolean;
   isMonthPaid: boolean;
   latestInvoice: LatestInvoice | undefined;
+  coverageInvoices: LatestInvoice[];
   locale: string;
   isLoadingSubscriptionData: boolean;
   onToggle: () => void;
   t: (key: string) => string;
 }) {
-  const paymentStatus = getGroupPaymentStatus(group, latestInvoice);
+  const paymentStatus = getGroupPaymentStatus(
+    group,
+    latestInvoice,
+    coverageInvoices
+  );
   return (
     <button
       type="button"
@@ -151,13 +158,23 @@ function GroupRow({
                 {new Date(latestInvoice.created_at).toLocaleDateString(locale)}
               </span>
             )}
-            {latestInvoice?.valid_until && (
+            {latestInvoice?.covered_months != null ? (
               <span>
-                {t('ws-invoices.valid_until')}{' '}
-                {parseLocalCalendarDate(
-                  latestInvoice.valid_until
-                ).toLocaleDateString(locale)}
+                {t('invoice-subscriptions.coverage_months')}:{' '}
+                {latestInvoice.covered_months
+                  .map((month) => month.slice(0, 7))
+                  .sort()
+                  .join(', ')}
               </span>
+            ) : (
+              latestInvoice?.valid_until && (
+                <span>
+                  {t('ws-invoices.valid_until')}{' '}
+                  {parseLocalCalendarDate(
+                    latestInvoice.valid_until
+                  ).toLocaleDateString(locale)}
+                </span>
+              )
             )}
           </p>
         )}
@@ -270,6 +287,9 @@ export function SubscriptionGroupSelector({
                     isSelected={isSelected}
                     isMonthPaid={isMonthPaid}
                     latestInvoice={latestInvoice}
+                    coverageInvoices={latestSubscriptionInvoices.filter(
+                      (invoice) => invoice.group_id === group.id
+                    )}
                     locale={locale}
                     isLoadingSubscriptionData={isLoadingSubscriptionData}
                     onToggle={() => onGroupSelect(group.id)}
@@ -317,6 +337,9 @@ export function SubscriptionGroupSelector({
                           isSelected={isSelected}
                           isMonthPaid={isMonthPaid}
                           latestInvoice={latestInvoice}
+                          coverageInvoices={latestSubscriptionInvoices.filter(
+                            (invoice) => invoice.group_id === group.id
+                          )}
                           locale={locale}
                           isLoadingSubscriptionData={isLoadingSubscriptionData}
                           onToggle={() => onGroupSelect(group.id)}

package/src/components/ui/finance/invoices/export-data.test.ts

@@ -0,0 +1,121 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { XLSX } from '../../../../xlsx';
+import { getData, getPendingInvoicesData } from './export-data';
+
+const mocks = vi.hoisted(() => ({ pending: vi.fn(), created: vi.fn() }));
+vi.mock('@tuturuuu/internal-api/finance', () => ({
+  listPendingFinanceInvoices: mocks.pending,
+  listFinanceInvoices: mocks.created,
+}));
+beforeEach(() => vi.clearAllMocks());
+
+describe('invoice export normalization', () => {
+  it('round-trips Vietnamese class names and all debt rows through a real Excel workbook', async () => {
+    const data = [
+      {
+        user_id: 'student-1',
+        user_name: 'Nguyễn An',
+        group_id: 'class-1',
+        group_name: 'Lớp cô Ngân',
+        months_owed: ['2026-08', '2026-09'],
+        potential_total: 1200000,
+        total_sessions: 8,
+      },
+      {
+        user_id: 'student-1',
+        user_name: 'Nguyễn An',
+        group_id: 'class-2',
+        group_name: 'Lớp thầy Bình',
+        months_owed: '2026-09',
+        potential_total: 800000,
+        total_sessions: 4,
+      },
+    ];
+    mocks.pending.mockResolvedValue({ count: 2, data });
+    const result = await getPendingInvoicesData('ws', {});
+    const flat = result.data.map(
+      ({ customer: _customer, creator: _creator, wallet: _wallet, ...row }) =>
+        row
+    );
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(
+      workbook,
+      XLSX.utils.json_to_sheet(flat),
+      'Debt'
+    );
+    const bytes = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });
+    const parsed = XLSX.read(bytes, { type: 'array' });
+    const rows = XLSX.utils.sheet_to_json(parsed.Sheets.Debt!);
+    expect(rows).toHaveLength(2);
+    expect(rows).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          user_name: 'Nguyễn An',
+          group_name: 'Lớp cô Ngân',
+          months_owed: '2026-08, 2026-09',
+          potential_total: 1200000,
+        }),
+        expect.objectContaining({
+          user_name: 'Nguyễn An',
+          group_name: 'Lớp thầy Bình',
+          months_owed: '2026-09',
+          potential_total: 800000,
+        }),
+      ])
+    );
+  });
+
+  it('preserves grouped classes and scalar user filters', async () => {
+    mocks.pending.mockResolvedValue({
+      count: 1,
+      data: [
+        {
+          user_id: 'student',
+          group_ids: ['a', 'b'],
+          group_names: ['A', 'B'],
+          months_owed: ['2026-09'],
+        },
+      ],
+    });
+    const result = await getPendingInvoicesData('ws', {
+      groupByUser: true,
+      userIds: 'student',
+      q: 'A',
+    });
+    expect(result.data[0]).toMatchObject({
+      group_id: 'a,b',
+      group_name: 'A, B',
+      months_owed: '2026-09',
+    });
+    expect(mocks.pending).toHaveBeenCalledWith(
+      'ws',
+      expect.objectContaining({
+        userIds: ['student'],
+        q: 'A',
+        groupByUser: true,
+      })
+    );
+  });
+
+  it('preserves both legacy and multiple-wallet filters in created exports', async () => {
+    mocks.created.mockResolvedValue({ count: 0, data: [] });
+    await getData('ws', {
+      walletId: 'cash',
+      walletIds: ['bank'],
+      userIds: 'student',
+      start: '2026-09-01',
+      end: '2026-09-30',
+      q: 'tuition',
+    });
+    expect(mocks.created).toHaveBeenCalledWith(
+      'ws',
+      expect.objectContaining({
+        walletIds: ['cash', 'bank'],
+        userIds: ['student'],
+        start: '2026-09-01',
+        end: '2026-09-30',
+        q: 'tuition',
+      })
+    );
+  });
+});