@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/tu-do/projects/projectId/task-project-detail.tsx

@@ -0,0 +1,365 @@
+'use client';
+
+import { useQueryClient } from '@tanstack/react-query';
+import { FileText, Sparkles, Target, TrendingUp } from '@tuturuuu/icons';
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import { useWorkspaceMembers } from '@tuturuuu/ui/hooks/use-workspace-members';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
+import type { TaskFilters } from '@tuturuuu/ui/tu-do/boards/boardId/task-filter';
+import { TaskDialogProvider } from '@tuturuuu/ui/tu-do/providers/task-dialog-provider';
+import type { ListStatusFilter } from '@tuturuuu/ui/tu-do/shared/board-header';
+import type { ViewType } from '@tuturuuu/ui/tu-do/shared/board-views';
+import { TaskDialogManager } from '@tuturuuu/ui/tu-do/shared/task-dialog-manager';
+import { useRouter } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useCallback, useMemo, useState } from 'react';
+
+import {
+  DocumentsTab,
+  OverviewTab,
+  ProjectHeader,
+  TasksTab,
+  UpdatesTab,
+} from './components';
+import { ProjectOverviewProvider } from './components/project-overview-context';
+import { LinkTaskDialog } from './dialogs';
+import {
+  useAnimationVariants,
+  useProjectForm,
+  useProjectUpdates,
+  useTaskLinking,
+} from './hooks';
+import type { ActiveTab, TaskProjectDetailProps } from './types';
+
+export function TaskProjectDetail({
+  workspace,
+  project,
+  tasks,
+  documents,
+  lists,
+  currentUserId,
+  wsId,
+}: TaskProjectDetailProps) {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const t = useTranslations('task_project_detail.tabs');
+
+  // Animation variants
+  const { fadeInUpVariant, fadeInViewVariant } = useAnimationVariants();
+
+  // Project form state
+  const projectForm = useProjectForm({ wsId, project });
+
+  // Project updates
+  const projectUpdates = useProjectUpdates({ wsId, projectId: project.id });
+
+  // Task linking
+  const taskLinking = useTaskLinking({
+    wsId,
+    projectId: project.id,
+    linkedTasks: tasks,
+  });
+
+  // Workspace members
+  const { data: workspaceMembers = [], isLoading: isLoadingMembers } =
+    useWorkspaceMembers(wsId);
+
+  // Handle task updates - refresh server data
+  const handleUpdate = useCallback(() => {
+    void queryClient.invalidateQueries({
+      queryKey: ['task-project', wsId, project.id],
+    });
+    void queryClient.invalidateQueries({
+      queryKey: ['task-project-tasks', wsId, project.id],
+    });
+    void queryClient.invalidateQueries({
+      queryKey: ['tasks', wsId, `project:${project.id}`],
+    });
+    router.refresh();
+  }, [project.id, queryClient, router, wsId]);
+
+  // Task management state
+  const [activeTab, setActiveTab] = useState<ActiveTab>('overview');
+  const [currentView, setCurrentView] = useState<ViewType>('kanban');
+  const [filters, setFilters] = useState<TaskFilters>({
+    labels: [],
+    assignees: [],
+    projects: [],
+    priorities: [],
+    dueDateRange: null,
+    estimationRange: null,
+    includeMyTasks: false,
+    includeUnassigned: false,
+    sourceBoardIds: [],
+    sourceScope: 'all_visible',
+    sourceWorkspaceIds: [],
+  });
+  const [listStatusFilter, setListStatusFilter] =
+    useState<ListStatusFilter>('all');
+  const [taskOverrides, setTaskOverrides] = useState<
+    Record<string, Partial<Task>>
+  >({});
+  const [isMultiSelectMode, setIsMultiSelectMode] = useState(false);
+
+  // Filter lists based on selected status filter
+  const filteredLists = useMemo(() => {
+    if (listStatusFilter === 'all') {
+      return lists;
+    }
+    return lists.filter((list) => list.status === listStatusFilter);
+  }, [lists, listStatusFilter]);
+
+  // Filter tasks based on filters AND filtered lists
+  const filteredTasks = useMemo(() => {
+    const listIds = new Set(filteredLists.map((list) => list.id));
+    const tasksToFilter = tasks;
+    let result = tasksToFilter.filter((task) => listIds.has(task.list_id));
+
+    // Filter by labels
+    if (filters.labels.length > 0) {
+      result = result.filter((task) => {
+        if (!task.labels || task.labels.length === 0) return false;
+        return filters.labels.some((selectedLabel) =>
+          task.labels?.some((taskLabel) => taskLabel.id === selectedLabel.id)
+        );
+      });
+    }
+
+    // Filter by assignees or "my tasks"
+    if (filters.includeMyTasks && currentUserId) {
+      result = result.filter((task) =>
+        task.assignees?.some((a) => a.id === currentUserId)
+      );
+    } else if (filters.assignees.length > 0) {
+      result = result.filter((task) =>
+        task.assignees?.some((a) =>
+          filters.assignees.some((fa) => fa.id === a.id)
+        )
+      );
+    }
+
+    // Filter by projects
+    if (filters.projects.length > 0) {
+      result = result.filter((task) => {
+        if (!task.projects || task.projects.length === 0) return false;
+        return task.projects.some((pt: { id: string }) =>
+          filters.projects.some((p) => p.id === pt.id)
+        );
+      });
+    }
+
+    // Filter by priorities
+    if (filters.priorities.length > 0) {
+      result = result.filter((task) =>
+        task.priority ? filters.priorities.includes(task.priority) : false
+      );
+    }
+
+    // Filter by due date range
+    if (filters.dueDateRange?.from) {
+      result = result.filter((task) => {
+        if (!task.end_date) return false;
+        const taskDate = new Date(task.end_date);
+        const fromDate = filters.dueDateRange!.from!;
+        const toDate = filters.dueDateRange!.to;
+        return taskDate >= fromDate && (!toDate || taskDate <= toDate);
+      });
+    }
+
+    return result;
+  }, [tasks, filters, filteredLists, currentUserId]);
+
+  // Apply optimistic overrides
+  const effectiveTasks = useMemo(() => {
+    const tasks = !Object.keys(taskOverrides).length
+      ? filteredTasks
+      : filteredTasks.map((t) => {
+          const o = taskOverrides[t.id];
+          return o ? ({ ...t, ...o } as Task) : t;
+        });
+
+    return tasks.filter((task) => !task.deleted_at);
+  }, [filteredTasks, taskOverrides]);
+
+  const handleTaskPartialUpdate = (taskId: string, partial: Partial<Task>) => {
+    setTaskOverrides((prev) => ({
+      ...prev,
+      [taskId]: { ...(prev[taskId] || {}), ...partial },
+    }));
+  };
+
+  return (
+    <TaskDialogProvider
+      onUpdate={handleUpdate}
+      isPersonalWorkspace={workspace.personal}
+    >
+      <div
+        className="-m-2 -mb-4 flex h-[calc(100vh-0.5rem)] min-h-0 flex-1 flex-col overflow-hidden md:-mx-4"
+        data-testid="task-project-detail-shell"
+      >
+        <TaskDialogManager wsId={wsId} />
+
+        <Tabs
+          value={activeTab}
+          onValueChange={(value) => setActiveTab(value as ActiveTab)}
+          className="min-h-0 flex-1 gap-0 overflow-hidden"
+        >
+          <div className="shrink-0 border-b bg-background px-2 py-2 md:px-4">
+            <ProjectHeader
+              projectName={project.name}
+              editedName={projectForm.editedName}
+              setEditedName={projectForm.setEditedName}
+              isEditingName={projectForm.isEditingName}
+              setIsEditingName={projectForm.setIsEditingName}
+              editedStatus={projectForm.editedStatus}
+              editedHealthStatus={projectForm.editedHealthStatus}
+              hasUnsavedChanges={projectForm.hasUnsavedChanges}
+              isSaving={projectForm.isSaving}
+              onSave={projectForm.saveProject}
+              onCancel={projectForm.cancelEdits}
+              fadeInUpVariant={fadeInUpVariant}
+            />
+
+            <div className="mt-2 overflow-x-auto">
+              <TabsList className="w-max rounded-md border bg-muted/50 p-1">
+                <TabsTrigger value="overview" className="gap-2">
+                  <Sparkles className="h-4 w-4" />
+                  {t('overview')}
+                </TabsTrigger>
+                <TabsTrigger value="updates" className="gap-2">
+                  <TrendingUp className="h-4 w-4" />
+                  {t('updates')}
+                </TabsTrigger>
+                <TabsTrigger value="tasks" className="gap-2">
+                  <Target className="h-4 w-4" />
+                  {t('tasks')} ({tasks.length})
+                </TabsTrigger>
+                <TabsTrigger value="documents" className="gap-2">
+                  <FileText className="h-4 w-4" />
+                  {t('documents')} ({documents.length})
+                </TabsTrigger>
+              </TabsList>
+            </div>
+          </div>
+
+          <TabsContent
+            value="overview"
+            className="mt-0 min-h-0 flex-1 overflow-y-auto px-2 py-4 md:px-4"
+            data-testid="task-project-tab-overview"
+          >
+            <ProjectOverviewProvider
+              value={{
+                project,
+                tasks,
+                documents,
+                recentUpdates: projectUpdates.recentUpdates,
+                isLoadingUpdates: projectUpdates.isLoadingUpdates,
+                setActiveTab,
+                setShowLinkTaskDialog: taskLinking.setShowLinkTaskDialog,
+                editedDescription: projectForm.editedDescription,
+                setEditedDescription: projectForm.setEditedDescription,
+                isEditingDescription: projectForm.isEditingDescription,
+                setIsEditingDescription: projectForm.setIsEditingDescription,
+                showConfiguration: projectForm.showConfiguration,
+                setShowConfiguration: projectForm.setShowConfiguration,
+                editedStatus: projectForm.editedStatus,
+                setEditedStatus: projectForm.setEditedStatus,
+                editedPriority: projectForm.editedPriority,
+                setEditedPriority: projectForm.setEditedPriority,
+                editedHealthStatus: projectForm.editedHealthStatus,
+                setEditedHealthStatus: projectForm.setEditedHealthStatus,
+                editedLeadId: projectForm.editedLeadId,
+                setEditedLeadId: projectForm.setEditedLeadId,
+                editedStartDate: projectForm.editedStartDate,
+                setEditedStartDate: projectForm.setEditedStartDate,
+                editedEndDate: projectForm.editedEndDate,
+                setEditedEndDate: projectForm.setEditedEndDate,
+                editedArchived: projectForm.editedArchived,
+                setEditedArchived: projectForm.setEditedArchived,
+                showLeadSelector: projectForm.showLeadSelector,
+                setShowLeadSelector: projectForm.setShowLeadSelector,
+                showTimelineEditor: projectForm.showTimelineEditor,
+                setShowTimelineEditor: projectForm.setShowTimelineEditor,
+                workspaceMembers,
+                isLoadingMembers,
+                fadeInViewVariant,
+              }}
+            >
+              <OverviewTab />
+            </ProjectOverviewProvider>
+          </TabsContent>
+
+          <TabsContent
+            value="updates"
+            className="mt-0 min-h-0 flex-1 overflow-y-auto px-2 py-4 md:px-4"
+          >
+            <UpdatesTab
+              updates={projectUpdates.updates}
+              isLoadingUpdates={projectUpdates.isLoadingUpdates}
+              newUpdateContent={projectUpdates.newUpdateContent}
+              setNewUpdateContent={projectUpdates.setNewUpdateContent}
+              isPostingUpdate={projectUpdates.isPostingUpdate}
+              postUpdate={projectUpdates.postUpdate}
+              currentUserId={currentUserId}
+              editingUpdateId={projectUpdates.editingUpdateId}
+              editingUpdateContent={projectUpdates.editingUpdateContent}
+              setEditingUpdateContent={projectUpdates.setEditingUpdateContent}
+              isDeletingUpdateId={projectUpdates.isDeletingUpdateId}
+              startEditingUpdate={projectUpdates.startEditingUpdate}
+              deleteUpdate={projectUpdates.deleteUpdate}
+              saveEditedUpdate={projectUpdates.saveEditedUpdate}
+              cancelEditingUpdate={projectUpdates.cancelEditingUpdate}
+              fadeInViewVariant={fadeInViewVariant}
+            />
+          </TabsContent>
+
+          <TabsContent
+            value="tasks"
+            className="mt-0 min-h-0 flex-1 overflow-hidden"
+            data-testid="task-project-tab-tasks"
+          >
+            <TasksTab
+              workspace={workspace}
+              wsId={wsId}
+              projectId={project.id}
+              projectName={project.name}
+              tasks={effectiveTasks}
+              lists={filteredLists}
+              currentUserId={currentUserId}
+              currentView={currentView}
+              setCurrentView={setCurrentView}
+              filters={filters}
+              setFilters={setFilters}
+              listStatusFilter={listStatusFilter}
+              setListStatusFilter={setListStatusFilter}
+              setShowLinkTaskDialog={taskLinking.setShowLinkTaskDialog}
+              onTaskPartialUpdate={handleTaskPartialUpdate}
+              isMultiSelectMode={isMultiSelectMode}
+              setIsMultiSelectMode={setIsMultiSelectMode}
+            />
+          </TabsContent>
+
+          <TabsContent
+            value="documents"
+            className="mt-0 min-h-0 flex-1 overflow-y-auto px-2 py-4 md:px-4"
+          >
+            <DocumentsTab
+              documents={documents}
+              fadeInViewVariant={fadeInViewVariant}
+            />
+          </TabsContent>
+        </Tabs>
+
+        <LinkTaskDialog
+          open={taskLinking.showLinkTaskDialog}
+          onOpenChange={taskLinking.setShowLinkTaskDialog}
+          searchQuery={taskLinking.searchQuery}
+          setSearchQuery={taskLinking.setSearchQuery}
+          filteredTasks={taskLinking.filteredAvailableTasks}
+          isLinking={taskLinking.isLinkingTask}
+          onLinkTask={taskLinking.linkTaskToProject}
+        />
+      </div>
+    </TaskDialogProvider>
+  );
+}

