@tuturuuu/ui 0.30.1 → 0.31.0

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

@@ -30,15 +30,28 @@ const testState = vi.hoisted(() => {
 
   return {
     InvoicePaymentSettings: vi.fn(),
+    SubscriptionAttendanceSummary: vi.fn(),
     categories: [] as Array<{ id: string; name: string }>,
     groupIds: ['group-1'],
     month: '2026-07',
+    setMonth: vi.fn(),
     productSelectionInjected: false,
     products: [product],
     selectedProducts: [{ inventory, product, quantity: 1 }],
     useCategories: vi.fn(),
     useWallets: vi.fn(),
     userId: 'user-1',
+    userGroups: [
+      {
+        workspace_user_groups: {
+          ending_date: null as string | null,
+          id: 'group-1',
+          name: 'Group 1',
+          sessions: ['2026-07-05'],
+          starting_date: '2026-07-01',
+        },
+      },
+    ],
     wallets: [] as Array<{
       currency: string;
       id: string;
@@ -67,7 +80,7 @@ vi.mock('nuqs', () => ({
   useQueryState: (key: string, options?: { defaultValue?: unknown }) => {
     if (key === 'user_id') return [testState.userId, vi.fn()];
     if (key === 'group_ids') return [testState.groupIds, vi.fn()];
-    if (key === 'month') return [testState.month, vi.fn()];
+    if (key === 'month') return [testState.month, testState.setMonth];
     return [options?.defaultValue ?? '', vi.fn()];
   },
 }));
@@ -113,7 +126,10 @@ vi.mock('./components/invoice-products-permission-warning', () => ({
 }));
 
 vi.mock('./components/subscription-attendance-summary', () => ({
-  SubscriptionAttendanceSummary: () => null,
+  SubscriptionAttendanceSummary: (props: unknown) => {
+    testState.SubscriptionAttendanceSummary(props);
+    return null;
+  },
 }));
 
 vi.mock('./components/subscription-group-selector', () => ({
@@ -178,17 +194,7 @@ vi.mock('./hooks', () => ({
     isLoading: false,
   }),
   useUserGroups: () => ({
-    data: [
-      {
-        workspace_user_groups: {
-          ending_date: null,
-          id: 'group-1',
-          name: 'Group 1',
-          sessions: ['2026-07-05'],
-          starting_date: '2026-07-01',
-        },
-      },
-    ],
+    data: testState.userGroups,
     isLoading: false,
   }),
   useUserLinkedPromotions: () => ({ data: [] }),
@@ -262,9 +268,14 @@ function renderSubscriptionInvoice(
 describe('SubscriptionInvoice checkout defaults', () => {
   beforeEach(() => {
     testState.InvoicePaymentSettings.mockClear();
+    testState.SubscriptionAttendanceSummary.mockClear();
     testState.useCategories.mockClear();
     testState.useWallets.mockClear();
     testState.productSelectionInjected = false;
+    testState.month = '2026-07';
+    testState.setMonth.mockClear();
+    testState.userGroups[0]!.workspace_user_groups.ending_date = null;
+    testState.userGroups[0]!.workspace_user_groups.sessions = ['2026-07-05'];
     testState.products[0]!.finance_category_id = null;
     testState.wallets = [];
     testState.categories = [];
@@ -328,4 +339,29 @@ describe('SubscriptionInvoice checkout defaults', () => {
       )
     );
   });
+
+  it('keeps an advance month selected after the group schedule end', async () => {
+    testState.month = '2026-09';
+    testState.userGroups[0]!.workspace_user_groups.ending_date = '2026-08-31';
+    testState.userGroups[0]!.workspace_user_groups.sessions = [
+      '2026-07-05',
+      '2026-08-05',
+      '2026-09-05',
+    ];
+
+    renderSubscriptionInvoice();
+
+    await waitFor(() =>
+      expect(testState.SubscriptionAttendanceSummary).toHaveBeenCalledWith(
+        expect.objectContaining({
+          availableMonths: expect.arrayContaining([
+            expect.objectContaining({ value: '2026-09' }),
+          ]),
+          selectedMonth: '2026-09',
+        })
+      )
+    );
+    expect(testState.setMonth).not.toHaveBeenCalledWith('2026-07');
+    expect(testState.setMonth).not.toHaveBeenCalledWith('2026-08');
+  });
 });

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

@@ -728,30 +728,22 @@ export function SubscriptionInvoice({
     }
     lastMonthSyncRef.current = null;
 
-    const { earliestStart, latestEnd } = getGroupsDateRange(
-      userGroups,
-      selectedGroupIds
-    );
+    const { earliestStart } = getGroupsDateRange(userGroups, selectedGroupIds);
 
-    if (!earliestStart || !latestEnd) return;
+    if (!earliestStart) return;
 
     const currentMonth = getMonthStartDate(selectedMonth);
     if (Number.isNaN(currentMonth.getTime())) return;
 
     const earliestMonthStart = getMonthStartDate(earliestStart);
-    const latestMonthStart = getMonthStartDate(latestEnd);
 
-    if (currentMonth < earliestMonthStart || currentMonth > latestMonthStart) {
+    if (currentMonth < earliestMonthStart) {
       // Only correct once per groups-selection to avoid update loops
       if (lastValidatedKeyRef.current === monthValidationKey) return;
       lastValidatedKeyRef.current = monthValidationKey;
 
       const now = getCurrentBillingDate(workspaceTimezone);
-      let defaultMonth: Date;
-
-      if (now >= earliestStart && now <= latestEnd) defaultMonth = now;
-      else if (now > latestEnd) defaultMonth = latestEnd;
-      else defaultMonth = earliestStart;
+      const defaultMonth = now >= earliestStart ? now : earliestStart;
 
       const nextMonth = formatMonthValue(defaultMonth);
       if (nextMonth !== selectedMonth) {

package/src/components/ui/finance/invoices/utils.test.ts

@@ -233,7 +233,7 @@ describe('subscription invoice coverage', () => {
     ).toBe(true);
   });
 
-  it('generates prepaid future month options capped by group ending dates', () => {
+  it('keeps future billing months available after a group ending date', () => {
     const groups = [
       {
         workspace_user_groups: {
@@ -247,10 +247,11 @@ describe('subscription invoice coverage', () => {
     ] satisfies UserGroup[];
 
     expect(
-      getAvailableMonths(groups, [groupId], [], 'en-US', '2026-06', 12).map(
-        (month) => month.value
-      )
-    ).toEqual(['2026-06', '2026-07', '2026-08']);
+      getAvailableMonths(groups, [groupId], [], 'en-US', '2026-06', 3, {
+        now: new Date(2026, 5, 15),
+        workspaceTimezone: 'UTC',
+      }).map((month) => month.value)
+    ).toEqual(['2026-06', '2026-07', '2026-08', '2026-09']);
   });
 
   it('skips paid months and uses scheduled sessions for future prepaid quantities', () => {

package/src/components/ui/finance/invoices/utils.ts

@@ -524,7 +524,9 @@ export const getAvailableMonths = (
       ? getMonthStartDate(selectedMonthFallback)
       : currentMonthStart;
   const resolvedRangeEnd =
-    futureMonthHorizon > 0 && !latestEnd ? futureHorizonEnd : resolvedLatestEnd;
+    futureMonthHorizon > 0 && futureHorizonEnd > resolvedLatestEnd
+      ? futureHorizonEnd
+      : resolvedLatestEnd;
 
   const months: AvailableMonthOption[] = [];
   const currentDate = new Date(earliestStart);

package/src/components/ui/finance/transactions/columns.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import type { ColumnDef } from '@tuturuuu/ui/custom/tables/data-table';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { transactionColumns } from './columns';
 
 vi.mock('next-intl', () => ({
@@ -82,6 +83,10 @@ describe('transactionColumns', () => {
       'finance-confidential-mode=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;Secure';
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('masks the amount column when finance numbers are globally hidden', () => {
     render(<TransactionAmountCell amount={123} />);
 
@@ -116,4 +121,23 @@ describe('transactionColumns', () => {
     expect(screen.getByText('Cash')).toBeVisible();
     expect(screen.getByText('Food & Beverage')).toBeVisible();
   });
+
+  it('keeps server-rendered transaction dates stable as time advances', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime('2026-08-31T00:59:00.000Z');
+
+    const transaction = {
+      taken_at: '2026-08-31T00:00:00.000Z',
+    };
+    const firstRender = renderToString(
+      <TransactionColumnCell accessorKey="taken_at" original={transaction} />
+    );
+
+    vi.setSystemTime('2026-08-31T02:01:00.000Z');
+    const laterRender = renderToString(
+      <TransactionColumnCell accessorKey="taken_at" original={transaction} />
+    );
+
+    expect(laterRender).toBe(firstRender);
+  });
 });

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

@@ -12,6 +12,7 @@ import { formatCurrency } from '@tuturuuu/utils/format';
 import moment from 'moment';
 import 'moment/locale/vi';
 import { useLocale } from 'next-intl';
+import { useSyncExternalStore } from 'react';
 import { DataTableColumnHeader } from '../../custom/tables/data-table-column-header';
 import {
   FINANCE_HIDDEN_AMOUNT,
@@ -27,6 +28,44 @@ interface TransactionExtraData {
   isPersonalWorkspace?: boolean;
 }
 
+const subscribeToHydration = () => () => undefined;
+const getHydratedSnapshot = () => true;
+const getServerSnapshot = () => false;
+
+function TransactionDateCell({
+  includeTime = false,
+  locale,
+  value,
+}: {
+  includeTime?: boolean;
+  locale: string;
+  value: unknown;
+}) {
+  const isHydrated = useSyncExternalStore(
+    subscribeToHydration,
+    getHydratedSnapshot,
+    getServerSnapshot
+  );
+
+  if (!value) return <div className="min-w-32">-</div>;
+
+  const localDate = moment(value);
+  if (!localDate.isValid()) return <div className="min-w-32">-</div>;
+
+  const format = includeTime ? 'DD/MM/YYYY, HH:mm:ss' : 'DD/MM/YYYY';
+  const absoluteDate = isHydrated
+    ? localDate.locale(locale).format(format)
+    : moment.utc(value).locale(locale).format(format);
+
+  return (
+    <div className="min-w-32">
+      {isHydrated && !includeTime
+        ? `${localDate.locale(locale).fromNow()}, ${absoluteDate}`
+        : absoluteDate}
+    </div>
+  );
+}
+
 function TransactionAmountCell({
   amount,
   currency,
@@ -265,15 +304,7 @@ export const transactionColumns = ({
         />
       ),
       cell: ({ row }) => (
-        <div className="min-w-32">
-          {row.getValue('taken_at')
-            ? `${moment(row.getValue('taken_at')).locale(locale).fromNow()}, ${moment(
-                row.getValue('taken_at')
-              )
-                .locale(locale)
-                .format('DD/MM/YYYY')}`
-            : '-'}
-        </div>
+        <TransactionDateCell locale={locale} value={row.getValue('taken_at')} />
       ),
     },
     {
@@ -286,13 +317,11 @@ export const transactionColumns = ({
         />
       ),
       cell: ({ row }) => (
-        <div className="min-w-32">
-          {row.getValue('created_at')
-            ? moment(row.getValue('created_at'))
-                .locale(locale)
-                .format('DD/MM/YYYY, HH:mm:ss')
-            : '-'}
-        </div>
+        <TransactionDateCell
+          includeTime
+          locale={locale}
+          value={row.getValue('created_at')}
+        />
       ),
     },
     {

package/src/components/ui/legacy/calendar/agenda-view.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { CalendarX2, Clock, MapPin, Sun } from '@tuturuuu/icons';
+import { CalendarX2, Clock, MapPin, Plus, Search, Sun } from '@tuturuuu/icons';
 import type { Workspace } from '@tuturuuu/types';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
@@ -17,16 +17,27 @@ import {
   isYesterday,
   startOfDay,
 } from 'date-fns';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 import { useTranslations } from 'next-intl';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import {
   formatLunarDay,
   getLunarDate,
   getLunarHolidayName,
   isSpecialLunarDate,
 } from '../../../../lib/lunar-calendar';
+import { Button } from '../../button';
+import { Input } from '../../input';
+import { calendarDraftDate } from './calendar-period';
+import { useCalendarSettings } from './settings/settings-context';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
 
 interface AgendaViewProps {
+  readOnly?: boolean;
   startDate: Date;
   workspace?: Workspace;
   locale?: string;
@@ -173,7 +184,7 @@ function EventCard({
       {/* Content */}
       <div className="min-w-0 flex-1">
         <span className="line-clamp-1 font-medium text-foreground text-sm leading-tight">
-          {event.title || 'Untitled event'}
+          {event.title || t('views.untitled_event')}
         </span>
 
         {(event.location || (!isAllDay && event.description)) && (
@@ -258,7 +269,7 @@ function DateHeader({
             today ? 'text-primary-foreground/70' : 'text-muted-foreground'
           )}
         >
-          {format(date, 'EEE')}
+          {date.toLocaleDateString(locale, { weekday: 'short' })}
         </span>
       </div>
 
@@ -271,7 +282,11 @@ function DateHeader({
               today ? 'text-primary' : 'text-foreground'
             )}
           >
-            {format(date, 'EEEE, MMMM d')}
+            {date.toLocaleDateString(locale, {
+              weekday: 'long',
+              month: 'long',
+              day: 'numeric',
+            })}
           </span>
           {relativeLabel && (
             <span
@@ -313,11 +328,24 @@ function DateHeader({
 
 export const AgendaView = ({
   startDate,
+  readOnly = false,
   locale = 'en',
   daysToShow = 30,
 }: AgendaViewProps) => {
   const t = useTranslations('calendar');
-  const { getCurrentEvents, openModal } = useCalendar();
+  const {
+    getCurrentEvents,
+    openModal,
+    addEmptyEvent,
+    readOnly: providerReadOnly,
+  } = useCalendar();
+  const { settings } = useCalendarSettings();
+  const cannotCreate = readOnly || providerReadOnly;
+  const createEvent = () => {
+    if (cannotCreate) return;
+    addEmptyEvent(calendarDraftDate(startDate, settings?.timezone?.timezone));
+  };
+  const [query, setQuery] = useState('');
   const { timeFormat: rawTimeFormat } = useCalendarPreferences();
   const { value: showLunar } = useUserBooleanConfig(
     'SHOW_LUNAR_CALENDAR',
@@ -331,7 +359,11 @@ export const AgendaView = ({
 
     for (let i = 0; i < daysToShow; i++) {
       const currentDate = addDays(startOfDay(startDate), i);
-      const events = getCurrentEvents(currentDate);
+      const events = getCurrentEvents(currentDate).filter((event) =>
+        `${event.title ?? ''} ${event.location ?? ''}`
+          .toLocaleLowerCase(locale)
+          .includes(query.toLocaleLowerCase(locale))
+      );
 
       if (events.length > 0) {
         const sortedEvents = [...events].sort((a, b) => {
@@ -348,50 +380,110 @@ export const AgendaView = ({
     }
 
     return groups;
-  }, [startDate, daysToShow, getCurrentEvents]);
-
-  if (groupedEvents.length === 0) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center p-8 text-center">
-        <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted">
-          <CalendarX2 className="h-8 w-8 text-muted-foreground" />
-        </div>
-        <h3 className="mb-1 font-semibold text-lg">
-          {t('agenda_empty_title')}
-        </h3>
-        <p className="max-w-xs text-muted-foreground text-sm">
-          {t('agenda_empty_subtitle', { days: daysToShow })}
-        </p>
-      </div>
-    );
-  }
+  }, [startDate, daysToShow, getCurrentEvents, query, locale]);
 
+  const uniqueEvents = new Set(
+    groupedEvents.flatMap((group) => group.events.map((event) => event.id))
+  ).size;
   return (
-    <div className="h-full overflow-auto">
-      <div className="mx-auto max-w-2xl space-y-1 p-4">
-        {groupedEvents.map(({ date, events }) => (
-          <div key={date.toISOString()}>
-            <DateHeader
-              date={date}
-              eventCount={events.length}
-              locale={locale}
-              showLunar={showLunar}
-              t={t as any}
-            />
-            <div className="space-y-1 pb-4 pl-14">
-              {events.map((event) => (
-                <EventCard
-                  key={event.id}
-                  event={event}
-                  timePattern={timePattern}
-                  timeFormat={timeFormat}
-                  t={t as any}
-                  onOpen={openModal}
-                />
-              ))}
+    <div
+      className="h-full overflow-auto bg-background"
+      data-calendar-view="agenda"
+    >
+      <div className="mx-auto max-w-4xl px-4 py-5 sm:px-8">
+        <div className="mb-6 flex flex-wrap items-end justify-between gap-4 border-b pb-5">
+          <div className="space-y-1">
+            <h2 className="font-semibold text-xl tracking-tight">
+              {t('agenda')}
+            </h2>
+            <p className="text-muted-foreground text-sm tabular-nums">
+              {startDate.toLocaleDateString(locale, {
+                month: 'short',
+                day: 'numeric',
+              })}{' '}
+              —{' '}
+              {addDays(startDate, daysToShow - 1).toLocaleDateString(locale, {
+                month: 'short',
+                day: 'numeric',
+                year: 'numeric',
+              })}
+            </p>
+            <p className="text-sm">
+              {t('agenda_event_count', { count: uniqueEvents })}
+            </p>
+          </div>
+          <div className="flex w-full items-center gap-2 sm:w-auto">
+            <div className="relative flex-1">
+              <Search className="absolute top-2.5 left-3 size-4 text-muted-foreground" />
+              <Input
+                className="pl-9"
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder={t('views.search_events')}
+                aria-label={t('views.search_events')}
+              />
             </div>
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label={t('views.create_event')}
+              disabled={cannotCreate}
+              onClick={createEvent}
+            >
+              <Plus className="size-4" />
+            </Button>
           </div>
-        ))}
+        </div>
+        {groupedEvents.length ? (
+          groupedEvents.map(({ date, events }) => (
+            <section key={date.toISOString()} className="relative mb-5">
+              <DateHeader
+                date={date}
+                eventCount={events.length}
+                locale={locale}
+                showLunar={showLunar}
+                t={t}
+              />
+              <div className="ml-5 space-y-2 border-l pb-2 pl-4 sm:ml-5 sm:pl-8">
+                {events.map((event) => (
+                  <EventCard
+                    key={event.id}
+                    event={event}
+                    timePattern={timePattern}
+                    timeFormat={timeFormat}
+                    t={t}
+                    onOpen={openModal}
+                  />
+                ))}
+              </div>
+            </section>
+          ))
+        ) : (
+          <div className="flex min-h-64 flex-col items-center justify-center gap-3 text-center">
+            <CalendarX2 className="size-8 text-muted-foreground" />
+            <h3 className="font-semibold">
+              {t(query ? 'views.no_matches' : 'agenda_empty_title')}
+            </h3>
+            {!query && (
+              <p className="max-w-sm text-muted-foreground text-sm">
+                {t('agenda_empty_subtitle', { days: daysToShow })}
+              </p>
+            )}
+            {query ? (
+              <Button variant="outline" onClick={() => setQuery('')}>
+                {t('views.clear_search')}
+              </Button>
+            ) : (
+              <Button
+                variant="outline"
+                disabled={cannotCreate}
+                onClick={createEvent}
+              >
+                {t('views.create_event')}
+              </Button>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );