@tuturuuu/ui 0.13.0 → 0.16.0

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

@@ -1,4 +1,30 @@
 import type { Database } from '@tuturuuu/types';
+import {
+  formatMonthLabel,
+  formatMonthValue,
+  getCoverageMonths,
+  getCurrentMonthStartDate,
+  getMonthStartDate,
+  parseLocalCalendarDate,
+} from './civil-month';
+
+export {
+  addMonthsToMonthValue,
+  formatCoverageRangeLabel,
+  formatMonthLabel,
+  formatMonthValue,
+  getCoverageEndMonthValue,
+  getCoverageMonths,
+  getCoverageValidUntilMonthValue,
+  getCurrentBillingDate,
+  getCurrentMonthStartDate,
+  getCurrentMonthValue,
+  getMonthStartDate,
+  MAX_PREPAID_MONTH_COUNT,
+  PREPAID_MONTH_OPTION_HORIZON,
+  parseLocalCalendarDate,
+  resolveBillingTimezone,
+} from './civil-month';
 
 type AttendanceRecord = {
   status: string;
@@ -67,134 +93,25 @@ export const getLinkedFinanceCategorySelection = (
   };
 };
 
-const MONTH_VALUE_PATTERN = /^(\d{4})-(\d{2})$/;
-const DATE_VALUE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
-export const MAX_PREPAID_MONTH_COUNT = 12;
-export const PREPAID_MONTH_OPTION_HORIZON = 12;
-
-export const parseLocalCalendarDate = (
-  value: string | Date | null | undefined
-): Date => {
-  if (!value) {
-    return new Date(Number.NaN);
-  }
-
-  if (value instanceof Date) {
-    return new Date(value.getTime());
-  }
-
-  const monthMatch = MONTH_VALUE_PATTERN.exec(value);
-  if (monthMatch) {
-    const [, year, month] = monthMatch;
-    return new Date(Number(year), Number(month) - 1, 1);
-  }
-
-  const dateMatch = DATE_VALUE_PATTERN.exec(value);
-  if (dateMatch) {
-    const [, year, month, day] = dateMatch;
-    return new Date(Number(year), Number(month) - 1, Number(day));
-  }
-
-  return new Date(value);
-};
-
-export const getMonthStartDate = (
-  value: string | Date | null | undefined
-): Date => {
-  const date = parseLocalCalendarDate(value);
-  if (Number.isNaN(date.getTime())) {
-    return date;
-  }
-
-  return new Date(date.getFullYear(), date.getMonth(), 1);
-};
-
-export const formatMonthValue = (date: Date): string =>
-  `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
-
-export const formatMonthLabel = (month: string, locale: string): string => {
-  const date = getMonthStartDate(month);
-  if (Number.isNaN(date.getTime())) {
-    return month;
-  }
-
-  return date.toLocaleDateString(locale, {
-    year: 'numeric',
-    month: 'long',
-  });
-};
-
-export const addMonthsToMonthValue = (
-  month: string,
-  monthOffset: number
-): string => {
-  const date = getMonthStartDate(month);
-  if (Number.isNaN(date.getTime())) return month;
-
-  date.setMonth(date.getMonth() + monthOffset);
-  return formatMonthValue(date);
-};
-
-export const normalizePrepaidMonthCount = (
-  value: number | null | undefined
-): number => {
-  if (!Number.isFinite(value) || !value) return 1;
-
-  return Math.min(MAX_PREPAID_MONTH_COUNT, Math.max(1, Math.trunc(value)));
-};
-
-export const getCoverageMonths = (
-  selectedMonth: string,
-  prepaidMonthCount = 1
-): string[] => {
-  const monthCount = normalizePrepaidMonthCount(prepaidMonthCount);
-  const startMonth = getMonthStartDate(selectedMonth);
-  if (Number.isNaN(startMonth.getTime())) return [];
-
-  return Array.from({ length: monthCount }, (_, index) => {
-    const date = new Date(startMonth);
-    date.setMonth(date.getMonth() + index);
-    return formatMonthValue(date);
-  });
-};
-
-export const getCoverageEndMonthValue = (
-  selectedMonth: string,
-  prepaidMonthCount = 1
-): string => {
-  const coverageMonths = getCoverageMonths(selectedMonth, prepaidMonthCount);
-  return coverageMonths[coverageMonths.length - 1] ?? selectedMonth;
-};
-
-export const getCoverageValidUntilMonthValue = (
-  selectedMonth: string,
-  prepaidMonthCount = 1
-): string => addMonthsToMonthValue(selectedMonth, prepaidMonthCount);
-
-export const formatCoverageRangeLabel = ({
-  locale,
-  prepaidMonthCount,
-  selectedMonth,
+export const resolveSubscriptionInvoiceCategoryId = ({
+  defaultCategoryId,
+  items,
 }: {
-  locale: string;
-  prepaidMonthCount?: number | null;
-  selectedMonth: string;
-}): string => {
-  const coverageMonths = getCoverageMonths(
-    selectedMonth,
-    prepaidMonthCount ?? 1
-  );
-  const firstMonth = coverageMonths[0];
-  const lastMonth = coverageMonths[coverageMonths.length - 1];
+  defaultCategoryId?: string | null;
+  items: FinanceCategoryLinkedItem[];
+}) => {
+  const linkedFinanceCategorySelection =
+    getLinkedFinanceCategorySelection(items);
+
+  if (linkedFinanceCategorySelection.hasSingleCategory) {
+    return linkedFinanceCategorySelection.categoryId ?? '';
+  }
 
-  if (!firstMonth || !lastMonth || firstMonth === lastMonth) {
-    return formatMonthLabel(selectedMonth, locale);
+  if (linkedFinanceCategorySelection.hasMixedCategories) {
+    return '';
   }
 
-  return `${formatMonthLabel(firstMonth, locale)} - ${formatMonthLabel(
-    lastMonth,
-    locale
-  )}`;
+  return defaultCategoryId ?? '';
 };
 
 const getComparableTimestamp = (value: string | null | undefined): number => {
@@ -532,7 +449,6 @@ export const getSessionsUntilMonth = (
   }
 };
 
-/** Date range (earliest start, latest end) for selected groups. */
 export type GroupsDateRange = {
   earliestStart: Date | null;
   latestEnd: Date | null;
@@ -583,17 +499,20 @@ export const getAvailableMonths = (
   latestInvoices: SubscriptionCoverageInvoice[],
   locale: string,
   selectedMonthFallback: string | null = null,
-  futureMonthHorizon = 0
+  futureMonthHorizon = 0,
+  options: {
+    now?: Date;
+    workspaceTimezone?: string | null;
+  } = {}
 ): AvailableMonthOption[] => {
   if (groupIds.length === 0) return [];
   const { earliestStart, latestEnd } = getGroupsDateRange(userGroups, groupIds);
   if (!earliestStart) return [];
 
-  const currentMonthStart = (() => {
-    const date = new Date();
-    date.setDate(1);
-    return date;
-  })();
+  const currentMonthStart = getCurrentMonthStartDate(
+    options.workspaceTimezone,
+    options.now
+  );
   const futureHorizonEnd = new Date(currentMonthStart);
   futureHorizonEnd.setMonth(
     futureHorizonEnd.getMonth() + Math.max(0, futureMonthHorizon)
@@ -648,6 +567,7 @@ export const getBillableQuantityForGroupRange = ({
   now = new Date(),
   prepaidMonthCount = 1,
   selectedMonth,
+  workspaceTimezone,
   useAttendanceBased,
   userAttendance,
   userGroups,
@@ -657,11 +577,12 @@ export const getBillableQuantityForGroupRange = ({
   now?: Date;
   prepaidMonthCount?: number;
   selectedMonth: string;
+  workspaceTimezone?: string | null;
   useAttendanceBased: boolean;
   userAttendance: AttendanceRecord[];
   userGroups: UserGroup[];
 }): number => {
-  const currentMonthStart = getMonthStartDate(now);
+  const currentMonthStart = getCurrentMonthStartDate(workspaceTimezone, now);
   const coverageMonths = getCoverageMonths(selectedMonth, prepaidMonthCount);
 
   return coverageMonths.reduce((total, month) => {
@@ -708,6 +629,7 @@ export const getBillableQuantityMapForGroupsRange = ({
   now,
   prepaidMonthCount = 1,
   selectedMonth,
+  workspaceTimezone,
   useAttendanceBased,
   userAttendance,
   userGroups,
@@ -717,6 +639,7 @@ export const getBillableQuantityMapForGroupsRange = ({
   now?: Date;
   prepaidMonthCount?: number;
   selectedMonth: string;
+  workspaceTimezone?: string | null;
   useAttendanceBased: boolean;
   userAttendance: AttendanceRecord[];
   userGroups: UserGroup[];
@@ -730,6 +653,7 @@ export const getBillableQuantityMapForGroupsRange = ({
         now,
         prepaidMonthCount,
         selectedMonth,
+        workspaceTimezone,
         useAttendanceBased,
         userAttendance,
         userGroups,
@@ -737,11 +661,9 @@ export const getBillableQuantityMapForGroupsRange = ({
     ])
   );
 
-/** Days before valid_until to consider "expiring soon" */
 const EXPIRING_SOON_DAYS = 14;
 
 export type GroupPaymentStatus = 'active' | 'expiringSoon' | 'expired';
-
 export function getGroupPaymentStatus(
   group: WorkspaceUserGroup | null,
   latestInvoice:

package/src/components/ui/resizable.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { normalizeLegacyPanelSize } from './resizable';
+
+describe('normalizeLegacyPanelSize', () => {
+  it('preserves the shared wrapper numeric percentage contract', () => {
+    expect(normalizeLegacyPanelSize(38)).toBe('38%');
+    expect(normalizeLegacyPanelSize(0)).toBe('0%');
+  });
+
+  it('leaves explicitly unitized sizes unchanged', () => {
+    expect(normalizeLegacyPanelSize('20rem')).toBe('20rem');
+    expect(normalizeLegacyPanelSize('38%')).toBe('38%');
+    expect(normalizeLegacyPanelSize(undefined)).toBeUndefined();
+  });
+});

package/src/components/ui/resizable.tsx

@@ -16,6 +16,13 @@ interface ResizablePanelGroupProps
   onLayout?: (sizes: number[]) => void;
 }
 
+export function normalizeLegacyPanelSize(size: number | string | undefined) {
+  // react-resizable-panels v3 and the shadcn wrapper treated numeric values as
+  // percentages. v4 treats them as pixels, so preserve the shared wrapper's
+  // established contract while still allowing explicit CSS units.
+  return typeof size === 'number' ? `${size}%` : size;
+}
+
 function ResizablePanelGroup({
   className,
   direction,
@@ -26,11 +33,11 @@ function ResizablePanelGroup({
     <Group
       data-slot="resizable-panel-group"
       orientation={direction}
-      onLayoutChange={
+      onLayoutChanged={
         onLayout
           ? (layout) => {
-              // Convert Layout (Record<string, number>) to number[] for backward compatibility
-              // Layout values are already percentages (0-100)
+              // Layout values are flex percentages (0-100). Preserve the
+              // wrapper's array callback for existing consumers.
               const sizes = Object.values(layout);
               onLayout(sizes);
             }
@@ -45,8 +52,23 @@ function ResizablePanelGroup({
   );
 }
 
-function ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>) {
-  return <Panel data-slot="resizable-panel" {...props} />;
+function ResizablePanel({
+  collapsedSize,
+  defaultSize,
+  maxSize,
+  minSize,
+  ...props
+}: React.ComponentProps<typeof Panel>) {
+  return (
+    <Panel
+      collapsedSize={normalizeLegacyPanelSize(collapsedSize)}
+      data-slot="resizable-panel"
+      defaultSize={normalizeLegacyPanelSize(defaultSize)}
+      maxSize={normalizeLegacyPanelSize(maxSize)}
+      minSize={normalizeLegacyPanelSize(minSize)}
+      {...props}
+    />
+  );
 }
 
 function ResizableHandle({
@@ -60,7 +82,7 @@ function ResizableHandle({
     <Separator
       data-slot="resizable-handle"
       className={cn(
-        'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        'relative flex w-px cursor-col-resize items-center justify-center bg-border transition-colors after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 hover:bg-primary/60 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:cursor-row-resize data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-3 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
         className
       )}
       {...props}

package/src/components/ui/tu-do/boards/boardId/board-column.tsx

@@ -182,6 +182,7 @@ interface BoardColumnProps {
   specialPinned?: boolean;
   specialStickyOffset?: string;
   onSpecialPinnedChange?: (pinned: boolean) => void;
+  onHoverTaskList?: (listId: string) => void;
   readOnly?: boolean;
 }
 
@@ -214,6 +215,7 @@ export function BoardColumn({
   specialPinned = false,
   specialStickyOffset,
   onSpecialPinnedChange,
+  onHoverTaskList,
   readOnly = false,
 }: BoardColumnProps) {
   const t = useTranslations('common');
@@ -530,6 +532,7 @@ export function BoardColumn({
         data-kanban-pinned-special={specialStickyOffset ? 'true' : undefined}
         data-kanban-column-id={column.id}
         data-kanban-real-column={isExternalStaging ? undefined : 'true'}
+        onPointerEnter={() => onHoverTaskList?.(column.id)}
         className={cn(
           'group flex h-full w-14 shrink-0 snap-start flex-col items-center rounded-xl border border-dashed transition-all duration-200',
           'touch-none select-none overflow-hidden hover:shadow-md',
@@ -583,6 +586,7 @@ export function BoardColumn({
       data-kanban-pinned-special={specialStickyOffset ? 'true' : undefined}
       data-kanban-column-id={column.id}
       data-kanban-real-column={isExternalStaging ? undefined : 'true'}
+      onPointerEnter={() => onHoverTaskList?.(column.id)}
       className={cn(
         'group flex h-full w-[var(--kanban-column-width)] shrink-0 snap-start flex-col rounded-xl transition-all duration-200 last:snap-end',
         'touch-none select-none',

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/__tests__/bulk-mutations-move.test.tsx

@@ -187,4 +187,66 @@ describe('bulk move mutations', () => {
       intensity: 1.2,
     });
   });
+
+  it('bulk-moves selected external tasks to done through terminal personal placement', async () => {
+    const doneList = {
+      ...targetList,
+      id: 'done-list',
+      name: 'Done',
+      status: 'done',
+    } as unknown as TaskList;
+
+    queryClient.setQueryData(['tasks', 'board-1'], [localTask, externalTask]);
+    mockUpsertCurrentUserTaskPersonalPlacement.mockResolvedValueOnce({
+      task: {
+        ...externalTask,
+        list_id: 'done-list',
+        personal_list_id: 'done-list',
+        source_list_id: 'source-done-list',
+        source_list_status: 'done',
+      },
+    });
+
+    const { result } = renderHook(
+      () =>
+        useBulkOperations({
+          queryClient,
+          wsId: 'personal-ws',
+          boardId: 'board-1',
+          selectedTasks: new Set(['local-task', 'external-task']),
+          columns: [sourceList, doneList],
+          workspaceLabels: [],
+          workspaceProjects: [],
+          workspaceMembers: [],
+          setBulkWorking: vi.fn(),
+          clearSelection: vi.fn(),
+          setBulkDeleteOpen: vi.fn(),
+        }),
+      { wrapper }
+    );
+
+    await act(async () => {
+      await result.current.bulkMoveToList('done-list', 'Done');
+    });
+
+    expect(mockBulkWorkspaceTasks).toHaveBeenCalledWith(
+      'personal-ws',
+      {
+        taskIds: ['local-task'],
+        operation: {
+          type: 'move_to_list',
+          listId: 'done-list',
+        },
+      },
+      expect.anything()
+    );
+    expect(mockUpsertCurrentUserTaskPersonalPlacement).toHaveBeenCalledWith(
+      'external-task',
+      expect.objectContaining({
+        personal_board_id: 'board-1',
+        personal_list_id: 'done-list',
+        terminal_status: 'done',
+      })
+    );
+  });
 });

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/auto-scroll.test.ts

@@ -0,0 +1,118 @@
+import type { DragMoveEvent } from '@dnd-kit/core';
+import { describe, expect, it } from 'vitest';
+import {
+  getKanbanDragAutoScrollPointerX,
+  getKanbanEdgeAutoScrollAmount,
+} from './auto-scroll';
+
+const rect = {
+  left: 100,
+  right: 500,
+};
+
+function createDragMoveEvent({
+  deltaX = 0,
+  initialLeft = 200,
+  pointerStartX,
+  translatedLeft = initialLeft,
+  width = 80,
+}: {
+  deltaX?: number;
+  initialLeft?: number;
+  pointerStartX?: number;
+  translatedLeft?: number | null;
+  width?: number;
+}) {
+  return {
+    active: {
+      rect: {
+        current: {
+          initial: {
+            left: initialLeft,
+            width,
+          },
+          translated:
+            translatedLeft === null
+              ? null
+              : {
+                  left: translatedLeft,
+                  width,
+                },
+        },
+      },
+    },
+    activatorEvent:
+      pointerStartX === undefined
+        ? ({ type: 'keydown' } as Event)
+        : ({ clientX: pointerStartX } as unknown as Event),
+    delta: {
+      x: deltaX,
+      y: 0,
+    },
+  } as unknown as DragMoveEvent;
+}
+
+describe('getKanbanEdgeAutoScrollAmount', () => {
+  it('scrolls left when the drag center is near the left edge', () => {
+    expect(
+      getKanbanEdgeAutoScrollAmount(125, rect, {
+        threshold: 100,
+        speed: 10,
+        maxSpeed: 30,
+      })
+    ).toBeLessThan(0);
+  });
+
+  it('scrolls right when the drag center is near the right edge', () => {
+    expect(
+      getKanbanEdgeAutoScrollAmount(475, rect, {
+        threshold: 100,
+        speed: 10,
+        maxSpeed: 30,
+      })
+    ).toBeGreaterThan(0);
+  });
+
+  it('does nothing away from horizontal edges or without a drag center', () => {
+    expect(getKanbanEdgeAutoScrollAmount(300, rect)).toBe(0);
+    expect(getKanbanEdgeAutoScrollAmount(null, rect)).toBe(0);
+  });
+
+  it('uses pointer position for edge auto-scroll instead of card center', () => {
+    const pointerX = getKanbanDragAutoScrollPointerX(
+      createDragMoveEvent({
+        deltaX: 215,
+        pointerStartX: 260,
+        translatedLeft: 190,
+        width: 80,
+      })
+    );
+
+    expect(pointerX).toBe(475);
+    expect(
+      getKanbanEdgeAutoScrollAmount(pointerX, rect, {
+        threshold: 100,
+        speed: 10,
+        maxSpeed: 30,
+      })
+    ).toBeGreaterThan(0);
+    expect(
+      getKanbanEdgeAutoScrollAmount(230, rect, {
+        threshold: 100,
+        speed: 10,
+        maxSpeed: 30,
+      })
+    ).toBe(0);
+  });
+
+  it('falls back to the active card center without pointer coordinates', () => {
+    expect(
+      getKanbanDragAutoScrollPointerX(
+        createDragMoveEvent({
+          translatedLeft: 370,
+          width: 100,
+        })
+      )
+    ).toBe(420);
+  });
+});