@tuturuuu/ui 0.33.0 → 0.34.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [0.34.0](https://github.com/tutur3u/platform/compare/ui-v0.33.0...ui-v0.34.0) (2026-09-25)
+
+
+### Features
+
+* **auth:** enforce required account MFA lifecycle ([e08f27d](https://github.com/tutur3u/platform/commit/e08f27dbc082f7d9c951bb0792357638f3dcfb0a)) ([#5448](https://github.com/tutur3u/platform/issues/5448)) ([d7a5ed4](https://github.com/tutur3u/platform/commit/d7a5ed453963e619bd1dc3bd8c8a18c5e027317c))
+* **finance:** track tuition coverage and harden invoice exports ([72e07be](https://github.com/tutur3u/platform/commit/72e07bebef58dfee398bcd0d896304d13a2d9aad)) ([#5447](https://github.com/tutur3u/platform/issues/5447)) ([6e822d8](https://github.com/tutur3u/platform/commit/6e822d89d079d9ea8b2677f208c16364cd70d586))
+
+
+### Bug Fixes
+
+* **calendar:** treat working locations as non-reminder events ([454e666](https://github.com/tutur3u/platform/commit/454e666a6465e3debd06260aedc1de7b96ab5d67)) ([#5511](https://github.com/tutur3u/platform/issues/5511)) ([6508ad6](https://github.com/tutur3u/platform/commit/6508ad681aaa174b186022fcbd526e20be682973))
+
 ## [0.33.0](https://github.com/tutur3u/platform/compare/ui-v0.32.0...ui-v0.33.0) (2026-09-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -87,13 +87,13 @@
     "@tiptap/pm": "3.31.3",
     "@tiptap/react": "3.31.3",
     "@tiptap/starter-kit": "3.31.3",
-    "@tuturuuu/ai": "0.14.0",
+    "@tuturuuu/ai": "0.15.0",
     "@tuturuuu/apis": "0.11.4",
     "@tuturuuu/hooks": "0.1.2",
     "@tuturuuu/icons": "0.1.1",
-    "@tuturuuu/internal-api": "0.39.0",
+    "@tuturuuu/internal-api": "0.41.0",
     "@tuturuuu/supabase": "0.5.2",
-    "@tuturuuu/utils": "0.29.0",
+    "@tuturuuu/utils": "0.30.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -154,7 +154,7 @@
     "@tanstack/react-table": "^9.2.4",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
-    "@tuturuuu/types": "0.31.0",
+    "@tuturuuu/types": "0.32.0",
     "@tuturuuu/typescript-config": "0.1.2",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.25",

package/src/components/ui/custom/account-assurance-refresh.test.tsx

@@ -0,0 +1,42 @@
+import {
+  focusManager,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { AccountAssuranceRefresh } from './account-assurance-refresh';
+
+const getProfile = vi.hoisted(() => vi.fn());
+vi.mock('@tuturuuu/internal-api/users', () => ({
+  getCurrentUserProfile: getProfile,
+}));
+vi.mock('next/navigation', () => ({ usePathname: () => '/personal' }));
+beforeEach(() => {
+  getProfile.mockReset();
+  focusManager.setFocused(true);
+});
+afterEach(() => focusManager.setFocused(undefined));
+function mount() {
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <AccountAssuranceRefresh />
+      <p>cached workspace</p>
+    </QueryClientProvider>
+  );
+}
+it('keeps cached content visible and revalidates on focus', async () => {
+  getProfile.mockResolvedValue({ id: 'actor' });
+  mount();
+  expect(screen.getByText('cached workspace')).toBeTruthy();
+  await waitFor(() => expect(getProfile).toHaveBeenCalledTimes(1));
+  focusManager.setFocused(false);
+  focusManager.setFocused(true);
+  await waitFor(() => expect(getProfile).toHaveBeenCalledTimes(2));
+});
+it('does not block optional cached content when offline', async () => {
+  getProfile.mockRejectedValue(new Error('Offline'));
+  mount();
+  await waitFor(() => expect(getProfile).toHaveBeenCalledOnce());
+  expect(screen.getByText('cached workspace')).toBeTruthy();
+});

package/src/components/ui/custom/account-assurance-refresh.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { getCurrentUserProfile } from '@tuturuuu/internal-api/users';
+import { usePathname } from 'next/navigation';
+
+/** Recheck on reconnect/resume without blocking optional accounts' cached UI.
+ * The internal API routes MFA_REQUIRED through the server auth proxy. Offline
+ * clients cannot discover a policy/recovery change until they reconnect.
+ */
+export function AccountAssuranceRefresh() {
+  const pathname = usePathname();
+  const protectedPage = Boolean(
+    pathname &&
+      !/^\/(?:en|vi)?\/?$/.test(pathname) &&
+      !/(?:^|\/)(?:login|verify-token|auth)(?:\/|$)/.test(pathname)
+  );
+  useQuery({
+    queryKey: ['account-assurance-refresh'],
+    queryFn: () => getCurrentUserProfile(),
+    enabled: protectedPage,
+    staleTime: 0,
+    gcTime: 0,
+    retry: false,
+    refetchOnWindowFocus: 'always',
+    refetchOnReconnect: 'always',
+    throwOnError: false,
+  });
+  return null;
+}

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/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',
+      })
+    );
+  });
+});