@tuturuuu/ui 0.8.0 → 0.10.0

package/src/components/ui/tu-do/progress/task-progress-panels.tsx

@@ -0,0 +1,301 @@
+import type { UseMutationResult } from '@tanstack/react-query';
+import { Plus, Target } from '@tuturuuu/icons';
+import type { TaskProgressMetric } from '@tuturuuu/internal-api';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';
+import { Input } from '@tuturuuu/ui/input';
+import { Textarea } from '@tuturuuu/ui/textarea';
+import type { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
+
+type Translate = ReturnType<typeof useTranslations>;
+const today = () => new Date().toISOString().slice(0, 10);
+
+export function SummaryCard({
+  icon,
+  label,
+  value,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: number;
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center gap-2 text-muted-foreground text-sm">
+          {icon}
+          {label}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="font-bold text-2xl">
+          {Number(value).toLocaleString()}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function MetricSelect({
+  metrics,
+  name = 'metric_id',
+  selectedMetric,
+}: {
+  metrics: TaskProgressMetric[];
+  name?: string;
+  selectedMetric: TaskProgressMetric | null;
+}) {
+  return (
+    <select
+      className="h-10 rounded-md border bg-background px-3 text-sm"
+      defaultValue={selectedMetric?.id}
+      name={name}
+      required
+    >
+      {metrics.map((metric) => (
+        <option key={metric.id} value={metric.id}>
+          {metric.name}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+export function ProgressPanel(props: {
+  createEntryMutation: UseMutationResult<any, unknown, FormData>;
+  createMetricMutation: UseMutationResult<any, unknown, FormData>;
+  entries: any[];
+  metrics: TaskProgressMetric[];
+  selectedMetric: TaskProgressMetric | null;
+  t: Translate;
+}) {
+  const {
+    createEntryMutation,
+    createMetricMutation,
+    entries,
+    metrics,
+    selectedMetric,
+    t,
+  } = props;
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('progress.log_entry')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form
+            className="grid gap-3"
+            onSubmit={(event) => {
+              event.preventDefault();
+              createEntryMutation.mutate(new FormData(event.currentTarget));
+              event.currentTarget.reset();
+            }}
+          >
+            <MetricSelect metrics={metrics} selectedMetric={selectedMetric} />
+            <Input defaultValue={today()} name="entry_date" type="date" />
+            <Input
+              name="value"
+              placeholder={t('fields.value')}
+              required
+              type="number"
+            />
+            <Input name="tags" placeholder={t('fields.tags')} />
+            <Textarea name="note" placeholder={t('fields.note')} />
+            <Button disabled={!selectedMetric || createEntryMutation.isPending}>
+              <Plus className="mr-2 h-4 w-4" />
+              {t('actions.add_entry')}
+            </Button>
+          </form>
+          <form
+            className="mt-6 grid gap-3 border-t pt-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              createMetricMutation.mutate(new FormData(event.currentTarget));
+              event.currentTarget.reset();
+            }}
+          >
+            <Input name="name" placeholder={t('fields.metric_name')} required />
+            <Input name="unit_label" placeholder={t('fields.unit')} required />
+            <Button disabled={createMetricMutation.isPending} variant="outline">
+              {t('actions.add_metric')}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('progress.recent_entries')}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {entries.length === 0 ? (
+            <p className="text-muted-foreground text-sm">
+              {t('empty.entries')}
+            </p>
+          ) : (
+            entries.map((entry) => (
+              <div
+                className="flex items-start justify-between gap-3 rounded-md border p-3"
+                key={entry.id}
+              >
+                <div>
+                  <div className="font-medium">{entry.entry_date}</div>
+                  <div className="text-muted-foreground text-sm">
+                    {entry.note || entry.metric?.name}
+                  </div>
+                  <div className="mt-2 flex flex-wrap gap-1">
+                    {(entry.tags ?? []).map((tag: string) => (
+                      <Badge key={tag} variant="secondary">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+                <div className="text-right font-semibold">
+                  {Number(entry.value).toLocaleString()}{' '}
+                  {entry.metric?.unit_label}
+                </div>
+              </div>
+            ))
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export function GoalsPanel(props: {
+  createGoalMutation: UseMutationResult<any, unknown, FormData>;
+  goals: any[];
+  metrics: TaskProgressMetric[];
+  selectedMetric: TaskProgressMetric | null;
+  t: Translate;
+}) {
+  const { createGoalMutation, goals, metrics, selectedMetric, t } = props;
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('goals.create_goal')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form
+            className="grid gap-3"
+            onSubmit={(event) => {
+              event.preventDefault();
+              createGoalMutation.mutate(new FormData(event.currentTarget));
+              event.currentTarget.reset();
+            }}
+          >
+            <Input name="name" placeholder={t('fields.goal_name')} required />
+            <MetricSelect metrics={metrics} selectedMetric={selectedMetric} />
+            <Input
+              name="target_value"
+              placeholder={t('fields.target')}
+              required
+              type="number"
+            />
+            <Input defaultValue={today()} name="period_start" type="date" />
+            <Input name="period_end" type="date" />
+            <select
+              className="h-10 rounded-md border bg-background px-3 text-sm"
+              name="goal_type"
+            >
+              <option value="target">{t('goal_types.target')}</option>
+              <option value="habit">{t('goal_types.habit')}</option>
+            </select>
+            <Button disabled={!selectedMetric || createGoalMutation.isPending}>
+              <Target className="mr-2 h-4 w-4" />
+              {t('actions.add_goal')}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+      <div className="grid gap-3">
+        {goals.length === 0 ? (
+          <Card>
+            <CardContent className="py-8 text-sm">
+              {t('empty.goals')}
+            </CardContent>
+          </Card>
+        ) : (
+          goals.map((goal) => (
+            <Card key={goal.id}>
+              <CardContent className="space-y-3 py-4">
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <div className="font-semibold">{goal.name}</div>
+                    <div className="text-muted-foreground text-sm">
+                      {goal.period_start}
+                      {goal.period_end ? ` - ${goal.period_end}` : ''}
+                    </div>
+                  </div>
+                  <Badge variant="secondary">{goal.goal_type}</Badge>
+                </div>
+                <div className="h-2 overflow-hidden rounded-full bg-muted">
+                  <div
+                    className="h-full bg-dynamic-green"
+                    style={{
+                      width: `${Math.min(Number(goal.percent ?? 0), 100)}%`,
+                    }}
+                  />
+                </div>
+                <div className="text-muted-foreground text-sm">
+                  {Number(goal.progress ?? 0).toLocaleString()} /{' '}
+                  {Number(goal.target_value ?? 0).toLocaleString()}{' '}
+                  {goal.metric?.unit_label}
+                </div>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function StatsPanel({ stats, t }: { stats: any; t: Translate }) {
+  const maxValue = Math.max(
+    ...(stats?.daily ?? []).map((day: any) => day.value),
+    1
+  );
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('stats.daily_progress')}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {(stats?.daily ?? []).length === 0 ? (
+          <p className="text-muted-foreground text-sm">{t('empty.stats')}</p>
+        ) : (
+          <div className="space-y-2">
+            {stats.daily.slice(-30).map((day: any) => (
+              <div
+                className="grid grid-cols-[6.5rem_1fr_5rem] items-center gap-3"
+                key={day.date}
+              >
+                <div className="text-muted-foreground text-xs">{day.date}</div>
+                <div className="h-2 overflow-hidden rounded-full bg-muted">
+                  <div
+                    className="h-full bg-dynamic-blue"
+                    style={{
+                      width: `${(Number(day.value) / maxValue) * 100}%`,
+                    }}
+                  />
+                </div>
+                <div className="text-right text-sm">
+                  {Number(day.value).toLocaleString()}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/tu-do/providers/task-dialog-provider.tsx

@@ -23,6 +23,11 @@ import { useOptionalWorkspacePresenceContext } from './workspace-presence-provid
 
 export type { PendingRelationship, PendingRelationshipType };
 
+export type TaskAssigneeMemberSource =
+  | 'workspace'
+  | 'board'
+  | 'workspace-and-board';
+
 type WorkspaceLabelSummary = {
   id: string;
   name: string | null;
@@ -57,6 +62,10 @@ interface TaskDialogState {
   taskWsId?: string;
   /** Whether the task's workspace is personal (affects realtime/presence decisions) */
   taskWorkspacePersonal?: boolean;
+  /** Whether the board context should expose assignee controls. */
+  canUseBoardAssignees?: boolean;
+  /** Where assignee candidates should be loaded from. */
+  assigneeMemberSource?: TaskAssigneeMemberSource;
   /** The task workspace tier used to gate cursor tracking for edit mode */
   taskWorkspaceTier?: WorkspaceProductTier;
   /** Initial board/list context used for immediate partial-task rendering. */
@@ -78,6 +87,8 @@ interface OpenTaskByIdOptions {
   taskWsId?: string;
   taskWorkspacePersonal?: boolean;
   taskWorkspaceTier?: WorkspaceProductTier;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: TaskAssigneeMemberSource;
   initialSharedContext?: SharedTaskContext;
 }
 
@@ -100,6 +111,10 @@ interface TaskDialogContextValue {
       taskWsId?: string;
       /** Whether the task's workspace is personal (affects realtime features) */
       taskWorkspacePersonal?: boolean;
+      /** Whether the board context should expose assignee controls */
+      canUseBoardAssignees?: boolean;
+      /** Where assignee candidates should be loaded from */
+      assigneeMemberSource?: TaskAssigneeMemberSource;
       /** The task's workspace tier (affects cursor tracking) */
       taskWorkspaceTier?: WorkspaceProductTier;
     }
@@ -383,6 +398,8 @@ export function TaskDialogProvider({
         preserveUrl?: boolean;
         taskWsId?: string;
         taskWorkspacePersonal?: boolean;
+        canUseBoardAssignees?: boolean;
+        assigneeMemberSource?: TaskAssigneeMemberSource;
         taskWorkspaceTier?: WorkspaceProductTier;
       }
     ) => {
@@ -408,6 +425,9 @@ export function TaskDialogProvider({
         fakeTaskUrl,
         taskWsId: options?.taskWsId,
         taskWorkspacePersonal: isTaskWorkspacePersonal,
+        canUseBoardAssignees:
+          options?.canUseBoardAssignees ?? !isTaskWorkspacePersonal,
+        assigneeMemberSource: options?.assigneeMemberSource,
         taskWorkspaceTier: options?.taskWorkspaceTier,
       });
     },
@@ -461,6 +481,9 @@ export function TaskDialogProvider({
         fakeTaskUrl: options?.fakeTaskUrl,
         taskWsId: options?.taskWsId,
         taskWorkspacePersonal: initialTaskWorkspacePersonal,
+        canUseBoardAssignees:
+          options?.canUseBoardAssignees ?? !initialTaskWorkspacePersonal,
+        assigneeMemberSource: options?.assigneeMemberSource,
         taskWorkspaceTier: options?.taskWorkspaceTier,
         initialSharedContext: options?.initialSharedContext,
         isHydratingTask: true,
@@ -540,6 +563,9 @@ export function TaskDialogProvider({
           fakeTaskUrl: options?.fakeTaskUrl,
           taskWsId,
           taskWorkspacePersonal: isTaskWorkspacePersonal,
+          canUseBoardAssignees:
+            options?.canUseBoardAssignees ?? !isTaskWorkspacePersonal,
+          assigneeMemberSource: options?.assigneeMemberSource,
           taskWorkspaceTier,
           isHydratingTask: false,
           taskLoadError: false,

package/src/components/ui/tu-do/shared/__tests__/assignee-select.test.tsx

@@ -1,9 +1,19 @@
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import type React from 'react';
+import { createRef } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { AssigneeSelect } from '../assignee-select';
+import { AssigneeSelect, type AssigneeSelectHandle } from '../assignee-select';
+
+const listWorkspaceTaskBoardViewableMembersMock = vi.fn();
+const updateWorkspaceTaskMock = vi.fn();
 
 vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => key,
@@ -25,7 +35,11 @@ vi.mock('@tuturuuu/ui/hooks/use-workspace-members', () => ({
 }));
 
 vi.mock('@tuturuuu/internal-api/tasks', () => ({
-  updateWorkspaceTask: vi.fn(),
+  listWorkspaceTaskBoardViewableMembers: (
+    ...args: Parameters<typeof listWorkspaceTaskBoardViewableMembersMock>
+  ) => listWorkspaceTaskBoardViewableMembersMock(...args),
+  updateWorkspaceTask: (...args: Parameters<typeof updateWorkspaceTaskMock>) =>
+    updateWorkspaceTaskMock(...args),
 }));
 
 vi.mock('../board-broadcast-context', () => ({
@@ -35,9 +49,18 @@ vi.mock('../board-broadcast-context', () => ({
 describe('AssigneeSelect', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    listWorkspaceTaskBoardViewableMembersMock.mockResolvedValue({
+      members: [],
+    });
+    updateWorkspaceTaskMock.mockResolvedValue({});
   });
 
-  it('does not enter a render loop when rerendered with equivalent assignees', () => {
+  function renderWithQueryClient(
+    props: React.ComponentProps<typeof AssigneeSelect> = {
+      taskId: 'task-1',
+    },
+    ref?: React.Ref<AssigneeSelectHandle>
+  ) {
     const queryClient = new QueryClient({
       defaultOptions: {
         queries: {
@@ -46,6 +69,14 @@ describe('AssigneeSelect', () => {
       },
     });
 
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <AssigneeSelect {...props} ref={ref} />
+      </QueryClientProvider>
+    );
+  }
+
+  it('does not enter a render loop when rerendered with equivalent assignees', () => {
     const assignees: React.ComponentProps<typeof AssigneeSelect>['assignees'] =
       [
         {
@@ -55,18 +86,58 @@ describe('AssigneeSelect', () => {
         },
       ];
 
-    const { rerender } = render(
-      <QueryClientProvider client={queryClient}>
-        <AssigneeSelect taskId="task-1" assignees={assignees} />
-      </QueryClientProvider>
-    );
+    const { rerender } = renderWithQueryClient({
+      assignees,
+      taskId: 'task-1',
+    });
 
     expect(() =>
       rerender(
-        <QueryClientProvider client={queryClient}>
+        <QueryClientProvider client={new QueryClient()}>
           <AssigneeSelect taskId="task-1" assignees={[{ ...assignees[0]! }]} />
         </QueryClientProvider>
       )
     ).not.toThrow();
   });
+
+  it('uses board viewable members so direct guests can be assigned', async () => {
+    listWorkspaceTaskBoardViewableMembersMock.mockResolvedValue({
+      members: [
+        {
+          avatar_url: null,
+          display_name: 'Board Guest',
+          email: 'guest@example.com',
+          handle: null,
+          id: 'guest-user-1',
+          is_creator: false,
+          roles: [],
+          user_id: 'guest-user-1',
+          workspace_member_type: 'GUEST',
+        },
+      ],
+    });
+
+    const assigneeSelectRef = createRef<AssigneeSelectHandle>();
+    renderWithQueryClient({ taskId: 'task-1' }, assigneeSelectRef);
+
+    await waitFor(() => {
+      expect(listWorkspaceTaskBoardViewableMembersMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1'
+      );
+    });
+    act(() => {
+      assigneeSelectRef.current?.open();
+    });
+
+    expect(await screen.findByText('Board Guest')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Board Guest'));
+
+    await waitFor(() => {
+      expect(updateWorkspaceTaskMock).toHaveBeenCalledWith('ws-1', 'task-1', {
+        assignee_ids: ['guest-user-1'],
+      });
+    });
+  });
 });

package/src/components/ui/tu-do/shared/__tests__/board-client.test.tsx

@@ -12,6 +12,7 @@ const useWorkspaceLabelsMock = vi.fn();
 const getWorkspaceTaskBoardMock = vi.fn();
 const listWorkspaceTasksMock = vi.fn();
 const useProgressiveBoardLoaderMock = vi.fn();
+const useBoardRealtimeMock = vi.fn();
 const revalidateLoadedListsMock = vi.fn();
 
 vi.mock('@tuturuuu/internal-api/tasks', () => ({
@@ -25,7 +26,10 @@ vi.mock('@tuturuuu/utils/task-helper', () => ({
 }));
 
 vi.mock('@tuturuuu/ui/hooks/useBoardRealtime', () => ({
-  useBoardRealtime: () => ({ broadcast: null }),
+  useBoardRealtime: (...args: unknown[]) => {
+    useBoardRealtimeMock(...args);
+    return { broadcast: null };
+  },
 }));
 
 vi.mock('next/navigation', () => ({
@@ -78,6 +82,7 @@ describe('BoardClient', () => {
         ],
       },
     });
+    useBoardRealtimeMock.mockReset();
     useProgressiveBoardLoaderMock.mockReset();
     revalidateLoadedListsMock.mockReset();
     revalidateLoadedListsMock.mockResolvedValue(undefined);
@@ -115,6 +120,98 @@ describe('BoardClient', () => {
     );
   });
 
+  it('refreshes board task cache without relationship summaries', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <BoardClient
+          boardId="board-1"
+          workspace={{ id: 'workspace-uuid', personal: false } as any}
+          currentUserId="user-1"
+        />
+      </QueryClientProvider>
+    );
+
+    expect(await screen.findByTestId('board-views')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(getActiveBoardRefresh()).toBeInstanceOf(Function);
+    });
+
+    await act(async () => {
+      getActiveBoardRefresh()?.();
+    });
+
+    await waitFor(() => {
+      expect(listWorkspaceTasksMock).toHaveBeenCalledWith('board-ws-uuid', {
+        boardId: 'board-1',
+        includeRelationshipSummary: false,
+      });
+    });
+  });
+
+  it('uses the shared task board loading state while the board query resolves', () => {
+    getWorkspaceTaskBoardMock.mockReturnValue(new Promise(() => {}));
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <BoardClient
+          boardId="board-1"
+          workspace={{ id: 'workspace-uuid', personal: false } as any}
+          currentUserId="user-1"
+        />
+      </QueryClientProvider>
+    );
+
+    expect(screen.getByTestId('task-board-loading-state')).toBeInTheDocument();
+    expect(screen.getByTestId('task-board-loading-state')).not.toHaveClass(
+      '-m-4'
+    );
+    expect(screen.getByTestId('kanban-skeleton')).toBeInTheDocument();
+    expect(screen.queryByText('Loading board...')).not.toBeInTheDocument();
+  });
+
+  it('can render the shared task board loading state as a full-bleed route root', () => {
+    getWorkspaceTaskBoardMock.mockReturnValue(new Promise(() => {}));
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <BoardClient
+          boardId="board-1"
+          workspace={{ id: 'workspace-uuid', personal: false } as any}
+          currentUserId="user-1"
+          rootLoading
+        />
+      </QueryClientProvider>
+    );
+
+    expect(screen.getByTestId('task-board-loading-state')).toHaveClass(
+      '-m-4',
+      'h-[calc(100dvh+2rem)]',
+      'w-[calc(100%+2rem)]'
+    );
+  });
+
   it('can revalidate loaded board lists without invalidating visible task caches', async () => {
     const queryClient = new QueryClient({
       defaultOptions: {
@@ -154,6 +251,49 @@ describe('BoardClient', () => {
     expect(revalidateLoadedListsMock).toHaveBeenCalledTimes(1);
   });
 
+  it('revalidates loaded lists for relation broadcasts without invalidating visible task caches', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+    const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries');
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <BoardClient
+          boardId="board-1"
+          workspace={{ id: 'workspace-uuid', personal: false } as any}
+          currentUserId="user-1"
+        />
+      </QueryClientProvider>
+    );
+
+    expect(await screen.findByTestId('board-views')).toBeInTheDocument();
+
+    const realtimeOptions = useBoardRealtimeMock.mock.calls.find(
+      ([boardId]) => boardId === 'board-1'
+    )?.[1] as
+      | {
+          onTaskRelationsChange?: (taskIds: string[]) => void;
+        }
+      | undefined;
+
+    await act(async () => {
+      realtimeOptions?.onTaskRelationsChange?.(['task-1']);
+    });
+
+    expect(invalidateSpy).not.toHaveBeenCalledWith({
+      queryKey: ['tasks', 'board-1'],
+    });
+    expect(invalidateSpy).not.toHaveBeenCalledWith({
+      queryKey: ['tasks-full', 'board-1'],
+    });
+    expect(revalidateLoadedListsMock).toHaveBeenCalledTimes(1);
+  });
+
   it('throttles focus-driven list revalidation for thirty seconds', async () => {
     const nowSpy = vi.spyOn(Date, 'now').mockReturnValue(100_000);
     const queryClient = new QueryClient({