@tuturuuu/ui 0.33.0 → 0.34.0

package/src/components/ui/finance/invoices/hooks/use-subscription-auto-selection.test.tsx

@@ -0,0 +1,255 @@
+import { renderHook } from '@testing-library/react';
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import type { Product, SelectedProductItem, UserGroupProducts } from '../types';
+import type { UserGroup } from '../utils';
+import { useSubscriptionAutoSelection } from './use-subscription-auto-selection';
+
+const translate = (key: string) => key;
+vi.mock('next-intl', () => ({ useTranslations: () => translate }));
+vi.mock('@tuturuuu/ui/sonner', () => ({ toast: vi.fn() }));
+
+const inventory = {
+  unit_id: 'unit',
+  warehouse_id: 'warehouse',
+  amount: null,
+  min_amount: 0,
+  price: 100,
+  unit_name: 'Session',
+  warehouse_name: 'Main',
+};
+const products: Product[] = [
+  {
+    id: 'tuition',
+    name: 'Tuition',
+    manufacturer: null,
+    description: null,
+    usage: null,
+    category: null,
+    category_id: 'cat',
+    ws_id: 'ws',
+    created_at: null,
+    inventory: [inventory],
+  },
+];
+const groupProducts: UserGroupProducts[] = [
+  {
+    group_id: 'class-a',
+    workspace_products: {
+      id: 'tuition',
+      name: 'Tuition',
+      product_categories: { name: null },
+    },
+    inventory_units: { id: 'unit', name: 'Session' },
+    warehouse_id: 'warehouse',
+  },
+];
+const userGroups: UserGroup[] = [
+  {
+    workspace_user_groups: {
+      id: 'class-a',
+      name: 'Class A',
+      starting_date: '2026-01-01',
+      ending_date: null,
+      sessions: ['2026-01-05', '2026-01-12'],
+    } as NonNullable<UserGroup['workspace_user_groups']>,
+  },
+];
+const baseProps = {
+  enabled: true,
+  selectedGroupIds: ['class-a'],
+  selectedMonth: '2026-01',
+  groupProducts,
+  products,
+  userGroups,
+  useAttendanceBased: false,
+  userAttendance: [],
+  latestSubscriptionInvoices: [],
+};
+
+type Props = Omit<
+  Parameters<typeof useSubscriptionAutoSelection>[0],
+  'onSelectedProductsChange'
+>;
+function useSelection(props: Props) {
+  const [selected, setSelected] = useState<SelectedProductItem[]>([]);
+  useSubscriptionAutoSelection({
+    ...props,
+    onSelectedProductsChange: setSelected,
+  });
+  return selected;
+}
+
+describe('subscription selection reflects current billable sessions', () => {
+  it('clears prior charges when switching to a month with no sessions', () => {
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: baseProps as Props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+    rerender({ ...baseProps, selectedMonth: '2026-02' });
+    expect(result.current).toEqual([]);
+  });
+
+  it('clears prior charges after payment coverage makes the month fully paid', () => {
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: baseProps as Props,
+    });
+    expect(result.current).toHaveLength(1);
+    rerender({
+      ...baseProps,
+      latestSubscriptionInvoices: [
+        { group_id: 'class-a', valid_until: '2026-02-01' },
+      ],
+    });
+    expect(result.current).toEqual([]);
+  });
+
+  it('keeps charges for an earlier gap when a later month was explicitly paid', () => {
+    const { result } = renderHook(useSelection, {
+      initialProps: {
+        ...baseProps,
+        latestSubscriptionInvoices: [
+          {
+            group_id: 'class-a',
+            valid_until: '2026-03-01',
+            covered_months: ['2026-02-01'],
+          },
+        ],
+      } as Props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+  });
+
+  it('clears charges for an explicitly paid month without relying on expiry', () => {
+    const { result } = renderHook(useSelection, {
+      initialProps: {
+        ...baseProps,
+        latestSubscriptionInvoices: [
+          { group_id: 'class-a', covered_months: ['2026-01-01'] },
+        ],
+      } as Props,
+    });
+    expect(result.current).toEqual([]);
+  });
+
+  it('clears charges when linked inventory becomes unavailable', () => {
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: baseProps as Props,
+    });
+    expect(result.current).toHaveLength(1);
+    rerender({
+      ...baseProps,
+      products: [{ ...products[0]!, inventory: [{ ...inventory, amount: 0 }] }],
+    });
+    expect(result.current).toEqual([]);
+  });
+
+  it('repopulates charges when switching back to a billable month', () => {
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: { ...baseProps, selectedMonth: '2026-02' } as Props,
+    });
+    expect(result.current).toEqual([]);
+    rerender(baseProps);
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+  });
+});
+
+describe('subscription class and inventory updates', () => {
+  it('updates the selected price when inventory pricing refreshes', () => {
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: baseProps as Props,
+    });
+    expect(result.current[0]?.inventory.price).toBe(100);
+    rerender({
+      ...baseProps,
+      products: [
+        { ...products[0]!, inventory: [{ ...inventory, price: 150 }] },
+      ],
+    });
+    expect(result.current[0]?.inventory.price).toBe(150);
+  });
+
+  it('keeps the unpaid class when another selected class is covered', () => {
+    const otherGroup = {
+      workspace_user_groups: {
+        ...userGroups[0]!.workspace_user_groups!,
+        id: 'class-b',
+      },
+    };
+    const props: Props = {
+      ...baseProps,
+      selectedGroupIds: ['class-a', 'class-b'],
+      userGroups: [...userGroups, otherGroup],
+      groupProducts: [
+        ...groupProducts,
+        { ...groupProducts[0]!, group_id: 'class-b' },
+      ],
+    };
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([2, 2]);
+    rerender({
+      ...props,
+      latestSubscriptionInvoices: [
+        { group_id: 'class-a', valid_until: '2026-02-01' },
+      ],
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+  });
+
+  it('counts only present and late attendance in attendance-based billing', () => {
+    const props: Props = {
+      ...baseProps,
+      useAttendanceBased: true,
+      userAttendance: [
+        { group_id: 'class-a', date: '2026-01-05', status: 'PRESENT' },
+        { group_id: 'class-a', date: '2026-01-12', status: 'LATE' },
+        { group_id: 'class-a', date: '2026-01-19', status: 'ABSENT' },
+        { group_id: 'class-b', date: '2026-01-05', status: 'PRESENT' },
+      ],
+    };
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+    rerender({ ...props, userAttendance: [] });
+    expect(result.current).toEqual([]);
+  });
+
+  it('respects finite stock and updates when stock recovers', () => {
+    const props: Props = {
+      ...baseProps,
+      products: [{ ...products[0]!, inventory: [{ ...inventory, amount: 1 }] }],
+    };
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([1]);
+    rerender(baseProps);
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+  });
+
+  it('does not populate selection while auto-selection is disabled', () => {
+    const { result } = renderHook(useSelection, {
+      initialProps: { ...baseProps, enabled: false },
+    });
+    expect(result.current).toEqual([]);
+  });
+});
+
+describe('prefilled subscription quantities', () => {
+  it('retains an explicit initial quantity until billing inputs change', () => {
+    const props: Props = { ...baseProps, prefillAmount: 5 };
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([5]);
+    rerender(props);
+    expect(result.current.map((row) => row.quantity)).toEqual([5]);
+    rerender({ ...props, selectedMonth: '2026-02' });
+    expect(result.current).toEqual([]);
+    rerender(props);
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+  });
+});

