@tuturuuu/ui 0.37.2 → 0.39.0

package/src/components/ui/finance/wallets/checkpoints/wallet-checkpoint-adjustment-dialog.tsx

@@ -29,7 +29,16 @@ import { toast } from '@tuturuuu/ui/sonner';
 import { Textarea } from '@tuturuuu/ui/textarea';
 import { formatCurrency } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+type ReconciliationRequest = {
+  wsId: string;
+  walletId: string;
+  checkpointId: string;
+  payload: { category_id?: string; description: string };
+  onCreated: () => void;
+  onOpenChange: (open: boolean) => void;
+};
 
 const NO_CATEGORY = 'none';
 
@@ -57,6 +66,10 @@ export function WalletCheckpointAdjustmentDialog({
   wsId: string;
 }) {
   const t = useTranslations('wallet-checkpoints');
+  const activeTarget = useRef({ wsId, walletId, checkpointId, open });
+  useLayoutEffect(() => {
+    activeTarget.current = { wsId, walletId, checkpointId, open };
+  }, [wsId, walletId, checkpointId, open]);
   const [categoryId, setCategoryId] = useState(NO_CATEGORY);
   const [description, setDescription] = useState(
     t('reconciliation_description', {
@@ -129,17 +142,28 @@ export function WalletCheckpointAdjustmentDialog({
     [checkedAt]
   );
   const mutation = useMutation({
-    mutationFn: () =>
-      createWalletCheckpointReconciliation(wsId, walletId, checkpointId, {
-        category_id: categoryId === NO_CATEGORY ? undefined : categoryId,
-        description,
-      }),
-    onSuccess: (result) => {
+    mutationFn: (request: ReconciliationRequest) =>
+      createWalletCheckpointReconciliation(
+        request.wsId,
+        request.walletId,
+        request.checkpointId,
+        request.payload
+      ),
+    onSuccess: (result, request) => {
+      // Invalidate the submitted target even if the dialog has since moved.
+      request.onCreated();
+      const current = activeTarget.current;
+      if (
+        !current.open ||
+        current.wsId !== request.wsId ||
+        current.walletId !== request.walletId ||
+        current.checkpointId !== request.checkpointId
+      )
+        return;
       toast.success(
         result.created ? t('reconciliation_created') : t('reconciliation_clean')
       );
-      onCreated();
-      onOpenChange(false);
+      request.onOpenChange(false);
     },
     onError: (error) => {
       toast.error(
@@ -208,7 +232,20 @@ export function WalletCheckpointAdjustmentDialog({
           </Button>
           <Button
             disabled={mutation.isPending || !categoryInitialized}
-            onClick={() => mutation.mutate()}
+            onClick={() =>
+              mutation.mutate({
+                wsId,
+                walletId,
+                checkpointId,
+                payload: {
+                  category_id:
+                    categoryId === NO_CATEGORY ? undefined : categoryId,
+                  description,
+                },
+                onCreated,
+                onOpenChange,
+              })
+            }
           >
             {mutation.isPending ? t('creating') : t('reconcile')}
           </Button>

package/src/components/ui/finance/wallets/checkpoints/wallet-checkpoints.test.tsx

@@ -1,5 +1,11 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import type { ReactElement, ReactNode } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { WalletCheckpointAdjustmentDialog } from './wallet-checkpoint-adjustment-dialog';
@@ -385,6 +391,94 @@ describe('wallet checkpoint UI', () => {
     });
   });
 
+  it('submits the category visible at click time despite a subsequent edit', async () => {
+    mocks.defaultReconciliationCategoryId = 'category-reconcile';
+    mocks.listTransactionCategories.mockResolvedValue([
+      { id: 'category-reconcile', name: 'Audit' },
+    ]);
+    renderWithQueryClient(
+      <WalletCheckpointAdjustmentDialog
+        wsId="ws-1"
+        walletId="wallet-1"
+        checkpointId="checkpoint-1"
+        walletName="Cash"
+        checkedAt="2026-06-11T10:00:00.000Z"
+        currency="USD"
+        variance={-12.34}
+        open
+        onOpenChange={vi.fn()}
+        onCreated={vi.fn()}
+      />
+    );
+    const select = screen.getByRole('combobox');
+    await waitFor(() => expect(select).toHaveValue('category-reconcile'));
+    const button = screen.getByRole('button', { name: 'reconcile' });
+    await act(async () => {
+      fireEvent.click(button);
+      fireEvent.change(select, { target: { value: 'none' } });
+    });
+    await waitFor(() =>
+      expect(mocks.createWalletCheckpointReconciliation).toHaveBeenCalledWith(
+        'ws-1',
+        'wallet-1',
+        'checkpoint-1',
+        expect.objectContaining({ category_id: 'category-reconcile' })
+      )
+    );
+  });
+
+  it('keeps a queued reconciliation and completion bound to its original target', async () => {
+    const oldCreated = vi.fn();
+    const newCreated = vi.fn();
+    const oldClose = vi.fn();
+    const newClose = vi.fn();
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    const dialog = (
+      wallet: string,
+      checkpoint: string,
+      created: () => void,
+      close: (open: boolean) => void
+    ) => (
+      <QueryClientProvider client={client}>
+        <WalletCheckpointAdjustmentDialog
+          wsId="ws-1"
+          walletId={wallet}
+          checkpointId={checkpoint}
+          walletName="Cash"
+          checkedAt="2026-06-11T10:00:00.000Z"
+          currency="USD"
+          variance={-12.34}
+          open
+          onOpenChange={close}
+          onCreated={created}
+        />
+      </QueryClientProvider>
+    );
+    const view = render(
+      dialog('wallet-1', 'checkpoint-1', oldCreated, oldClose)
+    );
+    const button = screen.getByRole('button', { name: 'reconcile' });
+    await waitFor(() => expect(button).not.toBeDisabled());
+    await act(async () => {
+      fireEvent.click(button);
+      view.rerender(dialog('wallet-2', 'checkpoint-2', newCreated, newClose));
+    });
+    await waitFor(() =>
+      expect(mocks.createWalletCheckpointReconciliation).toHaveBeenCalledWith(
+        'ws-1',
+        'wallet-1',
+        'checkpoint-1',
+        expect.any(Object)
+      )
+    );
+    await waitFor(() => expect(oldCreated).toHaveBeenCalledOnce());
+    expect(newCreated).not.toHaveBeenCalled();
+    expect(oldClose).not.toHaveBeenCalled();
+    expect(newClose).not.toHaveBeenCalled();
+  });
+
   it('submits no reconciliation category after clearing the configured default', async () => {
     mocks.defaultReconciliationCategoryId = 'category-reconcile';
     mocks.listTransactionCategories.mockResolvedValue([

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

@@ -27,6 +27,7 @@ import {
 import { Button } from '../../button';
 import { Input } from '../../input';
 import { calendarDraftDate } from './calendar-period';
+import { pastEventTreatment } from './past-event-treatment';
 import { useCalendarSettings } from './settings/settings-context';
 
 dayjs.extend(utc);
@@ -72,6 +73,7 @@ function EventCard({
   onOpen: (id: string) => void;
 }) {
   const { settings } = useCalendarSettings();
+  const { preservePastEventOpacity } = useCalendar();
   const isAllDay = isAllDayEvent(event);
 
   return (
@@ -80,7 +82,8 @@ function EventCard({
       onClick={() => onOpen(event.id)}
       style={calendarEventStyle(event)}
       className={cn(
-        'group flex w-full cursor-pointer items-start gap-3 rounded-lg border-l-[3px] px-3 py-2.5 text-left transition-colors hover:ring-1 hover:ring-current'
+        'group relative flex w-full cursor-pointer items-start gap-3 rounded-lg border-l-[3px] px-3 py-2.5 text-left transition-colors hover:ring-1 hover:ring-current',
+        pastEventTreatment(event, preservePastEventOpacity)
       )}
     >
       {/* Time column */}