@tuturuuu/ui 0.17.0 → 0.18.0

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

@@ -1,419 +0,0 @@
-'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

@@ -1,123 +0,0 @@
-'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

@@ -1,48 +0,0 @@
-'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>
-  );
-}