@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/tu-do/cycles/task-cycles-page.tsx

@@ -0,0 +1,103 @@
+import { createClient } from '@tuturuuu/supabase/next/server';
+import { TaskCyclesClient } from '@tuturuuu/ui/tu-do/cycles/task-cycles-client';
+import { getCurrentUser } from '@tuturuuu/utils/user-helper';
+import { getPermissions, getWorkspace } from '@tuturuuu/utils/workspace-helper';
+import { notFound, redirect } from 'next/navigation';
+
+interface Props {
+  params: Promise<{
+    wsId: string;
+  }>;
+}
+
+type CycleRow = {
+  id: string;
+  name: string;
+  description: string | null;
+  status: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  created_at: string;
+  creator: {
+    id: string;
+    display_name: string | null;
+    avatar_url: string | null;
+  } | null;
+  task_cycle_tasks: { task_id: string }[] | null;
+};
+
+/**
+ * Shared Task Cycles Page component.
+ * Handles workspace resolution, permissions, and data fetching.
+ * Used by both apps/web and apps/tasks.
+ */
+export default async function TaskCyclesPage({ params }: Props) {
+  const { wsId: id } = await params;
+
+  const user = await getCurrentUser();
+  if (!user) redirect('/login');
+
+  const workspace = await getWorkspace(id);
+  if (!workspace) notFound();
+
+  const wsId = workspace.id;
+
+  const permissions = await getPermissions({ wsId });
+  if (!permissions) notFound();
+  const { withoutPermission } = permissions;
+  if (withoutPermission('manage_projects')) redirect(`/${wsId}`);
+
+  const supabase = await createClient();
+
+  const { data: cyclesData, error } = await supabase
+    .from('task_cycles')
+    .select(
+      `
+        *,
+        creator:users!task_cycles_creator_id_fkey(
+          id, display_name, avatar_url
+        ),
+        task_cycle_tasks(task_id)
+      `
+    )
+    .eq('ws_id', wsId)
+    .order('created_at', { ascending: false });
+
+  if (error) {
+    console.error('Error fetching task cycles:', error);
+    notFound();
+  }
+
+  const toCycleStatus = (value: string | null) => {
+    const allowed = ['planned', 'active', 'completed', 'cancelled'] as const;
+    if (!value) return null;
+    return allowed.includes(value as (typeof allowed)[number])
+      ? (value as (typeof allowed)[number])
+      : null;
+  };
+
+  const cycles =
+    (cyclesData as CycleRow[] | null)?.map((cycle) => ({
+      id: cycle.id,
+      name: cycle.name,
+      description: cycle.description,
+      status: toCycleStatus(cycle.status),
+      start_date: cycle.start_date,
+      end_date: cycle.end_date,
+      created_at: cycle.created_at,
+      creator: cycle.creator,
+      tasksCount: cycle.task_cycle_tasks?.length ?? 0,
+    })) ?? [];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="font-bold text-2xl">Task Cycles</h1>
+        <p className="text-muted-foreground">
+          Time-box work into cycles (sprints) and track progress.
+        </p>
+      </div>
+      <TaskCyclesClient wsId={wsId} initialCycles={cycles} />
+    </div>
+  );
+}

package/src/components/ui/tu-do/drafts/draft-card.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import {
+  Calendar,
+  Flag,
+  FolderKanban,
+  MoreHorizontal,
+  Pencil,
+  Play,
+  Tags,
+  Trash2,
+  Users,
+} from '@tuturuuu/icons';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Card, CardContent, CardHeader } from '@tuturuuu/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import { cn } from '@tuturuuu/utils/format';
+import { getDescriptionText } from '@tuturuuu/utils/text-helper';
+import { useTranslations } from 'next-intl';
+
+export interface TaskDraft {
+  id: string;
+  ws_id: string;
+  creator_id: string;
+  board_id: string | null;
+  list_id: string | null;
+  name: string;
+  description: string | null;
+  priority: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  estimation_points: number | null;
+  label_ids: string[];
+  assignee_ids: string[];
+  project_ids: string[];
+  created_at: string;
+  updated_at: string;
+}
+
+interface DraftCardProps {
+  draft: TaskDraft;
+  onConvert: (draft: TaskDraft) => void;
+  onEdit: (draft: TaskDraft) => void;
+  onClick?: (draft: TaskDraft) => void;
+  onDelete: (draftId: string) => void;
+  isDeleting?: boolean;
+}
+
+const priorityConfig: Record<string, { label: string; className: string }> = {
+  critical: {
+    label: 'Urgent',
+    className: 'border-dynamic-red/40 bg-dynamic-red/10 text-dynamic-red',
+  },
+  high: {
+    label: 'High',
+    className:
+      'border-dynamic-orange/40 bg-dynamic-orange/10 text-dynamic-orange',
+  },
+  normal: {
+    label: 'Medium',
+    className:
+      'border-dynamic-yellow/40 bg-dynamic-yellow/10 text-dynamic-yellow',
+  },
+  low: {
+    label: 'Low',
+    className: 'border-dynamic-blue/40 bg-dynamic-blue/10 text-dynamic-blue',
+  },
+};
+
+export function DraftCard({
+  draft,
+  onConvert,
+  onEdit,
+  onClick,
+  onDelete,
+  isDeleting,
+}: DraftCardProps) {
+  const t = useTranslations('task-drafts');
+  const priority = draft.priority ? priorityConfig[draft.priority] : null;
+
+  const formattedDate = new Date(draft.created_at).toLocaleDateString(
+    undefined,
+    { month: 'short', day: 'numeric', year: 'numeric' }
+  );
+
+  return (
+    <Card
+      className={cn(
+        'cursor-pointer transition-all duration-200 hover:shadow-md',
+        isDeleting && 'pointer-events-none opacity-50'
+      )}
+      onClick={() => onClick?.(draft)}
+    >
+      <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 pb-2">
+        <div className="min-w-0 flex-1 space-y-1">
+          <h3 className="font-semibold text-sm leading-tight">{draft.name}</h3>
+          {draft.description && (
+            <p className="line-clamp-2 text-muted-foreground text-xs">
+              {getDescriptionText(draft.description)}
+            </p>
+          )}
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 shrink-0"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => onConvert(draft)}>
+              <Play className="mr-2 h-4 w-4" />
+              {t('convert_to_task')}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => onEdit(draft)}>
+              <Pencil className="mr-2 h-4 w-4" />
+              {t('edit_draft')}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={() => onDelete(draft.id)}
+              className="text-destructive focus:text-destructive"
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              {t('delete_draft')}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </CardHeader>
+
+      <CardContent className="space-y-2 pt-0">
+        <div className="flex flex-wrap items-center gap-2">
+          {priority && (
+            <Badge
+              variant="outline"
+              className={cn('text-xs', priority.className)}
+            >
+              <Flag className="mr-1 h-3 w-3" />
+              {priority.label}
+            </Badge>
+          )}
+
+          {draft.assignee_ids.length > 0 && (
+            <Badge variant="secondary" className="text-xs">
+              <Users className="mr-1 h-3 w-3" />
+              {draft.assignee_ids.length}
+            </Badge>
+          )}
+
+          {draft.label_ids.length > 0 && (
+            <Badge variant="secondary" className="text-xs">
+              <Tags className="mr-1 h-3 w-3" />
+              {draft.label_ids.length}
+            </Badge>
+          )}
+
+          {draft.project_ids.length > 0 && (
+            <Badge variant="secondary" className="text-xs">
+              <FolderKanban className="mr-1 h-3 w-3" />
+              {draft.project_ids.length}
+            </Badge>
+          )}
+
+          {draft.end_date && (
+            <Badge variant="secondary" className="text-xs">
+              <Calendar className="mr-1 h-3 w-3" />
+              {new Date(draft.end_date).toLocaleDateString(undefined, {
+                month: 'short',
+                day: 'numeric',
+              })}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between pt-1">
+          <span className="text-muted-foreground text-xs">{formattedDate}</span>
+          <Button
+            size="sm"
+            variant="outline"
+            className="h-7 text-xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              onConvert(draft);
+            }}
+          >
+            <Play className="mr-1 h-3 w-3" />
+            {t('convert_to_task')}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/tu-do/drafts/draft-convert-dialog.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import {
+  listWorkspaceTaskBoards,
+  listWorkspaceTaskLists,
+} from '@tuturuuu/internal-api';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { Label } from '@tuturuuu/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { toast } from '@tuturuuu/ui/sonner';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import type { TaskDraft } from './draft-card';
+
+interface DraftConvertDialogProps {
+  draft: TaskDraft | null;
+  wsId: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onConverted: () => void;
+}
+
+export function DraftConvertDialog({
+  draft,
+  wsId,
+  isOpen,
+  onClose,
+  onConverted,
+}: DraftConvertDialogProps) {
+  const t = useTranslations('task-drafts');
+  const [selectedBoardId, setSelectedBoardId] = useState<string>('');
+  const [selectedListId, setSelectedListId] = useState<string>('');
+  const [isConverting, setIsConverting] = useState(false);
+
+  // Sync selections when draft changes (useState initializer only runs on mount)
+  useEffect(() => {
+    if (draft) {
+      setSelectedBoardId(draft.board_id ?? '');
+      setSelectedListId(draft.list_id ?? '');
+    }
+  }, [draft]);
+
+  const { data: boards = [] } = useQuery({
+    queryKey: ['workspace-boards', wsId],
+    queryFn: async () => {
+      const pageSize = 200;
+      const allBoards: Awaited<
+        ReturnType<typeof listWorkspaceTaskBoards>
+      >['boards'] = [];
+      let page = 1;
+
+      while (true) {
+        const payload = await listWorkspaceTaskBoards(wsId, {
+          page,
+          pageSize,
+        });
+
+        const pageBoards = payload.boards ?? [];
+        allBoards.push(...pageBoards);
+
+        if (pageBoards.length < pageSize) {
+          break;
+        }
+
+        page += 1;
+      }
+
+      return allBoards
+        .filter((board) => !board.deleted_at)
+        .map((board) => ({ id: board.id, name: board.name ?? '' }));
+    },
+    enabled: isOpen,
+  });
+
+  const { data: lists = [] } = useQuery({
+    queryKey: ['board-lists', selectedBoardId],
+    queryFn: async () => {
+      if (!selectedBoardId) return [];
+      const payload = await listWorkspaceTaskLists(wsId, selectedBoardId);
+      return payload.lists ?? [];
+    },
+    enabled: isOpen && !!selectedBoardId,
+  });
+
+  const handleBoardChange = (boardId: string) => {
+    setSelectedBoardId(boardId);
+    setSelectedListId('');
+  };
+
+  const handleConvert = async () => {
+    if (!draft || !selectedListId) return;
+
+    setIsConverting(true);
+    try {
+      const res = await fetch(
+        `/api/v1/workspaces/${wsId}/task-drafts/${draft.id}/convert`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ listId: selectedListId }),
+        }
+      );
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || 'Failed to convert draft');
+      }
+
+      toast.success(t('converted_success'));
+      onConverted();
+      onClose();
+    } catch (error) {
+      console.error('Error converting draft:', error);
+      toast.error(
+        error instanceof Error ? error.message : 'Failed to convert draft'
+      );
+    } finally {
+      setIsConverting(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t('convert_to_task')}</DialogTitle>
+          <DialogDescription>{draft?.name}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label>{t('select_board')}</Label>
+            <Select value={selectedBoardId} onValueChange={handleBoardChange}>
+              <SelectTrigger>
+                <SelectValue placeholder={t('select_board')} />
+              </SelectTrigger>
+              <SelectContent>
+                {boards.map((board) => (
+                  <SelectItem key={board.id} value={board.id}>
+                    {board.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label>{t('select_list')}</Label>
+            <Select
+              value={selectedListId}
+              onValueChange={setSelectedListId}
+              disabled={!selectedBoardId}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={t('select_list')} />
+              </SelectTrigger>
+              <SelectContent>
+                {lists.map((list) => (
+                  <SelectItem key={list.id} value={list.id}>
+                    {list.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isConverting}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleConvert}
+            disabled={!selectedListId || isConverting}
+          >
+            {isConverting ? t('converting') : t('convert_to_task')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/tu-do/drafts/drafts-page.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { FileText } from '@tuturuuu/icons';
+import { toast } from '@tuturuuu/ui/sonner';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { useTaskDialogContext } from '../providers/task-dialog-provider';
+import { DraftCard, type TaskDraft } from './draft-card';
+import { DraftConvertDialog } from './draft-convert-dialog';
+
+interface DraftsPageProps {
+  wsId: string;
+}
+
+export function DraftsPage({ wsId }: DraftsPageProps) {
+  const t = useTranslations('task-drafts');
+  const queryClient = useQueryClient();
+  const { editDraft } = useTaskDialogContext();
+  const [convertDraft, setConvertDraft] = useState<TaskDraft | null>(null);
+
+  const { data: drafts = [], isLoading } = useQuery<TaskDraft[]>({
+    queryKey: ['task-drafts', wsId],
+    queryFn: async () => {
+      const res = await fetch(`/api/v1/workspaces/${wsId}/task-drafts`);
+      if (!res.ok) throw new Error('Failed to fetch drafts');
+      const json = await res.json();
+      return json.data;
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (draftId: string) => {
+      const res = await fetch(
+        `/api/v1/workspaces/${wsId}/task-drafts/${draftId}`,
+        { method: 'DELETE' }
+      );
+      if (!res.ok) throw new Error('Failed to delete draft');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['task-drafts', wsId] });
+      toast.success(t('deleted_success'));
+    },
+    onError: () => {
+      toast.error('Failed to delete draft');
+    },
+  });
+
+  const handleConverted = () => {
+    queryClient.invalidateQueries({ queryKey: ['task-drafts', wsId] });
+    setConvertDraft(null);
+  };
+
+  const handleEdit = (draft: TaskDraft) => {
+    editDraft(draft);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (drafts.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-3 py-16 text-center">
+        <FileText className="h-12 w-12 text-muted-foreground/50" />
+        <div>
+          <h3 className="font-medium text-muted-foreground">{t('empty')}</h3>
+          <p className="mt-1 max-w-sm text-muted-foreground/70 text-sm">
+            {t('empty_description')}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {drafts.map((draft) => (
+          <DraftCard
+            key={draft.id}
+            draft={draft}
+            onConvert={setConvertDraft}
+            onEdit={handleEdit}
+            onClick={handleEdit}
+            onDelete={(id) => deleteMutation.mutate(id)}
+            isDeleting={deleteMutation.isPending}
+          />
+        ))}
+      </div>
+
+      <DraftConvertDialog
+        draft={convertDraft}
+        wsId={wsId}
+        isOpen={!!convertDraft}
+        onClose={() => setConvertDraft(null)}
+        onConverted={handleConverted}
+      />
+    </>
+  );
+}

package/src/components/ui/tu-do/drafts/task-drafts-page.tsx

@@ -0,0 +1,90 @@
+import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
+import { Separator } from '@tuturuuu/ui/separator';
+import { DraftsPage } from '@tuturuuu/ui/tu-do/drafts/drafts-page';
+import { getCurrentUser } from '@tuturuuu/utils/user-helper';
+import { getPermissions, getWorkspace } from '@tuturuuu/utils/workspace-helper';
+import { notFound, redirect } from 'next/navigation';
+import { getTranslations } from 'next-intl/server';
+
+/**
+ * Configuration options for TaskDraftsPage
+ * Allows customization of UI elements based on the consuming app
+ */
+interface PageConfig {
+  /**
+   * Whether to show the FeatureSummary component with enhanced UI
+   * @default false - shows simple header
+   */
+  showFeatureSummary?: boolean;
+  /**
+   * Whether to show a separator between header and content
+   * @default false
+   */
+  showSeparator?: boolean;
+}
+
+interface Props {
+  params: Promise<{
+    wsId: string;
+  }>;
+  /**
+   * Optional configuration for UI customization
+   */
+  config?: PageConfig;
+}
+
+/**
+ * Shared Task Drafts Page component.
+ * Handles workspace resolution, permissions, and data fetching.
+ * Used by both apps/web and apps/tasks.
+ */
+export default async function TaskDraftsPage({ params, config = {} }: Props) {
+  const { showFeatureSummary = false, showSeparator = false } = config;
+
+  const { wsId: id } = await params;
+
+  const user = await getCurrentUser();
+  if (!user) redirect('/login');
+
+  const workspace = await getWorkspace(id);
+  if (!workspace) notFound();
+
+  const wsId = workspace.id;
+
+  const permissions = await getPermissions({ wsId });
+  if (!permissions) notFound();
+  const { withoutPermission } = permissions;
+  if (withoutPermission('manage_projects')) redirect(`/${wsId}`);
+
+  const t = await getTranslations();
+
+  return (
+    <div className="space-y-6">
+      {showFeatureSummary ? (
+        <>
+          <FeatureSummary
+            pluralTitle={t('task-drafts.title')}
+            singularTitle={t('task-drafts.title')}
+            description={t('task-drafts.empty_description')}
+          />
+          {showSeparator && <Separator />}
+        </>
+      ) : (
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="space-y-2">
+            <h1 className="font-bold text-2xl tracking-tight">
+              {t('task-drafts.title')}
+            </h1>
+            <p className="text-muted-foreground">
+              {t('task-drafts.empty_description')}
+            </p>
+          </div>
+        </div>
+      )}
+      <DraftsPage wsId={wsId} />
+    </div>
+  );
+}
+
+// Re-export the config type for consumers
+export type { PageConfig as TaskDraftsPageConfig };