package/src/components/ui/tu-do/projects/projectId/types.ts

@@ -0,0 +1,50 @@
+import type {
+  Database,
+  ProjectUpdate,
+  TaskProjectWithRelations,
+  Workspace,
+} from '@tuturuuu/types';
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import type { WorkspaceMember } from '@tuturuuu/ui/hooks/use-workspace-members';
+import type { MotionProps } from 'framer-motion';
+
+// Re-export WorkspaceMember for convenience
+// Re-export ProjectUpdate from centralized types
+export type { ProjectUpdate, WorkspaceMember };
+
+export type TaskPriority = Database['public']['Enums']['task_priority'];
+export type HealthStatus = 'on_track' | 'at_risk' | 'off_track';
+export type ActiveTab = 'overview' | 'updates' | 'tasks' | 'documents';
+
+export interface TaskProjectDetailProps {
+  workspace: Workspace;
+  project: TaskProjectWithRelations;
+  tasks: Task[];
+  documents: Task[];
+  lists: TaskList[];
+  currentUserId: string;
+  wsId: string;
+}
+
+export interface UpdateCardProps {
+  update: ProjectUpdate;
+  currentUserId: string;
+  isEditing: boolean;
+  isDeleting: boolean;
+  editingContent: string;
+  onEdit: () => void;
+  onDelete: () => void;
+  onSave: () => void;
+  onCancel: () => void;
+  onContentChange: (content: string) => void;
+  fadeInVariant: MotionProps;
+}
+
+export interface ProjectLeadSelectorProps {
+  leadId: string | null;
+  workspaceMembers: WorkspaceMember[];
+  isLoading: boolean;
+  onChange: (value: string | null) => void;
+  compact?: boolean;
+}

