@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/calendar-app/components/tasks-sidebar-content.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  Bot,
+  CalendarClock,
+  LayoutDashboard,
+  PanelLeftClose,
+  PanelRightClose,
+  Repeat,
+} from '@tuturuuu/icons';
+import type { AIChat } from '@tuturuuu/types';
+import type { ComponentType } from 'react';
+import { useState } from 'react';
+import { Button } from '../../button';
+import { Dialog } from '../../dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../tabs';
+import type { ExtendedWorkspaceTask } from '../../time-tracker/types';
+import { HabitsPanel } from './habits-panel';
+import PriorityView from './priority-view';
+import { TaskSchedulerPanel } from './task-scheduler-panel';
+import TimeTracker from './time-tracker';
+
+interface ChatComponentProps {
+  wsId: string;
+  hasKeys: { openAI: boolean; anthropic: boolean; google: boolean };
+  chats: AIChat[];
+  count: number | null;
+  locale: string;
+  disableScrollToBottom?: boolean;
+  disableScrollToTop?: boolean;
+}
+
+interface TasksSidebarContentProps {
+  wsId: string;
+  assigneeId: string;
+  tasks?: ExtendedWorkspaceTask[]; // Accept tasks as a prop
+  hasKeys?: { openAI: boolean; anthropic: boolean; google: boolean };
+  chats?: AIChat[];
+  count?: number | null;
+  locale?: string;
+  hasAiChatAccess?: boolean;
+  /** Optional Chat component to render in the AI Chat tab. If not provided, the tab will show a placeholder. */
+  ChatComponent?: ComponentType<ChatComponentProps>;
+}
+
+export default function TasksSidebarContent({
+  wsId,
+  assigneeId,
+  tasks = [],
+  hasKeys = { openAI: false, anthropic: false, google: false },
+  chats = [],
+  count = 0,
+  locale = 'en',
+  hasAiChatAccess = true,
+  ChatComponent,
+}: TasksSidebarContentProps) {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [activeTab, setActiveTab] = useState('tasks');
+  const queryClient = useQueryClient();
+
+  const handleEventCreated = () => {
+    // Invalidate calendar events query to refresh the calendar
+    queryClient.invalidateQueries({ queryKey: ['calendarEvents', wsId] });
+  };
+
+  if (isCollapsed) {
+    return (
+      <div className="ml-2 hidden h-full flex-col items-center rounded-lg border border-border bg-background/60 p-2 shadow-lg backdrop-blur-md transition-all duration-300 ease-in-out hover:bg-background/70 xl:flex">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsCollapsed(false)}
+          aria-label="Expand sidebar"
+          className="group relative overflow-hidden rounded-lg transition-all duration-200 hover:scale-105 hover:bg-accent/60"
+        >
+          <PanelLeftClose className="h-5 w-5 text-foreground transition-transform duration-200" />
+          <div className="absolute inset-0 -z-10 bg-linear-to-r from-dynamic-blue/20 to-dynamic-purple/20 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <Dialog>
+      <div className="@container slide-in-from-right-5 ml-2 flex h-full max-h-screen w-1/3 flex-col rounded-lg border border-border bg-background/60 text-foreground shadow-xl backdrop-blur-md transition-all duration-500 ease-out xl:flex">
+        {/* Header */}
+        <div className="@container flex items-center justify-between rounded-t-lg border-border/50 border-b bg-linear-to-r from-background/80 to-background/60 px-4 py-3 backdrop-blur-sm">
+          <div className="flex w-full items-center justify-between gap-1">
+            <div className="transition-all duration-300 hover:scale-105">
+              <TimeTracker wsId={wsId} tasks={tasks} />
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsCollapsed(true)}
+              aria-label="Collapse sidebar"
+              className="group relative overflow-hidden rounded-lg transition-all duration-200 hover:scale-105 hover:bg-accent/60"
+            >
+              <PanelRightClose className="h-5 w-5 text-foreground transition-transform duration-200" />
+              <div className="absolute inset-0 -z-10 bg-linear-to-r from-dynamic-red/20 to-dynamic-orange/20 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Tabs Navigation */}
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="flex min-h-0 flex-1 flex-col gap-0"
+        >
+          <div className="border-border/50 border-b bg-muted/10 p-2">
+            <TabsList className="grid h-auto w-full grid-cols-4 gap-2 bg-transparent p-0">
+              <TabsTrigger
+                value="tasks"
+                className="group @container relative overflow-hidden rounded-lg border border-transparent transition-all duration-300 hover:border-border/50 hover:bg-accent/60 data-[state=active]:border-border/50 data-[state=active]:bg-background data-[state=active]:shadow-md"
+              >
+                <div className="absolute inset-0 -z-10 bg-linear-to-r from-dynamic-blue/10 to-dynamic-cyan/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+                <LayoutDashboard className="h-4 w-4 transition-colors duration-200" />
+                <span className="@[80px]:inline hidden transition-all duration-200">
+                  Tasks
+                </span>
+                <span className="@[80px]:hidden transition-all duration-200">
+                  T
+                </span>
+              </TabsTrigger>
+              <TabsTrigger
+                value="habits"
+                className="group @container relative overflow-hidden rounded-lg border border-transparent transition-all duration-300 hover:border-border/50 hover:bg-accent/60 data-[state=active]:border-border/50 data-[state=active]:bg-background data-[state=active]:shadow-md"
+              >
+                <div className="absolute inset-0 -z-10 bg-linear-to-r from-dynamic-orange/10 to-dynamic-yellow/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+                <Repeat className="h-4 w-4 transition-colors duration-200" />
+                <span className="@[80px]:inline hidden transition-all duration-200">
+                  Habits
+                </span>
+                <span className="@[80px]:hidden transition-all duration-200">
+                  H
+                </span>
+              </TabsTrigger>
+              <TabsTrigger
+                value="schedule"
+                className="group @container relative overflow-hidden rounded-lg border border-transparent transition-all duration-300 hover:border-border/50 hover:bg-accent/60 data-[state=active]:border-border/50 data-[state=active]:bg-background data-[state=active]:shadow-md"
+              >
+                <div className="absolute inset-0 -z-10 bg-linear-to-r from-dynamic-green/10 to-dynamic-green/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+                <CalendarClock className="h-4 w-4 transition-colors duration-200" />
+                <span className="@[80px]:inline hidden transition-all duration-200">
+                  Schedule
+                </span>
+                <span className="@[80px]:hidden transition-all duration-200">
+                  S
+                </span>
+              </TabsTrigger>
+              <TabsTrigger
+                value="ai-chat"
+                className="group @container relative overflow-hidden rounded-lg border border-transparent transition-all duration-300 hover:border-border/50 hover:bg-accent/60 data-[state=active]:border-border/50 data-[state=active]:bg-background data-[state=active]:shadow-md"
+              >
+                <div className="absolute inset-0 -z-10 bg-linear-to-r from-dynamic-purple/10 to-dynamic-pink/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+                <Bot className="h-4 w-4 transition-colors duration-200" />
+                <span className="@[80px]:inline hidden transition-all duration-200">
+                  AI Chat
+                </span>
+                <span className="@[80px]:hidden transition-all duration-200">
+                  AI
+                </span>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* Tasks Tab Content */}
+          <TabsContent
+            value="tasks"
+            className="fade-in-50 m-0 flex min-h-0 flex-1 animate-in flex-col space-y-4 overflow-y-auto p-4 pb-2 duration-300"
+          >
+            <div className="mx-auto w-full max-w-lg p-0">
+              <PriorityView
+                wsId={wsId}
+                allTasks={tasks}
+                assigneeId={assigneeId}
+              />
+            </div>
+          </TabsContent>
+
+          {/* Habits Tab Content */}
+          <TabsContent
+            value="habits"
+            className="fade-in-50 m-0 min-h-0 flex-1 animate-in overflow-hidden duration-300"
+          >
+            <HabitsPanel wsId={wsId} onEventCreated={handleEventCreated} />
+          </TabsContent>
+
+          {/* Schedule Tab Content */}
+          <TabsContent
+            value="schedule"
+            className="fade-in-50 m-0 min-h-0 flex-1 animate-in overflow-hidden duration-300"
+          >
+            <TaskSchedulerPanel
+              wsId={wsId}
+              userId={assigneeId}
+              onEventCreated={handleEventCreated}
+            />
+          </TabsContent>
+
+          {/* AI Chat Tab Content */}
+          {hasAiChatAccess && (
+            <TabsContent
+              value="ai-chat"
+              className="fade-in-50 m-0 min-h-0 flex-1 animate-in overflow-y-auto px-2 duration-300"
+            >
+              <div className="relative h-full min-h-0 overflow-y-auto py-2">
+                {ChatComponent ? (
+                  <ChatComponent
+                    wsId={wsId}
+                    hasKeys={hasKeys}
+                    chats={chats}
+                    count={count}
+                    locale={locale}
+                    disableScrollToBottom
+                    disableScrollToTop
+                  />
+                ) : (
+                  <div className="flex h-full items-center justify-center text-muted-foreground">
+                    <p>AI Chat is not available</p>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          )}
+        </Tabs>
+      </div>
+    </Dialog>
+  );
+}

