@tuturuuu/ui 0.16.0 → 0.18.0

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

@@ -1,285 +0,0 @@
-'use client';
-
-import { AlertTriangle } from '@tuturuuu/icons';
-import type { TaskPriority } from '@tuturuuu/types/primitives/Priority';
-import { Card } from '@tuturuuu/ui/card';
-import { cn } from '@tuturuuu/utils/format';
-import { useMemo } from 'react';
-
-interface Task {
-  id: string;
-  name: string;
-  description?: string;
-  priority?: TaskPriority | null;
-  created_at?: string;
-  updated_at?: string;
-  end_date?: string | null;
-  boardId: string;
-  boardName: string;
-  listName: string;
-  listStatus?: string;
-  archived?: boolean;
-}
-
-interface TaskCreationAnalyticsProps {
-  allTasks: Task[];
-  selectedBoard: string | null;
-}
-
-export function TaskCreationAnalytics({
-  allTasks,
-  selectedBoard,
-}: TaskCreationAnalyticsProps) {
-  const filteredTasks = useMemo(() => {
-    if (!selectedBoard) return allTasks;
-    return allTasks.filter((task) => task.boardId === selectedBoard);
-  }, [allTasks, selectedBoard]);
-
-  const taskAnalytics = useMemo(() => {
-    const now = new Date();
-    const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-    const twoWeeksAgo = new Date(now.getTime() - 14 * 24 * 60 * 60 * 1000);
-    const oneMonthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
-
-    // Task creation trends
-    const thisWeekCreated = filteredTasks.filter((task) => {
-      return task.created_at && new Date(task.created_at) >= oneWeekAgo;
-    }).length;
-
-    const lastWeekCreated = filteredTasks.filter((task) => {
-      return (
-        task.created_at &&
-        new Date(task.created_at) >= twoWeeksAgo &&
-        new Date(task.created_at) < oneWeekAgo
-      );
-    }).length;
-
-    const thisMonthCreated = filteredTasks.filter((task) => {
-      return task.created_at && new Date(task.created_at) >= oneMonthAgo;
-    }).length;
-
-    // Task distribution by priority
-    const priorityDistribution = {
-      urgent: filteredTasks.filter((task) => task.priority === 'critical')
-        .length,
-      high: filteredTasks.filter((task) => task.priority === 'high').length,
-      medium: filteredTasks.filter((task) => task.priority === 'normal').length,
-      low: filteredTasks.filter((task) => task.priority === 'low').length,
-      unset: filteredTasks.filter(
-        (task) => !task.priority || task.priority === null
-      ).length,
-    };
-
-    // Task type distribution by board lists
-    const typeDistribution: { [key: string]: number } = {};
-    filteredTasks.forEach((task) => {
-      const listName = task.listName || 'Unknown';
-      typeDistribution[listName] = (typeDistribution[listName] || 0) + 1;
-    });
-
-    // Average time to start (created_at to first status change)
-    const timeToStartData = filteredTasks
-      .filter(
-        (task) =>
-          task.created_at &&
-          task.updated_at &&
-          task.listStatus !== 'not_started' &&
-          new Date(task.updated_at).getTime() >
-            new Date(task.created_at).getTime()
-      )
-      .map((task) => {
-        if (!task.created_at || !task.updated_at) return 0;
-        const created = new Date(task.created_at);
-        const updated = new Date(task.updated_at);
-        return (updated.getTime() - created.getTime()) / (1000 * 60 * 60 * 24); // days
-      });
-
-    const avgTimeToStart =
-      timeToStartData.length > 0
-        ? timeToStartData.reduce((sum, time) => sum + time, 0) /
-          timeToStartData.length
-        : 0;
-
-    // Task creation rate trend - improved logic for clarity
-    const creationTrend =
-      lastWeekCreated === 0
-        ? thisWeekCreated > 0
-          ? 100
-          : 0 // 100% increase if we had 0 last week but have tasks this week
-        : ((thisWeekCreated - lastWeekCreated) / lastWeekCreated) * 100;
-
-    // Backlog growth (not started tasks older than 1 week)
-    const backlogTasks = filteredTasks.filter(
-      (task) =>
-        task.listStatus === 'not_started' &&
-        task.created_at &&
-        new Date(task.created_at) < oneWeekAgo
-    ).length;
-
-    return {
-      thisWeekCreated,
-      lastWeekCreated,
-      thisMonthCreated,
-      creationTrend,
-      priorityDistribution,
-      typeDistribution,
-      avgTimeToStart,
-      backlogTasks,
-      totalTasks: filteredTasks.length,
-    };
-  }, [filteredTasks]);
-
-  const priorityConfig = [
-    {
-      key: 'urgent',
-      label: '🔥 Urgent',
-      color: 'bg-red-500',
-      count: taskAnalytics.priorityDistribution.urgent,
-    },
-    {
-      key: 'high',
-      label: '⚡ High',
-      color: 'bg-orange-500',
-      count: taskAnalytics.priorityDistribution.high,
-    },
-    {
-      key: 'medium',
-      label: '📋 Medium',
-      color: 'bg-yellow-500',
-      count: taskAnalytics.priorityDistribution.medium,
-    },
-    {
-      key: 'low',
-      label: '📝 Low',
-      color: 'bg-green-500',
-      count: taskAnalytics.priorityDistribution.low,
-    },
-    {
-      key: 'unset',
-      label: '❓ Unset',
-      color: 'bg-gray-400',
-      count: taskAnalytics.priorityDistribution.unset,
-    },
-  ];
-
-  const topTaskTypes = Object.entries(taskAnalytics.typeDistribution)
-    .sort(([, a], [, b]) => b - a)
-    .slice(0, 4);
-
-  return (
-    <Card className="p-4">
-      <div className="mb-3 flex items-center justify-between">
-        <h4 className="font-medium">Task Creation & Flow</h4>
-        <span className="text-muted-foreground text-xs">
-          {taskAnalytics.totalTasks} total tasks
-        </span>
-      </div>
-
-      <div className="space-y-4">
-        {/* Creation Trend */}
-        <div className="rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
-          <div className="flex items-center justify-between">
-            <div>
-              <div className="font-bold text-blue-600 text-lg">
-                {taskAnalytics.thisWeekCreated}
-              </div>
-              <div className="text-blue-700 text-xs dark:text-blue-300">
-                Tasks created this week
-              </div>
-            </div>
-            <div className="text-right">
-              <div
-                className={cn(
-                  'font-medium text-sm',
-                  taskAnalytics.creationTrend > 0
-                    ? 'text-green-600'
-                    : taskAnalytics.creationTrend < 0
-                      ? 'text-red-600'
-                      : 'text-gray-600'
-                )}
-              >
-                {taskAnalytics.creationTrend > 0
-                  ? '↗'
-                  : taskAnalytics.creationTrend < 0
-                    ? '↘'
-                    : '→'}
-                {Math.abs(taskAnalytics.creationTrend).toFixed(0)}%
-              </div>
-              <div className="text-muted-foreground text-xs">
-                vs last week ({taskAnalytics.lastWeekCreated})
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Quick Stats */}
-        <div className="grid grid-cols-2 gap-3 text-xs">
-          <div className="rounded-lg bg-gray-50 p-2 text-center dark:bg-gray-800/50">
-            <div className="font-medium text-purple-600">
-              {taskAnalytics.thisMonthCreated}
-            </div>
-            <div className="text-muted-foreground">This month</div>
-          </div>
-          <div className="rounded-lg bg-gray-50 p-2 text-center dark:bg-gray-800/50">
-            <div className="font-medium text-orange-600">
-              {taskAnalytics.avgTimeToStart > 0
-                ? `${taskAnalytics.avgTimeToStart.toFixed(1)}d`
-                : 'N/A'}
-            </div>
-            <div className="text-muted-foreground">Avg. time to start</div>
-          </div>
-        </div>
-
-        {/* Priority Distribution */}
-        <div className="space-y-2">
-          <div className="font-medium text-sm">Priority Distribution</div>
-          <div className="space-y-1">
-            {priorityConfig
-              .filter((p) => p.count > 0)
-              .map((priority) => (
-                <div
-                  key={priority.key}
-                  className="flex items-center justify-between"
-                >
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={cn('h-2 w-2 rounded', priority.color)}
-                    ></div>
-                    <span className="text-xs">{priority.label}</span>
-                  </div>
-                  <span className="font-medium text-xs">{priority.count}</span>
-                </div>
-              ))}
-          </div>
-        </div>
-
-        {/* Task Types */}
-        {topTaskTypes.length > 0 && (
-          <div className="space-y-2">
-            <div className="font-medium text-sm">Top Task Types</div>
-            <div className="space-y-1">
-              {topTaskTypes.map(([type, count]) => (
-                <div key={type} className="flex items-center justify-between">
-                  <span className="flex-1 truncate text-xs">{type}</span>
-                  <span className="ml-2 font-medium text-xs">{count}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Backlog Alert */}
-        {taskAnalytics.backlogTasks > 0 && (
-          <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-2 dark:border-yellow-800 dark:bg-yellow-900/20">
-            <div className="flex items-center gap-2">
-              <AlertTriangle className="h-3 w-3 text-yellow-600" />
-              <span className="font-medium text-xs text-yellow-700 dark:text-yellow-300">
-                {taskAnalytics.backlogTasks} tasks in backlog (&gt;1 week old)
-              </span>
-            </div>
-          </div>
-        )}
-      </div>
-    </Card>
-  );
-}

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

@@ -1,270 +0,0 @@
-'use client';
-
-import { Activity, AlertTriangle, Calendar, Clock, X } from '@tuturuuu/icons';
-import type { TaskPriority } from '@tuturuuu/types/primitives/Priority';
-import { Badge } from '@tuturuuu/ui/badge';
-import { cn } from '@tuturuuu/utils/format';
-import { useRef } from 'react';
-
-interface TaskDetailCardProps {
-  clickCardVisible: boolean;
-  clickedTask: {
-    id: string;
-    name: string;
-    description?: string;
-    status: string;
-    boardName?: string;
-    listName?: string;
-    createdDate?: Date;
-    end_date?: string;
-    priority?: TaskPriority;
-    assignee_name?: string;
-  } | null;
-  clickCardPosition: { x: number; y: number };
-  clickedTaskDuration: string;
-  handleCloseClick: () => void;
-}
-
-export function TaskDetailCard({
-  clickCardVisible,
-  clickedTask,
-  clickCardPosition,
-  clickedTaskDuration,
-  handleCloseClick,
-}: TaskDetailCardProps) {
-  const clickCardRef = useRef<HTMLDivElement>(null);
-
-  if (!clickCardVisible || !clickedTask) {
-    return null;
-  }
-
-  return (
-    <>
-      {/* Subtle backdrop */}
-      <button
-        type="button"
-        className="fixed inset-0 z-[9998] bg-black/5 backdrop-blur-[1px]"
-        onClick={handleCloseClick}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            handleCloseClick();
-          }
-        }}
-        aria-label="Close task details"
-      />
-
-      <div
-        ref={clickCardRef}
-        className="slide-in-from-bottom-2 fixed z-[9999] max-w-sm animate-in rounded-lg border border-gray-200 bg-white shadow-xl duration-200 dark:border-gray-700 dark:bg-gray-900"
-        style={{
-          left: Math.max(
-            10,
-            Math.min(clickCardPosition.x, window.innerWidth - 350)
-          ),
-          top: Math.max(
-            10,
-            Math.min(clickCardPosition.y, window.innerHeight - 200)
-          ),
-        }}
-      >
-        {/* Compact Header */}
-        <div className="rounded-t-lg border-gray-100 border-b bg-linear-to-r from-blue-50 to-indigo-50 p-3 dark:border-gray-800 dark:from-blue-900/20 dark:to-indigo-900/20">
-          <div className="flex items-center justify-between">
-            <div className="min-w-0 flex-1">
-              <h4 className="truncate font-semibold text-gray-800 text-sm dark:text-gray-100">
-                {clickedTask.name}
-              </h4>
-              <div className="mt-1 flex items-center gap-1">
-                <Badge variant="outline" className="px-1 py-0 text-xs">
-                  {clickedTask.boardName || 'Unknown Board'}
-                </Badge>
-                <span className="text-muted-foreground text-xs">•</span>
-                <Badge variant="outline" className="px-1 py-0 text-xs">
-                  {clickedTask.listName || 'Unknown List'}
-                </Badge>
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              <Badge
-                variant="outline"
-                className={cn(
-                  'font-medium text-xs',
-                  clickedTask.status === 'done' &&
-                    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/20 dark:text-green-400',
-                  clickedTask.status === 'review' &&
-                    'border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-800 dark:bg-orange-900/20 dark:text-orange-400',
-                  clickedTask.status === 'closed' &&
-                    'border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-800 dark:bg-purple-900/20 dark:text-purple-400',
-                  clickedTask.status === 'active' &&
-                    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-400',
-                  clickedTask.status === 'not_started' &&
-                    'border-gray-200 bg-gray-50 text-gray-700 dark:border-gray-800 dark:bg-gray-900/20 dark:text-gray-400'
-                )}
-              >
-                {clickedTask.status === 'done' ? (
-                  <span className="flex items-center gap-1">
-                    <span className="h-1.5 w-1.5 rounded-full bg-green-500"></span>
-                    Done
-                  </span>
-                ) : clickedTask.status === 'review' ? (
-                  <span className="flex items-center gap-1">
-                    <span className="h-1.5 w-1.5 rounded-full bg-orange-500"></span>
-                    Review
-                  </span>
-                ) : clickedTask.status === 'closed' ? (
-                  <span className="flex items-center gap-1">
-                    <span className="h-1.5 w-1.5 rounded-full bg-purple-500"></span>
-                    Closed
-                  </span>
-                ) : clickedTask.status === 'active' ? (
-                  <span className="flex items-center gap-1">
-                    <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500"></span>
-                    Active
-                  </span>
-                ) : (
-                  <span className="flex items-center gap-1">
-                    <span className="h-1.5 w-1.5 rounded-full bg-gray-400"></span>
-                    Pending
-                  </span>
-                )}
-              </Badge>
-              <button
-                type="button"
-                onClick={handleCloseClick}
-                className="text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-gray-300"
-              >
-                <X className="h-4 w-4" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* Compact Content */}
-        <div className="space-y-2 p-3">
-          {clickedTask.description && (
-            <p className="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-400/30 hover:scrollbar-thumb-gray-400/50 max-h-24 overflow-y-auto whitespace-pre-line text-gray-600 text-xs dark:text-gray-400">
-              {clickedTask.description}
-            </p>
-          )}
-
-          {/* Compact Info Grid */}
-          <div className="grid grid-cols-2 gap-2 text-xs">
-            <div className="space-y-1">
-              <div className="flex items-center gap-1">
-                <Calendar className="h-3 w-3 text-green-500" />
-                <span className="text-muted-foreground">Created:</span>
-              </div>
-              <div className="pl-4 font-medium">
-                {clickedTask.createdDate
-                  ? clickedTask.createdDate.toLocaleDateString()
-                  : 'N/A'}
-              </div>
-
-              {clickedTask.end_date && (
-                <>
-                  <div className="flex items-center gap-1">
-                    <Clock className="h-3 w-3 text-orange-500" />
-                    <span className="text-muted-foreground">Due:</span>
-                  </div>
-                  <div className="pl-4 font-medium">
-                    {new Date(clickedTask.end_date).toLocaleDateString()}
-                  </div>
-                </>
-              )}
-            </div>
-
-            <div className="space-y-1">
-              <div className="flex items-center gap-1">
-                <Activity className="h-3 w-3 text-blue-500" />
-                <span className="text-muted-foreground">Duration:</span>
-              </div>
-              <div className="pl-4 font-medium">{clickedTaskDuration}</div>
-
-              {clickedTask.priority && (
-                <>
-                  <div className="flex items-center gap-1">
-                    <span className="text-muted-foreground">Priority:</span>
-                  </div>
-                  <div className="pl-4">
-                    <Badge
-                      variant={
-                        clickedTask.priority === 'critical'
-                          ? 'destructive'
-                          : clickedTask.priority === 'high'
-                            ? 'default'
-                            : clickedTask.priority === 'normal'
-                              ? 'secondary'
-                              : 'outline'
-                      }
-                      className="text-xs"
-                    >
-                      {clickedTask.priority === 'critical'
-                        ? '🔥 Urgent'
-                        : clickedTask.priority === 'high'
-                          ? '⚡ High'
-                          : clickedTask.priority === 'normal'
-                            ? '📋 Medium'
-                            : '📝 Low'}
-                    </Badge>
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-
-          {clickedTask.assignee_name && (
-            <div className="flex items-center gap-2 pt-1">
-              <div className="flex h-5 w-5 items-center justify-center rounded-full bg-linear-to-br from-blue-400 to-purple-500 font-medium text-white text-xs">
-                {clickedTask.assignee_name.charAt(0).toUpperCase()}
-              </div>
-              <span className="font-medium text-xs">
-                {clickedTask.assignee_name}
-              </span>
-            </div>
-          )}
-
-          {/* Compact Progress */}
-          <div className="h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-600">
-            <div
-              className={cn(
-                'h-1.5 rounded-full transition-all',
-                clickedTask.status === 'done' || clickedTask.status === 'closed'
-                  ? 'bg-green-500'
-                  : clickedTask.status === 'active'
-                    ? 'bg-blue-500'
-                    : 'bg-gray-400 dark:bg-gray-500'
-              )}
-              style={{
-                width:
-                  clickedTask.status === 'done' ||
-                  clickedTask.status === 'closed'
-                    ? '100%'
-                    : clickedTask.status === 'active'
-                      ? '60%'
-                      : '10%',
-              }}
-            />
-          </div>
-
-          {/* Compact Overdue Warning */}
-          {clickedTask.end_date &&
-            new Date(clickedTask.end_date) < new Date() &&
-            clickedTask.status !== 'done' &&
-            clickedTask.status !== 'closed' && (
-              <div className="flex items-center gap-1 rounded border border-red-200 bg-red-50 p-2 dark:border-red-800 dark:bg-red-900/20">
-                <AlertTriangle className="h-3 w-3 text-red-500" />
-                <span className="font-medium text-red-600 text-xs dark:text-red-400">
-                  Overdue by{' '}
-                  {Math.ceil(
-                    (Date.now() - new Date(clickedTask.end_date).getTime()) /
-                      (1000 * 60 * 60 * 24)
-                  )}{' '}
-                  days
-                </span>
-              </div>
-            )}
-        </div>
-      </div>
-    </>
-  );
-}