package/src/components/ui/finance/invoices/hooks/use-subscription-auto-selection.ts

@@ -14,7 +14,7 @@ import type {
   SelectedProductItem,
   UserGroupProducts,
 } from '../types';
-import type { UserGroup } from '../utils';
+import type { SubscriptionCoverageInvoice, UserGroup } from '../utils';
 import {
   getBillableQuantityMapForGroupsRange,
   getEffectiveDays,
@@ -31,11 +31,7 @@ interface UseSubscriptionAutoSelectionProps {
   userGroups: UserGroup[];
   useAttendanceBased: boolean;
   userAttendance: { status: string; date: string; group_id?: string }[];
-  latestSubscriptionInvoices: {
-    group_id?: string;
-    valid_until?: string | null;
-    created_at?: string | null;
-  }[];
+  latestSubscriptionInvoices: SubscriptionCoverageInvoice[];
   onSelectedProductsChange: Dispatch<SetStateAction<SelectedProductItem[]>>;
   prepaidMonthCount?: number;
   workspaceTimezone?: string | null;
@@ -129,7 +125,7 @@ const areSelectedProductsEqual = (
   if (current.length !== next.length) return false;
 
   const toKey = (item: SelectedProductItem) =>
-    `${item.product.id}|${item.inventory.unit_id}|${item.inventory.warehouse_id}|${item.quantity}`;
+    `${item.product.id}|${item.inventory.unit_id}|${item.inventory.warehouse_id}|${item.inventory.price}|${item.inventory.amount}|${item.quantity}`;
 
   const buildCounts = (items: SelectedProductItem[]) => {
     const counts = new Map<string, number>();
@@ -155,11 +151,7 @@ const areSelectedProductsEqual = (
 const computeGroupAttendanceDaysMap = (
   selectedGroupIds: string[],
   userGroups: UserGroup[],
-  latestSubscriptionInvoices: {
-    group_id?: string;
-    valid_until?: string | null;
-    created_at?: string | null;
-  }[],
+  latestSubscriptionInvoices: SubscriptionCoverageInvoice[],
   selectedMonth: string,
   userAttendance: { status: string; date: string; group_id?: string }[],
   useAttendanceBased: boolean,
@@ -192,11 +184,7 @@ const computeFallbackAttendanceDays = ({
   userGroups,
 }: {
   groupAttendanceDaysMap: Record<string, number>;
-  latestSubscriptionInvoices: {
-    group_id?: string;
-    valid_until?: string | null;
-    created_at?: string | null;
-  }[];
+  latestSubscriptionInvoices: SubscriptionCoverageInvoice[];
   prepaidMonthCount: number;
   selectedGroupIds: string[];
   selectedMonth: string;
@@ -313,9 +301,7 @@ export function useSubscriptionAutoSelection({
     const isGroupChanged = previousGroupIdRef.current !== currentGroupIdsKey;
     previousGroupIdRef.current = currentGroupIdsKey;
 
-    if (!isGroupChanged) return;
-
-    fallbackToastShownRef.current = false;
+    if (isGroupChanged) fallbackToastShownRef.current = false;
 
     const shouldUsePrefill =
       prepaidMonthCount === 1 &&
@@ -356,76 +342,4 @@ export function useSubscriptionAutoSelection({
     groupAttendanceDaysMap,
     prepaidMonthCount,
   ]);
-
-  // Auto-add group products based on attendance when group is selected
-  useEffect(() => {
-    if (
-      !enabled ||
-      sortedSelectedGroupIds.length === 0 ||
-      groupProducts.length === 0
-    ) {
-      return;
-    }
-
-    if (
-      prepaidMonthCount === 1 &&
-      prefillAmount != null &&
-      !initialPrefillUsedRef.current
-    ) {
-      return;
-    }
-
-    const attendanceDays = computeFallbackAttendanceDays({
-      groupAttendanceDaysMap,
-      latestSubscriptionInvoices,
-      prepaidMonthCount,
-      selectedGroupIds: sortedSelectedGroupIds,
-      selectedMonth,
-      useAttendanceBased,
-      userAttendance,
-      userGroups,
-    });
-
-    if (attendanceDays === 0) return;
-
-    const { autoSelected, fallbackTriggered } =
-      buildAutoSelectedProductsForGroup(
-        groupProducts,
-        products,
-        attendanceDays,
-        groupAttendanceDaysMap
-      );
-
-    if (autoSelected.length === 0) return;
-
-    onSelectedProductsChange((prev) =>
-      areSelectedProductsEqual(prev, autoSelected) ? prev : autoSelected
-    );
-
-    if (fallbackTriggered && !fallbackToastShownRef.current) {
-      toast(
-        t('ws-invoices.inventory_fallback_used', {
-          default:
-            'Some items used fallback warehouses due to missing preference.',
-        })
-      );
-      fallbackToastShownRef.current = true;
-    }
-  }, [
-    enabled,
-    sortedSelectedGroupIds,
-    selectedMonth,
-    userAttendance?.length,
-    prefillAmount,
-    groupProducts,
-    userGroups,
-    useAttendanceBased,
-    t,
-    userAttendance,
-    latestSubscriptionInvoices,
-    onSelectedProductsChange,
-    products,
-    groupAttendanceDaysMap,
-    prepaidMonthCount,
-  ]);
 }

package/src/components/ui/finance/invoices/hooks/use-subscription-invoice-content.test.tsx

@@ -0,0 +1,93 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { UserGroup } from '../utils';
+import { useSubscriptionInvoiceContent } from './use-subscription-invoice-content';
+
+const translate = Object.assign(
+  (key: string, values?: Record<string, unknown>) =>
+    values?.monthName ? String(values.monthName) : key,
+  { has: () => true }
+);
+vi.mock('next-intl', () => ({ useTranslations: () => translate }));
+const base = {
+  enabled: true,
+  selectedGroupIds: ['g1'],
+  selectedMonth: '2026-01',
+  prepaidMonthCount: 3,
+  userGroups: [
+    {
+      workspace_user_groups: {
+        id: 'g1',
+        name: 'Class A',
+        sessions: [],
+        ws_id: 'ws',
+        archived: false,
+        cert_template: 'original',
+        created_at: null,
+        creator_id: null,
+        description: null,
+        ending_date: null,
+        is_course_published: false,
+        is_guest: false,
+        notes: null,
+        starting_date: '2026-01-01',
+      },
+    },
+  ] satisfies UserGroup[],
+  groupProducts: [],
+  subscriptionSelectedProducts: [],
+  userAttendance: [],
+  isSelectedMonthPaid: false,
+  locale: 'en',
+  onNotesChange: vi.fn(),
+};
+describe('subscription invoice month descriptions', () => {
+  it('lists separated unpaid months without claiming the paid month between them', () => {
+    const onContentChange = vi.fn();
+    renderHook(() =>
+      useSubscriptionInvoiceContent({
+        ...base,
+        onContentChange,
+        latestSubscriptionInvoices: [
+          {
+            group_id: 'g1',
+            valid_until: '2026-03-01',
+            covered_months: ['2026-02-01'],
+          },
+        ],
+      })
+    );
+    expect(onContentChange).toHaveBeenLastCalledWith(
+      'January 2026, March 2026'
+    );
+  });
+  it('keeps a compact range for contiguous unpaid months', () => {
+    const onContentChange = vi.fn();
+    renderHook(() =>
+      useSubscriptionInvoiceContent({
+        ...base,
+        onContentChange,
+        latestSubscriptionInvoices: [],
+      })
+    );
+    expect(onContentChange).toHaveBeenLastCalledWith(
+      'January 2026 - March 2026'
+    );
+  });
+  it('does not substitute a future expiry for the selected fully covered range', () => {
+    const onContentChange = vi.fn();
+    renderHook(() =>
+      useSubscriptionInvoiceContent({
+        ...base,
+        onContentChange,
+        isSelectedMonthPaid: true,
+        latestSubscriptionInvoices: [
+          { group_id: 'g1', valid_until: '2027-01-01' },
+        ],
+      })
+    );
+    expect(onContentChange).toHaveBeenLastCalledWith(
+      'January 2026 - March 2026'
+    );
+  });
+});

package/src/components/ui/finance/invoices/hooks/use-subscription-invoice-content.ts

@@ -1,7 +1,7 @@
 import { useTranslations } from 'next-intl';
 import { useEffect, useRef } from 'react';
 import type { SelectedProductItem, UserGroupProducts } from '../types';
-import type { UserGroup } from '../utils';
+import type { SubscriptionCoverageInvoice, UserGroup } from '../utils';
 import {
   formatCoverageRangeLabel,
   formatMonthLabel,
@@ -10,7 +10,6 @@ import {
   getBillableSessionsForGroupsInRange,
   getCoverageEndMonthValue,
   getCoverageMonths,
-  getSubscriptionCoverageInvoiceForGroup,
   isSubscriptionMonthPaidForGroup,
 } from '../utils';
 
@@ -22,10 +21,7 @@ interface UseSubscriptionInvoiceContentProps {
   groupProducts: UserGroupProducts[];
   subscriptionSelectedProducts: SelectedProductItem[];
   userAttendance: { status: string; date: string; group_id?: string }[];
-  latestSubscriptionInvoices: {
-    group_id?: string;
-    valid_until?: string | null;
-  }[];
+  latestSubscriptionInvoices: SubscriptionCoverageInvoice[];
   isSelectedMonthPaid: boolean;
   locale: string;
   onContentChange: (content: string) => void;
@@ -90,10 +86,6 @@ export function useSubscriptionInvoiceContent({
       if (!group) return;
 
       const groupName = group.workspace_user_groups?.name || 'Unknown Group';
-      const latestInvoice = getSubscriptionCoverageInvoiceForGroup(
-        latestSubscriptionInvoices,
-        groupId
-      );
       const unpaidMonths = coverageMonths.filter(
         (month) =>
           !isSubscriptionMonthPaidForGroup(
@@ -103,15 +95,19 @@ export function useSubscriptionInvoiceContent({
           )
       );
 
-      const startMonth =
-        unpaidMonths[0] ??
-        latestInvoice?.valid_until?.slice(0, 7) ??
-        selectedMonth;
+      const startMonth = unpaidMonths[0] ?? selectedMonth;
       const endMonth =
         unpaidMonths[unpaidMonths.length - 1] ?? coverageEndMonth;
 
       let rangeLabel = '';
-      if (startMonth && startMonth < endMonth) {
+      const hasGaps = unpaidMonths.some(
+        (month, index) =>
+          index > 0 &&
+          getCoverageMonths(unpaidMonths[index - 1]!, 2)[1] !== month
+      );
+      if (hasGaps) {
+        rangeLabel = unpaidMonths.map(formatMonth).join(', ');
+      } else if (startMonth && startMonth < endMonth) {
         // Range from startMonth to endMonth
         rangeLabel = `${formatMonth(startMonth)} - ${formatMonth(endMonth)}`;
       } else {

package/src/components/ui/finance/invoices/invoice-analytics.tsx

@@ -4,12 +4,14 @@ import { useTranslations } from 'next-intl';
 import { parseAsArrayOf, parseAsString, useQueryState } from 'nuqs';
 import { useEffect, useMemo, useState } from 'react';
 import { Card, CardContent } from '../../card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../tabs';
 import {
   InvoiceTotalsChart,
   type InvoiceTotalsChartProps,
   InvoiceTotalsChartSkeleton,
 } from './charts/invoice-totals-chart';
 import { useInvoiceAnalytics } from './hooks/use-invoice-analytics';
+import { SubscriptionPaymentAnalytics } from './subscription-payment-analytics';
 
 /**
  * weekStartsOn values (JavaScript convention, matching useCalendarPreferences):
@@ -31,7 +33,7 @@ interface InvoiceAnalyticsProps {
   currency?: string;
 }
 
-export function InvoiceAnalytics({
+function InvoiceOverviewAnalytics({
   wsId,
   className,
   weekStartsOn = 1,
@@ -165,3 +167,24 @@ export function InvoiceAnalytics({
 
   return <InvoiceTotalsChart {...chartProps} />;
 }
+
+export function InvoiceAnalytics(props: InvoiceAnalyticsProps) {
+  const t = useTranslations('invoice-subscriptions');
+  return (
+    <Tabs defaultValue="overview" className={props.className}>
+      <TabsList className="mb-3">
+        <TabsTrigger value="overview">{t('overview')}</TabsTrigger>
+        <TabsTrigger value="subscriptions">{t('title')}</TabsTrigger>
+      </TabsList>
+      <TabsContent value="subscriptions">
+        <SubscriptionPaymentAnalytics
+          wsId={props.wsId}
+          currency={props.currency}
+        />
+      </TabsContent>
+      <TabsContent value="overview">
+        <InvoiceOverviewAnalytics {...props} className={undefined} />
+      </TabsContent>
+    </Tabs>
+  );
+}

package/src/components/ui/finance/invoices/query-invalidation.test.ts

@@ -0,0 +1,28 @@
+import { QueryClient } from '@tanstack/react-query';
+import { expect, it } from 'vitest';
+import { invalidateInvoiceMutationQueries } from './query-invalidation';
+
+it('refreshes coverage and analytics after invoice changes without invalidating other workspaces', async () => {
+  const client = new QueryClient();
+  const roots = [
+    'invoice-subscription-analytics',
+    'subscription-invoice-context',
+    'invoice-analytics',
+    'pending-invoices',
+  ];
+  for (const root of roots)
+    for (const ws of ['ws1', 'ws2'])
+      client.setQueryData([root, ws, 'filters'], { value: 1 });
+  client.setQueryData(['unrelated', 'ws1'], { value: 1 });
+  await invalidateInvoiceMutationQueries(client, 'ws1');
+  for (const root of roots) {
+    expect(client.getQueryState([root, 'ws1', 'filters'])?.isInvalidated).toBe(
+      true
+    );
+    expect(client.getQueryState([root, 'ws2', 'filters'])?.isInvalidated).toBe(
+      false
+    );
+  }
+  expect(client.getQueryState(['unrelated', 'ws1'])?.isInvalidated).toBe(false);
+  client.clear();
+});

package/src/components/ui/finance/invoices/query-invalidation.ts

@@ -12,6 +12,7 @@ const INVOICE_MUTATION_QUERY_ROOTS = new Set([
   'infinite-user-invoices',
   'invoice-analytics',
   'invoice-history',
+  'invoice-subscription-analytics',
   'monthly-chart',
   'monthly-closing-balance',
   'monthly-opening-balance',
@@ -20,6 +21,7 @@ const INVOICE_MUTATION_QUERY_ROOTS = new Set([
   'pending-invoices-current-month',
   'promotions',
   'spending_trends',
+  'subscription-invoice-context',
   'user-invoices',
   'user-linked-promotions',
   'user-referral-discounts',