package/src/components/ui/calendar-app/components/tasks-sidebar.tsx

@@ -0,0 +1,143 @@
+import { createAdminClient } from '@tuturuuu/supabase/next/server';
+import type { ExtendedWorkspaceTask } from '../../time-tracker/types';
+import { CalendarSidebar } from './sidebar';
+
+interface TasksSidebarProps {
+  resolvedWsId: string;
+  locale: string;
+  userId: string;
+}
+
+export default async function TasksSidebar({
+  resolvedWsId,
+  locale,
+  userId,
+}: TasksSidebarProps) {
+  // Use the same RPC as the tasks page to get accessible tasks
+  const supabase = await createAdminClient({ noCookie: true });
+  const { data: rpcTasks } = await supabase.rpc('get_user_accessible_tasks', {
+    p_user_id: userId,
+    p_ws_id: resolvedWsId,
+    p_include_deleted: false,
+    p_list_statuses: ['not_started', 'active'],
+  });
+
+  // Map RPC results to match expected structure (same as my-tasks-data-loader.tsx)
+  const tasksBase = (rpcTasks?.map((task) => ({
+    id: task.task_id,
+    name: task.task_name,
+    description: task.task_description,
+    creator_id: task.task_creator_id,
+    list_id: task.task_list_id,
+    start_date: task.task_start_date,
+    end_date: task.task_end_date,
+    due_date: task.task_end_date, // Map end_date to due_date for display
+    priority: task.task_priority,
+    completed_at: task.task_completed_at,
+    closed_at: task.task_closed_at,
+    deleted_at: task.task_deleted_at,
+    estimation_points: task.task_estimation_points,
+    created_at: task.task_created_at,
+    // Scheduling fields are per-user now. These legacy RPC fields may not exist after migration.
+  })) || []) as ExtendedWorkspaceTask[];
+
+  // Enrich tasks with the *actual* workspace UUID (ws_id) via list -> board relation.
+  // This is critical for personal workspace views where tasks may belong to other workspaces.
+  const listIds = Array.from(
+    new Set(tasksBase.map((t) => t.list_id).filter(Boolean))
+  ) as string[];
+
+  const wsIdByListId = new Map<string, string>();
+  if (listIds.length > 0) {
+    const { data: lists } = await supabase
+      .from('task_lists')
+      .select(
+        `
+        id,
+        workspace_boards!inner (
+          ws_id
+        )
+      `
+      )
+      .in('id', listIds);
+
+    (lists as any[] | null)?.forEach((l) => {
+      const resolvedTaskWsId = l?.workspace_boards?.ws_id;
+      if (l?.id && resolvedTaskWsId) wsIdByListId.set(l.id, resolvedTaskWsId);
+    });
+  }
+
+  const tasks = tasksBase.map((t) => ({
+    ...t,
+    ws_id:
+      (t.list_id ? wsIdByListId.get(t.list_id) : undefined) ??
+      // Fallback: if a task is list-less, treat it as current workspace-scoped.
+      resolvedWsId,
+  })) as ExtendedWorkspaceTask[];
+
+  // Merge per-user scheduling settings so the calendar UI can still show duration/hour type.
+  const taskIds = tasks.map((t) => t.id).filter(Boolean);
+  const settingsByTaskId = new Map<
+    string,
+    {
+      total_duration: number | null;
+      is_splittable: boolean | null;
+      min_split_duration_minutes: number | null;
+      max_split_duration_minutes: number | null;
+      calendar_hours: any;
+      auto_schedule: boolean | null;
+    }
+  >();
+
+  if (taskIds.length > 0) {
+    const { data: schedulingRows } = await (supabase as any)
+      .from('task_user_scheduling_settings')
+      .select(
+        `
+        task_id,
+        total_duration,
+        is_splittable,
+        min_split_duration_minutes,
+        max_split_duration_minutes,
+        calendar_hours,
+        auto_schedule
+      `
+      )
+      .eq('user_id', userId)
+      .in('task_id', taskIds);
+
+    (schedulingRows as any[] | null)?.forEach((r) => {
+      if (r?.task_id) settingsByTaskId.set(r.task_id, r);
+    });
+  }
+
+  const tasksWithScheduling = tasks.map((t) => {
+    const s = settingsByTaskId.get(t.id);
+    return s
+      ? ({
+          ...t,
+          total_duration: s.total_duration,
+          is_splittable: s.is_splittable ?? false,
+          min_split_duration_minutes: s.min_split_duration_minutes ?? null,
+          max_split_duration_minutes: s.max_split_duration_minutes ?? null,
+          calendar_hours: s.calendar_hours ?? null,
+          auto_schedule: s.auto_schedule ?? false,
+        } as ExtendedWorkspaceTask)
+      : t;
+  });
+
+  // Personal workspace = workspace ID matches user ID (no need for auto-assignment)
+  const isPersonalWorkspace = resolvedWsId === userId;
+
+  return (
+    <CalendarSidebar
+      // IMPORTANT: child components (task scheduler, schedule endpoints) expect a UUID.
+      // Always pass the resolved workspace UUID, not the route slug (e.g. "personal").
+      wsId={resolvedWsId}
+      assigneeId={userId}
+      tasks={tasksWithScheduling}
+      locale={locale}
+      isPersonalWorkspace={isPersonalWorkspace}
+    />
+  );
+}