package/src/components/ui/tu-do/projects/task-projects-client.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useCallback, useMemo, useState } from 'react';
+import { useTasksHref } from '../tasks-route-context';
+import {
+  ProjectGridCard,
+  ProjectListItem,
+  ProjectsEmptyState,
+  ProjectsLoadingState,
+  ProjectsToolbar,
+} from './components';
+import {
+  CreateProjectDialog,
+  EditProjectDialog,
+  ManageTasksDialog,
+} from './dialogs';
+import { useProjectFilters, useTaskProjects } from './hooks';
+import type { TaskProject, TaskProjectsClientProps } from './types';
+
+export function TaskProjectsClient({
+  wsId,
+  initialProjects,
+}: TaskProjectsClientProps) {
+  const router = useRouter();
+  const tasksHref = useTasksHref();
+
+  // Dialog state
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [editingProject, setEditingProject] = useState<TaskProject | null>(
+    null
+  );
+  const [managingProject, setManagingProject] = useState<TaskProject | null>(
+    null
+  );
+
+  // Custom hooks
+  const taskProjects = useTaskProjects({
+    wsId,
+    initialProjects,
+    managingProject,
+  });
+
+  const filters = useProjectFilters(taskProjects.projects);
+
+  const stats = useMemo(
+    () =>
+      taskProjects.projects.reduce(
+        (acc, project) => {
+          acc.totalProjects += 1;
+          acc.linkedTasks += project.linkedTasks.length;
+          acc.linkedDocuments += project.linkedDocuments.length;
+          acc.completedTasks += project.completedTasksCount;
+          if (!['completed', 'cancelled'].includes(project.status ?? '')) {
+            acc.activeProjects += 1;
+          }
+          if (
+            project.health_status === 'at_risk' ||
+            project.health_status === 'off_track'
+          ) {
+            acc.atRiskProjects += 1;
+          }
+          return acc;
+        },
+        {
+          totalProjects: 0,
+          activeProjects: 0,
+          linkedTasks: 0,
+          linkedDocuments: 0,
+          completedTasks: 0,
+          atRiskProjects: 0,
+        }
+      ),
+    [taskProjects.projects]
+  );
+
+  // Handlers
+  const handleEditProject = (project: TaskProject) => {
+    setEditingProject(project);
+    setIsEditDialogOpen(true);
+  };
+
+  const handleUpdateProject = (data: {
+    name: string;
+    description?: string;
+  }) => {
+    if (!editingProject) return;
+    taskProjects.updateProject({
+      projectId: editingProject.id,
+      ...data,
+    });
+    setIsEditDialogOpen(false);
+    setEditingProject(null);
+  };
+
+  const handleOpenManageTasks = (project: TaskProject) => {
+    setManagingProject(project);
+  };
+
+  const handleCloseManageTasks = () => {
+    setManagingProject(null);
+  };
+
+  const handleLinkTask = (taskId: string) => {
+    if (!managingProject) return;
+    taskProjects.linkTask({
+      projectId: managingProject.id,
+      taskId,
+    });
+  };
+
+  const handleUnlinkTask = (taskId: string) => {
+    if (!managingProject) return;
+    taskProjects.unlinkTask({
+      projectId: managingProject.id,
+      taskId,
+    });
+  };
+
+  const navigateToProject = useCallback(
+    (projectId: string) => {
+      router.push(`/${wsId}${tasksHref(`/projects/${projectId}`)}`);
+    },
+    [router, wsId, tasksHref]
+  );
+
+  return (
+    <>
+      <ProjectsToolbar
+        viewMode={filters.viewMode}
+        setViewMode={filters.setViewMode}
+        sortBy={filters.sortBy}
+        setSortBy={filters.setSortBy}
+        sortOrder={filters.sortOrder}
+        setSortOrder={filters.setSortOrder}
+        searchQuery={filters.searchQuery}
+        setSearchQuery={filters.setSearchQuery}
+        statusFilter={filters.statusFilter}
+        setStatusFilter={filters.setStatusFilter}
+        priorityFilter={filters.priorityFilter}
+        setPriorityFilter={filters.setPriorityFilter}
+        healthFilter={filters.healthFilter}
+        setHealthFilter={filters.setHealthFilter}
+        hasActiveFilters={filters.hasActiveFilters}
+        clearFilters={filters.clearFilters}
+        projectCount={taskProjects.projects.length}
+        filteredCount={filters.filteredProjects.length}
+        stats={stats}
+        onCreateClick={() => setIsCreateDialogOpen(true)}
+      />
+
+      {taskProjects.projectsLoading ? (
+        <ProjectsLoadingState />
+      ) : filters.filteredProjects.length === 0 ? (
+        <ProjectsEmptyState
+          hasFilters={filters.hasActiveFilters || !!filters.searchQuery}
+          onCreateClick={() => setIsCreateDialogOpen(true)}
+        />
+      ) : filters.viewMode === 'list' ? (
+        <div className="space-y-3">
+          {filters.filteredProjects.map((project) => (
+            <ProjectListItem
+              key={project.id}
+              project={project}
+              wsId={wsId}
+              onEdit={handleEditProject}
+              onDelete={taskProjects.deleteProject}
+              onManageTasks={handleOpenManageTasks}
+              onNavigate={navigateToProject}
+              isUpdating={taskProjects.isUpdating}
+              isDeleting={taskProjects.isDeleting}
+              isLinking={taskProjects.isLinking}
+              isUnlinking={taskProjects.isUnlinking}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {filters.filteredProjects.map((project) => (
+            <ProjectGridCard
+              key={project.id}
+              project={project}
+              wsId={wsId}
+              onEdit={handleEditProject}
+              onDelete={taskProjects.deleteProject}
+              onManageTasks={handleOpenManageTasks}
+              onNavigate={navigateToProject}
+              isUpdating={taskProjects.isUpdating}
+              isDeleting={taskProjects.isDeleting}
+              isLinking={taskProjects.isLinking}
+              isUnlinking={taskProjects.isUnlinking}
+            />
+          ))}
+        </div>
+      )}
+
+      <CreateProjectDialog
+        open={isCreateDialogOpen}
+        onOpenChange={setIsCreateDialogOpen}
+        onSubmit={taskProjects.createProject}
+        isCreating={taskProjects.isCreating}
+      />
+
+      <EditProjectDialog
+        open={isEditDialogOpen}
+        onOpenChange={setIsEditDialogOpen}
+        project={editingProject}
+        onSubmit={handleUpdateProject}
+        isUpdating={taskProjects.isUpdating}
+      />
+
+      <ManageTasksDialog
+        project={managingProject}
+        onClose={handleCloseManageTasks}
+        availableTaskOptions={taskProjects.availableTaskOptions}
+        tasksLoading={taskProjects.tasksLoading}
+        tasksError={taskProjects.tasksError}
+        onLinkTask={handleLinkTask}
+        onUnlinkTask={handleUnlinkTask}
+        isLinking={taskProjects.isLinking}
+        isUnlinking={taskProjects.isUnlinking}
+      />
+    </>
+  );
+}