@tuturuuu/ui 0.37.2 → 0.39.0

package/src/components/ui/custom/workspace-picker-content.tsx

@@ -3,6 +3,7 @@
 import { ArrowLeft, Eye, EyeOff, Plus, Search, Star, X } from '@tuturuuu/icons';
 import type { InternalApiWorkspaceSummary } from '@tuturuuu/types';
 import { ROOT_WORKSPACE_ID } from '@tuturuuu/utils/constants';
+import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
 import { type ReactNode, useRef, useState } from 'react';
 import type { useWorkspaceVisibility } from '../../../hooks/use-workspace-visibility';
@@ -14,6 +15,7 @@ import {
   DialogTitle,
 } from '../dialog';
 import { Input } from '../input';
+import { PopoverClose, PopoverContent } from '../popover';
 import { TUTURUUU_LOGO_URL } from './tuturuuu-logo';
 import { WorkspaceIcon } from './workspace-select-icon';
 
@@ -32,6 +34,8 @@ export function WorkspacePickerContent({
   listLoading = false,
   listError,
   onRetryList,
+  presentation = 'fullscreen',
+  onClose,
 }: {
   workspaces: InternalApiWorkspaceSummary[];
   currentId?: string;
@@ -46,10 +50,15 @@ export function WorkspacePickerContent({
   listLoading?: boolean;
   listError?: Error | null;
   onRetryList?: () => void;
+  presentation?: 'fullscreen' | 'dropdown';
+  onClose?: () => void;
 }) {
+  const dropdown = presentation === 'dropdown';
+  const Title = dropdown ? 'h2' : DialogTitle;
+  const Description = dropdown ? 'p' : DialogDescription;
   const t = useTranslations('common');
   const [restoring, setRestoring] = useState(restoreOnly);
-  const [searchVisible, setSearchVisible] = useState(false);
+  const [searchVisible, setSearchVisible] = useState(dropdown);
   const [search, setSearch] = useState('');
   const input = useRef<HTMLInputElement>(null);
   const query = search.trim().toLocaleLowerCase();
@@ -75,13 +84,14 @@ export function WorkspacePickerContent({
     setSearchVisible(true);
     requestAnimationFrame(() => input.current?.focus());
   }
-  return (
-    <DialogContent
-      presentation="fullscreen"
-      showCloseButton={false}
-      className="flex-col"
-    >
-      <div className="flex items-center gap-3 border-b p-4 pt-[max(1rem,env(safe-area-inset-top))]">
+  const content = (
+    <>
+      <div
+        className={cn(
+          'flex items-center gap-3 border-b p-4',
+          !dropdown && 'pt-[max(1rem,env(safe-area-inset-top))]'
+        )}
+      >
         {restoring && !restoreOnly && (
           <Button
             size="icon"
@@ -96,18 +106,31 @@ export function WorkspacePickerContent({
           </Button>
         )}
         <WorkspaceIcon fallbackLogoUrl={TUTURUUU_LOGO_URL} name="Tuturuuu" />
-        <DialogTitle className="min-w-0 flex-1">
+        <Title className="min-w-0 flex-1 font-semibold text-lg leading-none">
           {restoring ? t('hidden_workspaces') : t('workspaces')}
-        </DialogTitle>
-        <DialogClose asChild>
-          <Button size="icon" variant="ghost" aria-label={t('close')}>
-            <X />
-          </Button>
-        </DialogClose>
+        </Title>
+        {dropdown ? (
+          <PopoverClose asChild>
+            <Button
+              size="icon"
+              variant="ghost"
+              aria-label={t('close')}
+              onClick={onClose}
+            >
+              <X />
+            </Button>
+          </PopoverClose>
+        ) : (
+          <DialogClose asChild>
+            <Button size="icon" variant="ghost" aria-label={t('close')}>
+              <X />
+            </Button>
+          </DialogClose>
+        )}
       </div>
-      <DialogDescription className={restoring ? 'px-4 pt-3' : 'sr-only'}>
+      <Description className={restoring ? 'px-4 pt-3' : 'sr-only'}>
         {restoring ? t('hidden_workspaces_description') : t('select_workspace')}
-      </DialogDescription>
+      </Description>
       {searchVisible && (
         <div className="flex gap-2 px-4 pt-3">
           <Input
@@ -148,7 +171,12 @@ export function WorkspacePickerContent({
           </Button>
         </div>
       )}
-      <div className="min-h-0 flex-1 overflow-y-auto px-4 pt-4 pb-28">
+      <div
+        className={cn(
+          'min-h-0 flex-1 overflow-y-auto px-4 pt-4',
+          dropdown ? 'pb-3' : 'pb-28'
+        )}
+      >
         {!visibility.known || listLoading || listError ? (
           <p role="status">
             {visibility.isError || listError
@@ -161,7 +189,10 @@ export function WorkspacePickerContent({
             {results.map((workspace) => (
               <div
                 key={workspace.id}
-                className="mb-2 flex items-center gap-2 rounded-xl border p-2"
+                className={cn(
+                  'flex items-center gap-2',
+                  dropdown ? 'mb-1 rounded-md' : 'mb-2 rounded-xl border p-2'
+                )}
               >
                 {restoring ? (
                   <div className="flex min-w-0 flex-1 items-center gap-3 p-2">
@@ -174,7 +205,10 @@ export function WorkspacePickerContent({
                 ) : (
                   <Button
                     variant="ghost"
-                    className="h-auto min-w-0 flex-1 justify-start gap-3 whitespace-normal py-3 text-start"
+                    className={cn(
+                      'h-auto min-w-0 flex-1 justify-start gap-3 whitespace-normal text-start',
+                      dropdown ? 'py-2' : 'py-3'
+                    )}
                     aria-label={[
                       workspace.name ?? workspace.id,
                       workspace.tier ?? 'FREE',
@@ -268,26 +302,55 @@ export function WorkspacePickerContent({
           </Button>
         )}
       </div>
-      <div className="absolute right-4 bottom-[max(1rem,env(safe-area-inset-bottom))] flex gap-3 rounded-full border bg-background p-2 shadow-lg">
-        <Button
-          size="icon"
-          className="rounded-full"
-          aria-label={t('search_workspace')}
-          onClick={openSearch}
-        >
-          <Search />
-        </Button>
-        {!restoring && onCreate && (
+      <div
+        className={
+          dropdown
+            ? restoring || !onCreate
+              ? 'hidden'
+              : 'flex gap-2 border-t p-2'
+            : 'absolute right-4 bottom-[max(1rem,env(safe-area-inset-bottom))] flex gap-3 rounded-full border bg-background p-2 shadow-lg'
+        }
+      >
+        {!dropdown && (
           <Button
             size="icon"
             className="rounded-full"
+            aria-label={t('search_workspace')}
+            onClick={openSearch}
+          >
+            <Search />
+          </Button>
+        )}
+        {!restoring && onCreate && (
+          <Button
+            size={dropdown ? 'sm' : 'icon'}
+            className={dropdown ? 'w-full justify-start' : 'rounded-full'}
             aria-label={t('create_workspace_action')}
             onClick={onCreate}
           >
             <Plus />
+            {dropdown && t('create_workspace_action')}
           </Button>
         )}
       </div>
+    </>
+  );
+  return dropdown ? (
+    <PopoverContent
+      align="start"
+      aria-label={t(restoring ? 'hidden_workspaces' : 'workspaces')}
+      collisionPadding={8}
+      className="flex max-h-[min(32rem,var(--radix-popover-content-available-height))] w-80 max-w-[min(calc(100vw-1rem),var(--radix-popover-content-available-width))] flex-col overflow-hidden p-0"
+    >
+      {content}
+    </PopoverContent>
+  ) : (
+    <DialogContent
+      presentation="fullscreen"
+      showCloseButton={false}
+      className="flex-col"
+    >
+      {content}
     </DialogContent>
   );
 }

package/src/components/ui/custom/workspace-select.tsx

@@ -54,6 +54,7 @@ import {
   FormMessage,
 } from '../form';
 import { Input } from '../input';
+import { Popover, PopoverTrigger } from '../popover';
 import { TUTURUUU_LOGO_URL } from './tuturuuu-logo';
 import { WorkspacePickerContent } from './workspace-picker-content';
 import {
@@ -93,6 +94,7 @@ export function WorkspaceSelect({
   triggerClassName,
   platformWorkspaceSetupUrl,
   cacheScope,
+  presentation = 'dropdown',
 }: {
   wsId: string;
   hideLeading?: boolean;
@@ -113,7 +115,11 @@ export function WorkspaceSelect({
   platformWorkspaceSetupUrl?: string;
   /** Authenticated identity used to isolate user-specific picker caches. */
   cacheScope?: string;
+  presentation?: 'fullscreen' | 'dropdown';
 }) {
+  const Picker = presentation === 'dropdown' ? Popover : Dialog;
+  const PickerTrigger =
+    presentation === 'dropdown' ? PopoverTrigger : DialogTrigger;
   const t = useTranslations();
   const locale = useLocale();
   const router = useRouter();
@@ -417,8 +423,8 @@ export function WorkspaceSelect({
           setShowNewWorkspaceDialog(open);
         }}
       >
-        <Dialog open={open} onOpenChange={setOpen}>
-          <DialogTrigger asChild disabled={!hasSelectableWorkspaces}>
+        <Picker open={open} onOpenChange={setOpen}>
+          <PickerTrigger asChild disabled={!hasSelectableWorkspaces}>
             <Button
               size="xs"
               variant="outline"
@@ -485,8 +491,10 @@ export function WorkspaceSelect({
                 <ChevronDown className="ml-1 h-4 w-4 shrink-0 opacity-50" />
               )}
             </Button>
-          </DialogTrigger>
+          </PickerTrigger>
           <WorkspacePickerContent
+            presentation={presentation}
+            onClose={() => setOpen(false)}
             workspaces={workspaces ?? []}
             currentId={workspace?.id}
             defaultId={defaultWorkspaceId}
@@ -517,7 +525,7 @@ export function WorkspaceSelect({
               </Command>
             }
           />
-        </Dialog>
+        </Picker>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>{t('common.create_workspace')}</DialogTitle>

package/src/components/ui/finance/invoices/attendance-calendar.test.tsx

@@ -0,0 +1,294 @@
+import {
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import type { Database } from '@tuturuuu/types/supabase';
+import { TooltipProvider } from '@tuturuuu/ui/tooltip';
+import { NextIntlClientProvider } from 'next-intl';
+import { afterEach, describe, expect, it } from 'vitest';
+import en from '../../../../../../../apps/finance/messages/en.json';
+import vi from '../../../../../../../apps/finance/messages/vi.json';
+import { AttendanceCalendar } from './attendance-calendar';
+
+type Props = Parameters<typeof AttendanceCalendar>[0];
+type Occurrence = Pick<
+  Database['public']['Tables']['user_group_attendance']['Row'],
+  'id' | 'session_id' | 'user_id' | 'group_id' | 'date' | 'status'
+>;
+type Summary = 'ABSENT' | 'LATE' | 'PRESENT' | 'UNKNOWN';
+const date = '2026-10-08';
+const groupId = '10000000-0000-4000-8000-000000000001';
+const otherGroupId = '10000000-0000-4000-8000-000000000002';
+const sessions: Props['sessions'] = [{ date, groupId, groupName: 'Class A' }];
+const colors = { ABSENT: 'red', LATE: 'yellow', PRESENT: 'green' };
+const keys = {
+  ABSENT: 'absent',
+  LATE: 'late',
+  PRESENT: 'present',
+  UNKNOWN: 'no_attendance',
+} as const;
+
+function attendance(statuses: string[]): Props['userAttendance'] {
+  const occurrences: Occurrence[] = statuses.map((status, index) => ({
+    id: `20000000-0000-4000-8000-${String(index + 1).padStart(12, '0')}`,
+    session_id: `30000000-0000-4000-8000-${String(index + 1).padStart(12, '0')}`,
+    user_id: '40000000-0000-4000-8000-000000000001',
+    group_id: groupId,
+    date,
+    status,
+  }));
+  return occurrences.map(({ date, status, group_id }) => ({
+    date,
+    status,
+    group_id,
+  }));
+}
+
+function mount(
+  locale: string,
+  messages: typeof en | typeof vi,
+  overrides: Partial<Props> = {}
+) {
+  const props: Props = {
+    userAttendance: [],
+    selectedMonth: '2026-10',
+    sessions,
+    locale,
+    ...overrides,
+  };
+  const before = JSON.stringify(props);
+  props.userAttendance.forEach(Object.freeze);
+  props.sessions.forEach(Object.freeze);
+  Object.freeze(props.userAttendance);
+  Object.freeze(props.sessions);
+  const view = render(
+    <NextIntlClientProvider locale={locale} messages={messages} timeZone="UTC">
+      <TooltipProvider delayDuration={0} skipDelayDuration={0}>
+        <AttendanceCalendar {...props} />
+      </TooltipProvider>
+    </NextIntlClientProvider>
+  );
+  const grids = view.container.querySelectorAll('.grid-cols-7');
+  expect(grids).toHaveLength(2);
+  expect(grids[0]?.children).toHaveLength(7);
+  expect(grids[1]?.children).toHaveLength(42);
+  const cell = Array.from(grids[1]?.children ?? []).find(
+    (child) => child.textContent === '8' && child.hasAttribute('data-slot')
+  );
+  if (!(cell instanceof HTMLElement))
+    throw new Error('Current-month October 8 is missing');
+  return {
+    ...view,
+    cell,
+    grid: grids[1]!,
+    unchanged: () => expect(JSON.stringify(props)).toBe(before),
+  };
+}
+
+async function hover(cell: HTMLElement) {
+  fireEvent.pointerMove(cell, { pointerType: 'mouse', clientX: 1, clientY: 1 });
+  return waitFor(() => {
+    const content = document.querySelector('[data-slot="tooltip-content"]');
+    expect(content).toBeVisible();
+    if (!(content instanceof HTMLElement))
+      throw new Error('Real tooltip portal is missing');
+    return content;
+  });
+}
+
+function groupStatus(content: HTMLElement, groupName: string) {
+  // Accept the visible portal itself; exclude any nested accessibility copy.
+  const label = Array.from(content.querySelectorAll('span')).find(
+    (span) =>
+      span.textContent === `${groupName}:` &&
+      (!span.closest('[role="tooltip"]') ||
+        span.closest('[role="tooltip"]') === content)
+  );
+  if (!label?.parentElement)
+    throw new Error(`Visible tooltip group ${groupName} is missing`);
+  return label.parentElement;
+}
+
+function assertSummary(
+  cell: HTMLElement,
+  line: HTMLElement,
+  messages: typeof en | typeof vi,
+  status: Summary
+) {
+  const label = messages['ws-invoices'][keys[status]];
+  expect.soft(line.lastElementChild).toHaveTextContent(label);
+  expect
+    .soft(line.lastElementChild)
+    .toHaveClass(
+      status === 'UNKNOWN'
+        ? 'text-muted-foreground'
+        : `text-dynamic-${colors[status]}`
+    );
+  if (status === 'UNKNOWN') {
+    expect
+      .soft(cell)
+      .toHaveClass('text-foreground/50', 'bg-muted/50', 'border-foreground/20');
+  } else {
+    const color = colors[status];
+    expect
+      .soft(cell)
+      .toHaveClass(
+        `text-dynamic-${color}`,
+        `bg-dynamic-${color}/10`,
+        `border-dynamic-${color}/20`
+      );
+  }
+}
+
+afterEach(cleanup);
+
+const cases: [string, string[], Summary][] = [
+  ['forward PRESENT ABSENT control', ['PRESENT', 'ABSENT'], 'ABSENT'],
+  ['reverse ABSENT PRESENT causal regression', ['ABSENT', 'PRESENT'], 'ABSENT'],
+  ['PRESENT LATE', ['PRESENT', 'LATE'], 'LATE'],
+  ['LATE PRESENT', ['LATE', 'PRESENT'], 'LATE'],
+  ['ABSENT LATE', ['ABSENT', 'LATE'], 'ABSENT'],
+  ['LATE ABSENT', ['LATE', 'ABSENT'], 'ABSENT'],
+  ['triple P L A', ['PRESENT', 'LATE', 'ABSENT'], 'ABSENT'],
+  ['triple P A L', ['PRESENT', 'ABSENT', 'LATE'], 'ABSENT'],
+  ['triple L P A', ['LATE', 'PRESENT', 'ABSENT'], 'ABSENT'],
+  ['triple L A P', ['LATE', 'ABSENT', 'PRESENT'], 'ABSENT'],
+  ['triple A P L', ['ABSENT', 'PRESENT', 'LATE'], 'ABSENT'],
+  ['triple A L P', ['ABSENT', 'LATE', 'PRESENT'], 'ABSENT'],
+  ['single present', ['PRESENT'], 'PRESENT'],
+  ['single late', ['LATE'], 'LATE'],
+  ['single absent', ['ABSENT'], 'ABSENT'],
+  ['duplicate absent', ['ABSENT', 'ABSENT'], 'ABSENT'],
+  ['lowercase normalization', ['present', 'absent'], 'ABSENT'],
+  ['unknown then known', ['EXCUSED', 'PRESENT'], 'PRESENT'],
+  ['known then unknown', ['PRESENT', 'EXCUSED'], 'PRESENT'],
+  ['unknown then late', ['EXCUSED', 'LATE'], 'LATE'],
+  ['late then unknown', ['LATE', 'EXCUSED'], 'LATE'],
+  ['unknown then absent', ['EXCUSED', 'ABSENT'], 'ABSENT'],
+  ['absent then unknown', ['ABSENT', 'EXCUSED'], 'ABSENT'],
+  ['unknown only', ['EXCUSED'], 'UNKNOWN'],
+  ['empty status compatibility', [''], 'PRESENT'],
+  ['scheduled without attendance', [], 'UNKNOWN'],
+];
+
+describe.each([
+  ['en', en],
+  ['vi', vi],
+] as const)('AttendanceCalendar %s', (locale, messages) => {
+  it.each(cases)('%s', async (_name, statuses, expected) => {
+    const view = mount(locale, messages, {
+      userAttendance: attendance(statuses),
+    });
+    const content = await hover(view.cell);
+    assertSummary(
+      view.cell,
+      groupStatus(content, 'Class A'),
+      messages,
+      expected
+    );
+    view.unchanged();
+  });
+
+  it('retains null runtime status fallback', async () => {
+    const rows = attendance(['']);
+    // Props declare string, but the existing optional-chain fallback accepts null at runtime.
+    Reflect.set(rows[0]!, 'status', null);
+    const view = mount(locale, messages, { userAttendance: rows });
+    const content = await hover(view.cell);
+    assertSummary(
+      view.cell,
+      groupStatus(content, 'Class A'),
+      messages,
+      'PRESENT'
+    );
+    view.unchanged();
+  });
+
+  it.each([false, true])(
+    'keeps separate group statuses, reverse=%s',
+    async (reverse) => {
+      const rows = attendance(['PRESENT', 'ABSENT']);
+      rows[1]!.group_id = otherGroupId;
+      const view = mount(locale, messages, {
+        userAttendance: reverse ? rows.reverse() : rows,
+        sessions: [
+          ...sessions,
+          { date, groupId: otherGroupId, groupName: 'Class B' },
+        ],
+      });
+      const content = await hover(view.cell);
+      expect(
+        within(groupStatus(content, 'Class A')).getByText(
+          messages['ws-invoices'].present
+        )
+      ).toHaveClass('text-dynamic-green');
+      assertSummary(
+        view.cell,
+        groupStatus(content, 'Class B'),
+        messages,
+        'ABSENT'
+      );
+      view.unchanged();
+    }
+  );
+
+  it('preserves default group matching when group_id is omitted', async () => {
+    const rows = attendance(['PRESENT']);
+    delete rows[0]!.group_id;
+    const view = mount(locale, messages, {
+      userAttendance: rows,
+      sessions: [{ date, groupId: 'default', groupName: 'Class A' }],
+    });
+    const content = await hover(view.cell);
+    assertSummary(
+      view.cell,
+      groupStatus(content, 'Class A'),
+      messages,
+      'PRESENT'
+    );
+    view.unchanged();
+  });
+
+  it('keeps unscheduled attendance muted with no-session tooltip', async () => {
+    const view = mount(locale, messages, {
+      userAttendance: attendance(['ABSENT']),
+      sessions: [],
+    });
+    const content = await hover(view.cell);
+    expect(view.cell).toHaveClass(
+      'text-foreground/30',
+      'bg-muted/30',
+      'border-transparent'
+    );
+    expect(
+      Array.from(content.querySelectorAll('p')).find(
+        (p) =>
+          p.textContent === messages['ws-invoices'].no_session &&
+          (!p.closest('[role="tooltip"]') ||
+            p.closest('[role="tooltip"]') === content)
+      )
+    ).toBeVisible();
+    view.unchanged();
+  });
+
+  it('keeps adjacent months muted and maintains the Monday-first 42-day grid on navigation', () => {
+    const view = mount(locale, messages);
+    const first = view.grid.children[0];
+    expect(first).toHaveTextContent('28');
+    expect(first).toHaveClass(
+      'text-foreground/20',
+      'bg-transparent',
+      'border-transparent'
+    );
+    expect(first).not.toHaveAttribute('data-slot');
+    view.unchanged();
+    view.unmount();
+    const next = mount(locale, messages, { selectedMonth: '2026-11' });
+    expect(next.grid.children[0]).toHaveTextContent('26');
+    expect(next.grid.children[41]).toHaveTextContent('6');
+    next.unchanged();
+  });
+});

package/src/components/ui/finance/invoices/attendance-calendar.tsx

@@ -41,12 +41,20 @@ export function AttendanceCalendar({
       if (!map.has(dateKey)) {
         map.set(dateKey, new Map());
       }
-      map
-        .get(dateKey)!
-        .set(
-          attendance.group_id || 'default',
-          attendance.status?.toUpperCase() || 'PRESENT'
-        );
+      const groupStatuses = map.get(dateKey)!;
+      const groupId = attendance.group_id || 'default';
+      const status = attendance.status?.toUpperCase() || 'PRESENT';
+      const priority = (value: string | undefined) =>
+        value === 'ABSENT'
+          ? 3
+          : value === 'LATE'
+            ? 2
+            : value === 'PRESENT'
+              ? 1
+              : 0;
+      if (priority(status) >= priority(groupStatuses.get(groupId))) {
+        groupStatuses.set(groupId, status);
+      }
     });
     return map;
   }, [userAttendance]);