package/src/components/ui/calendar-app/components/test-event-generator-button.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useQueryClient } from '@tanstack/react-query';
+import { FlaskConical, Loader2 } from '@tuturuuu/icons';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useState } from 'react';
+import { Button } from '../../button';
+import { toast } from '../../sonner';
+
+// Extend dayjs with timezone and UTC plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+interface TestEventGeneratorButtonProps {
+  wsId: string;
+}
+
+export default function TestEventGeneratorButton({
+  wsId,
+}: TestEventGeneratorButtonProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const queryClient = useQueryClient();
+
+  const generateTestEvents = async () => {
+    if (isLoading) return;
+
+    setIsLoading(true);
+    toast.loading('Generating test events...', {
+      id: 'generate-test-events',
+    });
+
+    try {
+      // Get user's timezone
+      const userTimezone = dayjs.tz.guess();
+
+      const response = await fetch('/api/test-events', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          wsId,
+          timezone: userTimezone,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to generate test events');
+      }
+
+      toast.success('Test events generated!', {
+        id: 'generate-test-events',
+        description: data.message,
+        duration: 5000,
+      });
+
+      await queryClient.invalidateQueries({
+        queryKey: ['calendarEvents', wsId],
+      });
+    } catch (error) {
+      console.error('Test event generation error:', error);
+      toast.error('Failed to generate test events', {
+        id: 'generate-test-events',
+        description:
+          error instanceof Error
+            ? error.message
+            : 'An unexpected error occurred',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      onClick={generateTestEvents}
+      disabled={isLoading}
+      variant="outline"
+      size="sm"
+      className="w-full md:w-fit"
+    >
+      {isLoading ? (
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+      ) : (
+        <FlaskConical className="mr-2 h-4 w-4" />
+      )}
+      <span>{isLoading ? 'Generating...' : 'Generate Test Data'}</span>
+    </Button>
+  );
+}

package/src/components/ui/calendar-app/components/time-tracker/components/active-session-card.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { CheckCircle, MapPin, Pause, Square, Tag } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import { Badge } from '../../../../badge';
+import { Button } from '../../../../button';
+import type {
+  ExtendedWorkspaceTask,
+  SessionWithRelations,
+} from '../../../../time-tracker/types';
+import { formatTime, getCategoryColor } from '../utils';
+
+interface ActiveSessionCardProps {
+  session: SessionWithRelations;
+  elapsedTime: number;
+  isLoading: boolean;
+  onPause: () => void;
+  onStop: () => void;
+  tasks: ExtendedWorkspaceTask[];
+}
+
+export function ActiveSessionCard({
+  session,
+  elapsedTime,
+  isLoading,
+  onPause,
+  onStop,
+  tasks,
+}: ActiveSessionCardProps) {
+  const taskWithDetails = tasks.find((t) => t.id === session.task?.id);
+
+  return (
+    <div className="space-y-4 text-center">
+      <div className="relative overflow-hidden rounded-lg bg-linear-to-br from-dynamic-red/10 to-dynamic-red/20 @lg:p-6 p-4">
+        <div className="absolute inset-0 animate-pulse bg-linear-to-r from-dynamic-red/10 to-transparent opacity-30" />
+        <div className="relative">
+          <div className="font-bold font-mono @lg:text-4xl text-3xl text-dynamic-red transition-all duration-300">
+            {formatTime(elapsedTime)}
+          </div>
+          <div className="mt-2 flex items-center gap-2 @lg:text-sm text-dynamic-red/70 text-xs">
+            <div className="h-2 w-2 animate-pulse rounded-full bg-dynamic-red" />
+            Started at {new Date(session.start_time).toLocaleTimeString()}
+          </div>
+        </div>
+      </div>
+
+      <div className="text-left">
+        <h3 className="font-medium @lg:text-base text-sm">{session.title}</h3>
+        {session.description && (
+          <p className="mt-1 @lg:text-sm text-muted-foreground text-xs">
+            {session.description}
+          </p>
+        )}
+        <div className="mt-2 flex flex-wrap @lg:gap-2 gap-1">
+          {session.category && (
+            <Badge
+              className={cn(
+                '@lg:text-sm text-xs',
+                getCategoryColor(session.category.color || 'BLUE')
+              )}
+            >
+              {session.category.name}
+            </Badge>
+          )}
+          {session.task && (
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1.5 rounded-md border border-dynamic-blue/20 bg-linear-to-r from-dynamic-blue/10 to-dynamic-blue/5 px-2 py-1">
+                <CheckCircle className="h-3 w-3 text-dynamic-blue" />
+                <span className="font-medium @lg:text-sm text-dynamic-blue text-xs">
+                  {session.task.name}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+        {taskWithDetails?.board_name && taskWithDetails?.list_name && (
+          <div className="mt-1 flex items-center gap-2 text-muted-foreground text-xs">
+            <div className="flex items-center gap-1">
+              <MapPin className="h-3 w-3" />
+              <span>{taskWithDetails.board_name}</span>
+            </div>
+            <span>-</span>
+            <div className="flex items-center gap-1">
+              <Tag className="h-3 w-3" />
+              <span>{taskWithDetails.list_name}</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex gap-2">
+        <Button
+          onClick={onPause}
+          disabled={isLoading}
+          variant="outline"
+          className="flex-1"
+        >
+          <Pause className="mr-2 h-4 w-4" />
+          Pause
+        </Button>
+        <Button
+          onClick={onStop}
+          disabled={isLoading}
+          variant="destructive"
+          className="flex-1"
+        >
+          <Square className="mr-2 h-4 w-4" />
+          Stop
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/calendar-app/components/time-tracker/components/index.ts

@@ -0,0 +1,3 @@
+export { ActiveSessionCard } from './active-session-card';
+export { SessionCard } from './session-card';
+export { StatsCards } from './stats-cards';