@tuturuuu/ui 0.0.4 → 0.1.0

package/src/components/ui/tu-do/boards/analytics/GanttChart.tsx

@@ -0,0 +1,419 @@
+'use client';
+
+import type { GanttTask } from '@tuturuuu/types/primitives/Task';
+import { Card } from '@tuturuuu/ui/card';
+import { getTaskCompletionDate } from '@tuturuuu/utils/task-helpers';
+import type { MouseEvent as DOMMouseEvent } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { GanttControls } from './GanttControls';
+import { GanttHeader } from './GanttHeader';
+import { GanttTimeline } from './GanttTimeline';
+import { TaskDetailCard } from './TaskDetailCard';
+
+interface AnalyticsFilters {
+  timeView: 'week' | 'month' | 'year';
+  selectedBoard: string | null;
+  statusFilter: 'all' | 'not_started' | 'active' | 'review' | 'done' | 'closed';
+}
+
+interface GanttChartProps {
+  allTasks: GanttTask[];
+  filters: AnalyticsFilters;
+}
+
+export function GanttChart({ allTasks, filters }: GanttChartProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(5);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [clickCardVisible, setClickCardVisible] = useState(false);
+  const [clickCardPosition, setClickCardPosition] = useState({ x: 0, y: 0 });
+  const [clickedTask, setClickedTask] = useState<GanttTask | null>(null);
+
+  // Track previous filter values to detect changes
+  const prevFiltersRef = useRef({
+    selectedBoard: filters.selectedBoard,
+    statusFilter: filters.statusFilter,
+    searchQuery,
+  });
+
+  // Memoize the close handler to prevent unnecessary re-renders
+  const handleCloseClick = useCallback(() => {
+    setClickCardVisible(false);
+    setClickedTask(null);
+  }, []);
+
+  // Filter tasks based on selected board, status, and search
+  const filteredTasks = useMemo(() => {
+    let tasks = allTasks;
+
+    // Filter by board
+    if (filters.selectedBoard) {
+      tasks = tasks.filter((task) => task.boardId === filters.selectedBoard);
+    }
+
+    // Filter by status
+    if (filters.statusFilter !== 'all') {
+      tasks = tasks.filter((task) => {
+        const taskStatus = task.listStatus || 'not_started';
+        return taskStatus === filters.statusFilter;
+      });
+    }
+
+    // Filter by search query
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      tasks = tasks.filter(
+        (task) =>
+          task.name?.toLowerCase().includes(query) ||
+          task.description?.toLowerCase().includes(query) ||
+          task.boardName?.toLowerCase().includes(query)
+      );
+    }
+
+    return tasks;
+  }, [allTasks, filters.selectedBoard, filters.statusFilter, searchQuery]);
+
+  // Get time range based on filter
+  const getTimeRange = useCallback(() => {
+    const now = new Date();
+    switch (filters.timeView) {
+      case 'week': {
+        const weekStart = new Date(now);
+        weekStart.setDate(now.getDate() - now.getDay());
+        const weekEnd = new Date(weekStart);
+        weekEnd.setDate(weekStart.getDate() + 6);
+        return { start: weekStart, end: weekEnd };
+      }
+      case 'month': {
+        const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
+        const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+        return { start: monthStart, end: monthEnd };
+      }
+      case 'year': {
+        const yearStart = new Date(now.getFullYear(), 0, 1);
+        const yearEnd = new Date(now.getFullYear(), 11, 31);
+        return { start: yearStart, end: yearEnd };
+      }
+    }
+  }, [filters.timeView]);
+
+  const timeRange = useMemo(() => getTimeRange(), [getTimeRange]);
+  const totalDays = useMemo(
+    () =>
+      Math.ceil(
+        (timeRange.end.getTime() - timeRange.start.getTime()) /
+          (1000 * 60 * 60 * 24)
+      ),
+    [timeRange]
+  );
+
+  // Calculate productivity stats
+  const productivityStats = useMemo(() => {
+    const completed = filteredTasks.filter(
+      (task) => task.listStatus === 'done' || task.listStatus === 'closed'
+    ).length;
+    const total = filteredTasks.length;
+    const completionRate = total > 0 ? (completed / total) * 100 : 0;
+
+    const overdue = filteredTasks.filter(
+      (task) =>
+        task.end_date &&
+        new Date(task.end_date) < new Date() &&
+        task.listStatus !== 'done' &&
+        task.listStatus !== 'closed'
+    ).length;
+
+    const onTime = completed - overdue;
+    const onTimeRate = completed > 0 ? (onTime / completed) * 100 : 0;
+
+    return {
+      completionRate: completionRate.toFixed(1),
+      onTimeRate: onTimeRate.toFixed(1),
+      totalTasks: total,
+      completedTasks: completed,
+      overdueTasks: overdue,
+    };
+  }, [filteredTasks]);
+
+  // Process all tasks for Gantt display (before pagination)
+  const allGanttTasks = useMemo(() => {
+    return filteredTasks
+      .filter((task) => task.created_at) // Only tasks with creation date
+      .map((task) => {
+        const createdDate = new Date(task.created_at);
+        const endDate =
+          task.listStatus === 'done' || task.listStatus === 'closed'
+            ? task.updated_at
+              ? new Date(task.updated_at)
+              : createdDate
+            : task.end_date
+              ? new Date(task.end_date)
+              : new Date();
+
+        // Calculate position and width
+        const startOffset = Math.max(
+          0,
+          (createdDate.getTime() - timeRange.start.getTime()) /
+            (1000 * 60 * 60 * 24)
+        );
+        const duration = Math.max(
+          1,
+          (endDate.getTime() - createdDate.getTime()) / (1000 * 60 * 60 * 24)
+        );
+
+        return {
+          ...task,
+          boardId: task.boardId ?? '',
+          boardName: task.boardName ?? '',
+          listName: task.listName ?? '',
+          listStatus: task.listStatus ?? 'not_started',
+          updated_at: task.updated_at ?? undefined,
+          end_date: task.end_date ?? undefined,
+          createdDate,
+          endDate,
+          startOffset: (startOffset / totalDays) * 100,
+          width: Math.min(
+            (duration / totalDays) * 100,
+            100 - (startOffset / totalDays) * 100
+          ),
+          status: (task.listStatus ?? 'not_started') as string,
+        };
+      })
+      .filter((task) => task.startOffset < 100) // Only show tasks within time range
+      .sort((a, b) => a.createdDate.getTime() - b.createdDate.getTime());
+  }, [filteredTasks, timeRange, totalDays]);
+
+  // Calculate pagination
+  const totalTasks = allGanttTasks.length;
+  const totalPages = Math.ceil(totalTasks / pageSize);
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+
+  // Generate time markers - Move this before useEffect
+  const timeMarkers = useMemo(() => {
+    const markers = [];
+    const markerCount =
+      filters.timeView === 'week' ? 7 : filters.timeView === 'month' ? 4 : 12;
+
+    for (let i = 0; i <= markerCount; i++) {
+      const position = (i / markerCount) * 100;
+      const date = new Date(timeRange.start);
+
+      if (filters.timeView === 'week') {
+        date.setDate(date.getDate() + i);
+        markers.push({
+          position,
+          label: date.toLocaleDateString('en', { weekday: 'short' }),
+        });
+      } else if (filters.timeView === 'month') {
+        date.setDate(date.getDate() + i * 7);
+        markers.push({ position, label: `Week ${i + 1}` });
+      } else {
+        date.setMonth(date.getMonth() + i);
+        markers.push({
+          position,
+          label: date.toLocaleDateString('en', { month: 'short' }),
+        });
+      }
+    }
+    return markers;
+  }, [filters.timeView, timeRange]);
+
+  // Get current page tasks
+  const ganttTasks = useMemo(() => {
+    return allGanttTasks.slice(startIndex, endIndex);
+  }, [allGanttTasks, startIndex, endIndex]);
+
+  // Calculate task duration for the clicked task - moved to top level to avoid hook order issues
+  const clickedTaskDuration = useMemo(() => {
+    if (!clickedTask) return 'N/A';
+
+    try {
+      const createdDate = clickedTask.created_at
+        ? new Date(clickedTask.created_at)
+        : null;
+
+      if (!createdDate || Number.isNaN(createdDate.getTime())) {
+        return 'N/A';
+      }
+
+      // For completed tasks, calculate actual duration
+      if (clickedTask.status === 'done' || clickedTask.status === 'closed') {
+        const completionDate = getTaskCompletionDate(clickedTask);
+        if (completionDate && !Number.isNaN(completionDate.getTime())) {
+          const durationMs = completionDate.getTime() - createdDate.getTime();
+          const days = Math.floor(durationMs / (1000 * 60 * 60 * 24));
+          const hours = Math.floor(durationMs / (1000 * 60 * 60));
+
+          if (days >= 1) {
+            return `${days} day${days !== 1 ? 's' : ''}`;
+          } else if (hours >= 1) {
+            return `${hours} hr${hours !== 1 ? 's' : ''}`;
+          } else {
+            return '<1 hr';
+          }
+        }
+      }
+
+      // For non-completed tasks, show planned duration or time elapsed
+      if (clickedTask.end_date) {
+        const dueDate = new Date(clickedTask.end_date);
+        if (!Number.isNaN(dueDate.getTime())) {
+          const plannedDurationMs = dueDate.getTime() - createdDate.getTime();
+          const days = Math.floor(plannedDurationMs / (1000 * 60 * 60 * 24));
+          const hours = Math.floor(plannedDurationMs / (1000 * 60 * 60));
+
+          if (days >= 1) {
+            return `${days} day${days !== 1 ? 's' : ''} (planned)`;
+          } else if (hours >= 1) {
+            return `${hours} hr${hours !== 1 ? 's' : ''} (planned)`;
+          } else {
+            return '<1 hr (planned)';
+          }
+        }
+      }
+
+      // Fallback: show time elapsed since creation
+      const now = new Date();
+      const elapsedMs = now.getTime() - createdDate.getTime();
+      const days = Math.floor(elapsedMs / (1000 * 60 * 60 * 24));
+      const hours = Math.floor(elapsedMs / (1000 * 60 * 60));
+
+      if (days >= 1) {
+        return `${days} day${days !== 1 ? 's' : ''} (elapsed)`;
+      } else if (hours >= 1) {
+        return `${hours} hr${hours !== 1 ? 's' : ''} (elapsed)`;
+      } else {
+        return '<1 hr (elapsed)';
+      }
+    } catch {
+      return 'N/A';
+    }
+  }, [clickedTask]);
+
+  // Reset to first page when filters change - optimized dependencies
+  useEffect(() => {
+    const currentFilters = {
+      selectedBoard: filters.selectedBoard,
+      statusFilter: filters.statusFilter,
+      searchQuery,
+    };
+    const prevFilters = prevFiltersRef.current;
+
+    if (
+      currentFilters.selectedBoard !== prevFilters.selectedBoard ||
+      currentFilters.statusFilter !== prevFilters.statusFilter ||
+      currentFilters.searchQuery !== prevFilters.searchQuery
+    ) {
+      setCurrentPage(1);
+      prevFiltersRef.current = currentFilters;
+    }
+  }, [filters.selectedBoard, filters.statusFilter, searchQuery]);
+
+  // Add the click handlers to the GanttChart component
+  const handleTaskClick = useCallback(
+    (e: DOMMouseEvent<Element, globalThis.MouseEvent>, task: GanttTask) => {
+      e.stopPropagation();
+
+      const mouseX = e.clientX;
+      const mouseY = e.clientY;
+
+      setClickedTask(task);
+      setClickCardVisible(true);
+
+      // Position near the click
+      let newX = mouseX + 15;
+      let newY = mouseY + 15;
+
+      // Ensure it doesn't go off screen
+      if (newX + 250 > window.innerWidth) {
+        newX = mouseX - 265;
+      }
+      if (newY + 150 > window.innerHeight) {
+        newY = mouseY - 165;
+      }
+
+      setClickCardPosition({ x: newX, y: newY });
+    },
+    []
+  );
+
+  // Add click outside to close - fixed dependency
+  useEffect(() => {
+    const handleScroll = () => {
+      handleCloseClick();
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        handleCloseClick();
+      }
+    };
+
+    if (clickCardVisible) {
+      document.addEventListener('scroll', handleScroll, true); // Use capture to catch all scroll events
+      document.addEventListener('keydown', handleEscape);
+      window.addEventListener('scroll', handleScroll);
+      // Also listen for scrolling on the gantt container
+      const ganttContainer = document.querySelector('.custom-scrollbar');
+      if (ganttContainer) {
+        ganttContainer.addEventListener('scroll', handleScroll);
+      }
+    }
+
+    return () => {
+      document.removeEventListener('scroll', handleScroll, true);
+      document.removeEventListener('keydown', handleEscape);
+      window.removeEventListener('scroll', handleScroll);
+      const ganttContainer = document.querySelector('.custom-scrollbar');
+      if (ganttContainer) {
+        ganttContainer.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [clickCardVisible, handleCloseClick]);
+
+  return (
+    <>
+      <Card className="p-6">
+        <GanttHeader productivityStats={productivityStats} />
+
+        <GanttControls
+          searchQuery={searchQuery}
+          setSearchQuery={setSearchQuery}
+          pageSize={pageSize}
+          setPageSize={setPageSize}
+          currentPage={currentPage}
+          setCurrentPage={setCurrentPage}
+          totalTasks={totalTasks}
+          totalPages={totalPages}
+          startIndex={startIndex}
+          endIndex={endIndex}
+        />
+
+        <GanttTimeline
+          filters={filters}
+          timeMarkers={timeMarkers}
+          ganttTasks={ganttTasks}
+          handleTaskClick={handleTaskClick}
+        />
+      </Card>
+
+      <TaskDetailCard
+        clickCardVisible={clickCardVisible}
+        clickedTask={
+          clickedTask
+            ? {
+                ...clickedTask,
+                status: clickedTask.status ?? 'not_started',
+                end_date: clickedTask.end_date ?? undefined,
+                priority: clickedTask.priority ?? undefined,
+              }
+            : null
+        }
+        clickCardPosition={clickCardPosition}
+        clickedTaskDuration={clickedTaskDuration}
+        handleCloseClick={handleCloseClick}
+      />
+    </>
+  );
+}

package/src/components/ui/tu-do/boards/analytics/GanttControls.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { ChevronLeft, ChevronRight, X } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+
+interface GanttControlsProps {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  pageSize: number;
+  setPageSize: (size: number) => void;
+  currentPage: number;
+  setCurrentPage: (page: number | ((prev: number) => number)) => void;
+  totalTasks: number;
+  totalPages: number;
+  startIndex: number;
+  endIndex: number;
+}
+
+export function GanttControls({
+  searchQuery,
+  setSearchQuery,
+  pageSize,
+  setPageSize,
+  currentPage,
+  setCurrentPage,
+  totalTasks,
+  totalPages,
+  startIndex,
+  endIndex,
+}: GanttControlsProps) {
+  return (
+    <div className="mb-4 flex flex-col items-center justify-between gap-4 md:flex-row">
+      {/* Search Input */}
+      <div className="relative w-full md:max-w-sm">
+        <input
+          type="text"
+          placeholder="Search tasks..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="w-full rounded-md border border-gray-200 bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-gray-700"
+        />
+        {searchQuery && (
+          <button
+            type="button"
+            onClick={() => setSearchQuery('')}
+            className="absolute top-1/2 right-2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      {/* Pagination and Task Count */}
+      <div className="flex flex-wrap items-center justify-center gap-4 md:justify-end">
+        <Select
+          value={pageSize.toString()}
+          onValueChange={(value) => {
+            setPageSize(Number(value));
+            setCurrentPage(1);
+          }}
+        >
+          <SelectTrigger className="w-24">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="5">5</SelectItem>
+            <SelectItem value="10">10</SelectItem>
+            <SelectItem value="25">25</SelectItem>
+            <SelectItem value="50">50</SelectItem>
+          </SelectContent>
+        </Select>
+
+        {totalTasks > 0 && (
+          <div className="flex items-center gap-2 text-muted-foreground text-sm">
+            <span>
+              Showing {startIndex + 1}-{Math.min(endIndex, totalTasks)} of{' '}
+              {totalTasks} tasks
+            </span>
+
+            {totalPages > 1 && (
+              <div className="ml-4 flex items-center gap-1">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    setCurrentPage((prev) => Math.max(1, prev - 1))
+                  }
+                  disabled={currentPage === 1}
+                  className="h-8 w-8 p-0"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+
+                <span className="px-2 text-sm">
+                  {currentPage} of {totalPages}
+                </span>
+
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    setCurrentPage((prev) => Math.min(totalPages, prev + 1))
+                  }
+                  disabled={currentPage === totalPages}
+                  className="h-8 w-8 p-0"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/tu-do/boards/analytics/GanttHeader.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+interface ProductivityStats {
+  completionRate: string;
+  onTimeRate: string;
+  totalTasks: number;
+  completedTasks: number;
+  overdueTasks: number;
+}
+
+interface GanttHeaderProps {
+  productivityStats: ProductivityStats;
+}
+
+export function GanttHeader({ productivityStats }: GanttHeaderProps) {
+  return (
+    <div className="mb-6 flex items-center justify-between">
+      <div>
+        <h4 className="font-medium">Task Gantt Timeline</h4>
+        <p className="text-muted-foreground text-sm">
+          Visual timeline showing task lifecycle from creation to completion
+        </p>
+      </div>
+
+      {/* Productivity Stats */}
+      <div className="flex items-center gap-4 text-sm">
+        <div className="text-center">
+          <div className="font-semibold text-green-600">
+            {productivityStats.completionRate}%
+          </div>
+          <div className="text-muted-foreground">Completion</div>
+        </div>
+        <div className="text-center">
+          <div className="font-semibold text-blue-600">
+            {productivityStats.onTimeRate}%
+          </div>
+          <div className="text-muted-foreground">On-Time</div>
+        </div>
+        <div className="text-center">
+          <div className="font-semibold text-purple-600">
+            {productivityStats.totalTasks}
+          </div>
+          <div className="text-muted-foreground">Tasks</div>
+        </div>
+      </div>
+    </div>
+  );
+}