@hed-hog/operations 0.0.332 → 0.0.338

package/hedhog/frontend/app/tasks-gantt/page.tsx.ejs

@@ -1,953 +0,0 @@
-'use client';
-
-import { EmptyState, Page, SearchBar } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Calendar } from '@/components/ui/calendar';
-import { Card, CardContent } from '@/components/ui/card';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import { cn } from '@/lib/utils';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  AlertCircle,
-  CalendarRange,
-  Clock3,
-  FolderKanban,
-  Loader2,
-  PlayCircle,
-  X,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useMemo, useState } from 'react';
-import { OperationsHeader } from '../_components/operations-header';
-import { StatusBadge } from '../_components/status-badge';
-import {
-  TaskDetailSheet,
-  type TaskDetailSheetData,
-} from '../_components/task-detail-sheet';
-import { fetchOperations } from '../_lib/api';
-import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type {
-  OperationsProject,
-  OperationsTaskOption,
-  PaginatedResponse,
-} from '../_lib/types';
-import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
-import { getTaskDescriptionPreview } from '../_lib/utils/task-ui';
-
-type RequestFn = (input: {
-  url: string;
-  method: string;
-  data?: unknown;
-}) => Promise<{ data: unknown }>;
-
-type TimelineTask = {
-  task: OperationsTaskOption;
-  project: OperationsProject;
-  start: Date;
-  end: Date;
-  left: number;
-  width: number;
-  overdue: boolean;
-};
-
-const PAGE_SIZE = 200;
-const DAY_WIDTH = 44;
-const LABEL_WIDTH = 320;
-const MS_PER_DAY = 24 * 60 * 60 * 1000;
-const TODAY = (() => {
-  const d = new Date();
-  d.setHours(0, 0, 0, 0);
-  return d;
-})();
-
-function getPersonAvatarUrl(avatarId?: number | null): string {
-  return typeof avatarId === 'number' && avatarId > 0
-    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
-    : '/placeholder.png';
-}
-
-function getUserPhotoUrl(photoId?: number | null): string {
-  return typeof photoId === 'number' && photoId > 0
-    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/user/avatar/${photoId}`
-    : '/placeholder.png';
-}
-
-function getInitials(value?: string | null): string {
-  if (!value) return '?';
-  return value
-    .split(' ')
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((w) => w[0]!.toUpperCase())
-    .join('');
-}
-
-function parseDate(value?: string | null) {
-  if (!value) return null;
-  // Date-only strings (YYYY-MM-DD) must be parsed as local time to avoid timezone shift
-  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
-  if (m) {
-    const date = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
-    if (Number.isNaN(date.getTime())) return null;
-    return date;
-  }
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return null;
-  date.setHours(0, 0, 0, 0);
-  return date;
-}
-
-function addDays(base: Date, amount: number) {
-  const date = new Date(base);
-  date.setDate(date.getDate() + amount);
-  return date;
-}
-
-function diffDays(start: Date, end: Date) {
-  return Math.floor((end.getTime() - start.getTime()) / MS_PER_DAY);
-}
-
-function toDateKey(date: Date) {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  return `${year}-${month}-${day}`;
-}
-
-function getEstimatedSpanDays(task: OperationsTaskOption) {
-  const estimateHours = Number(task.estimateHours ?? 0);
-  if (estimateHours > 0) {
-    return Math.max(1, Math.ceil(estimateHours / 8));
-  }
-
-  if (task.status === 'done') return 1;
-  if (task.status === 'review') return 2;
-  return 3;
-}
-
-function buildTaskWindow(
-  task: OperationsTaskOption,
-  project: OperationsProject
-) {
-  const start =
-    parseDate(task.doingStartedAt) ??
-    parseDate(task.createdAt) ??
-    parseDate(project.startDate) ??
-    parseDate(task.dueDate) ??
-    new Date();
-
-  const fallbackEnd = addDays(start, getEstimatedSpanDays(task) - 1);
-  const end =
-    parseDate(task.dueDate) ?? parseDate(project.endDate) ?? fallbackEnd;
-
-  if (end < start) {
-    return {
-      start,
-      end: addDays(start, Math.max(1, getEstimatedSpanDays(task)) - 1),
-    };
-  }
-
-  return { start, end };
-}
-
-function getBarClassName(status?: string | null, overdue?: boolean) {
-  if (overdue && status !== 'done') {
-    return 'border-rose-300 bg-rose-500/90 text-white shadow-rose-500/20';
-  }
-
-  const classes: Record<string, string> = {
-    todo: 'border-slate-300 bg-slate-700 text-white shadow-slate-900/20',
-    doing: 'border-sky-300 bg-sky-500 text-white shadow-sky-500/20',
-    review: 'border-amber-300 bg-amber-500 text-slate-950 shadow-amber-500/20',
-    done: 'border-emerald-300 bg-emerald-500 text-white shadow-emerald-500/20',
-  };
-
-  return classes[status ?? ''] ?? classes.todo;
-}
-
-async function fetchAllPages<T>(
-  request: RequestFn,
-  baseUrl: string,
-  pageSize = PAGE_SIZE
-) {
-  const items: T[] = [];
-  let page = 1;
-  let lastPage = 1;
-
-  do {
-    const separator = baseUrl.includes('?') ? '&' : '?';
-    const response = await fetchOperations<PaginatedResponse<T>>(
-      request,
-      `${baseUrl}${separator}page=${page}&pageSize=${pageSize}`
-    );
-    items.push(...(response.data ?? []));
-    lastPage = Math.max(response.lastPage ?? 1, 1);
-    page += 1;
-  } while (page <= lastPage);
-
-  return items;
-}
-
-export default function OperationsTasksGanttPage() {
-  const t = useTranslations('operations.TasksGanttPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-  const access = useOperationsAccess();
-
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [projectFilter, setProjectFilter] = useState('all');
-  const [selectedTask, setSelectedTask] = useState<TaskDetailSheetData | null>(
-    null
-  );
-  const [dateRange, setDateRange] = useState<{ from: Date; to: Date } | null>(
-    null
-  );
-  const [datePickerOpen, setDatePickerOpen] = useState(false);
-
-  const {
-    data: activeProjects = [],
-    isLoading: isProjectsLoading,
-    error: projectsError,
-    refetch: refetchProjects,
-  } = useQuery<OperationsProject[]>({
-    queryKey: ['operations-tasks-gantt-projects', currentLocaleCode],
-    enabled: access.isCollaborator,
-    queryFn: () =>
-      fetchAllPages<OperationsProject>(
-        request as RequestFn,
-        '/operations/projects?status=active&sortField=startDate&sortOrder=asc'
-      ),
-  });
-
-  const {
-    data: allTasks = [],
-    isLoading: isTasksLoading,
-    error: tasksError,
-    refetch: refetchTasks,
-  } = useQuery<OperationsTaskOption[]>({
-    queryKey: ['operations-tasks-gantt-my-tasks', currentLocaleCode],
-    enabled: access.isCollaborator,
-    queryFn: () =>
-      fetchAllPages<OperationsTaskOption>(
-        request as RequestFn,
-        '/operations/my-tasks?sortField=createdAt&sortOrder=desc'
-      ),
-  });
-
-  const activeProjectMap = useMemo(
-    () => new Map(activeProjects.map((project) => [project.id, project])),
-    [activeProjects]
-  );
-
-  const projectOptions = useMemo(() => {
-    const seen = new Map<string, string>();
-    for (const task of allTasks) {
-      const key = String(task.projectId);
-      if (!seen.has(key)) {
-        seen.set(
-          key,
-          [task.projectName, task.projectCode].filter(Boolean).join(' • ')
-        );
-      }
-    }
-    return Array.from(seen.entries())
-      .map(([value, label]) => ({ value, label }))
-      .sort((a, b) => a.label.localeCompare(b.label, currentLocaleCode));
-  }, [allTasks, currentLocaleCode]);
-
-  const filteredTasks = useMemo(() => {
-    const normalizedSearch = search.trim().toLowerCase();
-
-    return allTasks
-      .filter((task) => statusFilter === 'all' || task.status === statusFilter)
-      .filter(
-        (task) =>
-          projectFilter === 'all' || String(task.projectId) === projectFilter
-      )
-      .filter((task) => {
-        if (!normalizedSearch) return true;
-
-        const haystack = [
-          task.name,
-          task.projectName,
-          task.projectCode,
-          task.assigneeName,
-          task.description ? getTaskDescriptionPreview(task.description) : '',
-        ]
-          .filter(Boolean)
-          .join(' ')
-          .toLowerCase();
-
-        return haystack.includes(normalizedSearch);
-      });
-  }, [allTasks, projectFilter, search, statusFilter]);
-
-  const timelineBase = useMemo(() => {
-    return filteredTasks
-      .map((task) => {
-        const project =
-          activeProjectMap.get(task.projectId) ??
-          ({
-            id: task.projectId,
-            code: task.projectCode ?? '',
-            name: task.projectName,
-            status: 'active',
-            startDate: null,
-            endDate: null,
-          } as OperationsProject);
-
-        const { start, end } = buildTaskWindow(task, project);
-        const dueDate = parseDate(task.dueDate);
-
-        return {
-          task,
-          project,
-          start,
-          end,
-          overdue:
-            task.status !== 'done' &&
-            dueDate !== null &&
-            dueDate.getTime() < TODAY.getTime(),
-        };
-      })
-      .filter((item): item is Omit<TimelineTask, 'left' | 'width'> =>
-        Boolean(item)
-      )
-      .filter((item) => {
-        if (!dateRange) return true;
-        return item.start <= dateRange.to && item.end >= dateRange.from;
-      })
-      .sort((a, b) => {
-        const byProject = a.project.name.localeCompare(
-          b.project.name,
-          currentLocaleCode
-        );
-        if (byProject !== 0) return byProject;
-        const byStart = a.start.getTime() - b.start.getTime();
-        if (byStart !== 0) return byStart;
-        return a.task.name.localeCompare(b.task.name, currentLocaleCode);
-      });
-  }, [activeProjectMap, currentLocaleCode, dateRange, filteredTasks]);
-
-  const timelineBounds = useMemo(() => {
-    let start: Date;
-    let end: Date;
-
-    if (dateRange) {
-      start = addDays(dateRange.from, -1);
-      end = addDays(dateRange.to, 1);
-    } else {
-      if (!timelineBase.length) return null;
-      const [firstItem] = timelineBase;
-      if (!firstItem) return null;
-
-      const minStart = timelineBase.reduce(
-        (earliest, item) => (item.start < earliest ? item.start : earliest),
-        firstItem.start
-      );
-      const maxEnd = timelineBase.reduce(
-        (latest, item) => (item.end > latest ? item.end : latest),
-        firstItem.end
-      );
-
-      start = addDays(minStart, -1);
-      end = addDays(maxEnd, 1);
-    }
-
-    const totalDays = diffDays(start, end) + 1;
-    const todayOffset =
-      TODAY >= start && TODAY <= end ? diffDays(start, TODAY) : null;
-
-    const days = Array.from({ length: totalDays }, (_, index) =>
-      addDays(start, index)
-    );
-
-    return {
-      start,
-      end,
-      totalDays,
-      width: totalDays * DAY_WIDTH,
-      days,
-      todayOffset,
-    };
-  }, [dateRange, timelineBase]);
-
-  const timelineTasks = useMemo(() => {
-    if (!timelineBounds) return [];
-
-    return timelineBase.map((item) => {
-      const offsetDays = diffDays(timelineBounds.start, item.start);
-      const spanDays = Math.max(1, diffDays(item.start, item.end) + 1);
-
-      return {
-        ...item,
-        left: offsetDays * DAY_WIDTH + 4,
-        width: Math.max(DAY_WIDTH - 8, spanDays * DAY_WIDTH - 8),
-      };
-    });
-  }, [timelineBase, timelineBounds]);
-
-  const groupedProjects = useMemo(() => {
-    const groups = new Map<
-      number,
-      { project: OperationsProject; tasks: TimelineTask[] }
-    >();
-
-    for (const item of timelineTasks) {
-      const current = groups.get(item.project.id);
-      if (current) {
-        current.tasks.push(item);
-      } else {
-        groups.set(item.project.id, {
-          project: item.project,
-          tasks: [item],
-        });
-      }
-    }
-
-    return Array.from(groups.values()).sort((a, b) => {
-      const aStart = parseDate(a.project.startDate);
-      const bStart = parseDate(b.project.startDate);
-      if (aStart && bStart && aStart.getTime() !== bStart.getTime()) {
-        return aStart.getTime() - bStart.getTime();
-      }
-      return a.project.name.localeCompare(b.project.name, currentLocaleCode);
-    });
-  }, [currentLocaleCode, timelineTasks]);
-
-  const statsCards = useMemo(
-    () => [
-      {
-        key: 'active-projects',
-        title: t('cards.activeProjects'),
-        description: t('cards.activeProjectsDescription'),
-        value: groupedProjects.length,
-        icon: FolderKanban,
-      },
-      {
-        key: 'tasks',
-        title: t('cards.tasks'),
-        description: t('cards.tasksDescription'),
-        value: timelineTasks.length,
-        icon: CalendarRange,
-      },
-      {
-        key: 'doing',
-        title: t('cards.doing'),
-        description: t('cards.doingDescription'),
-        value: timelineTasks.filter((item) => item.task.status === 'doing')
-          .length,
-        icon: PlayCircle,
-      },
-      {
-        key: 'overdue',
-        title: t('cards.overdue'),
-        description: t('cards.overdueDescription'),
-        value: timelineTasks.filter((item) => item.overdue).length,
-        icon: AlertCircle,
-      },
-    ],
-    [groupedProjects.length, t, timelineTasks]
-  );
-
-  const isLoading = access.isLoading || isProjectsLoading || isTasksLoading;
-  const hasError = Boolean(projectsError || tasksError);
-
-  const timelineRowBackground = timelineBounds
-    ? {
-        backgroundImage: `repeating-linear-gradient(to right, transparent, transparent ${
-          DAY_WIDTH - 1
-        }px, hsl(var(--border)) ${DAY_WIDTH - 1}px, hsl(var(--border)) ${DAY_WIDTH}px)`,
-      }
-    : undefined;
-
-  const monthFormatter = useMemo(
-    () =>
-      new Intl.DateTimeFormat(currentLocaleCode, {
-        month: 'short',
-      }),
-    [currentLocaleCode]
-  );
-
-  if (!access.isLoading && !access.isCollaborator) {
-    return (
-      <Page>
-        <OperationsHeader
-          title={t('title')}
-          description={t('description')}
-          current={t('breadcrumb')}
-        />
-
-        <div className="pt-2">
-          <EmptyState
-            icon={<AlertCircle className="size-12" />}
-            title={commonT('states.noAccessTitle')}
-            description={t('noAccessDescription')}
-          />
-        </div>
-      </Page>
-    );
-  }
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-      />
-
-      <KpiCardsGrid items={statsCards} columns={4} />
-
-      <div className="flex min-w-0 flex-wrap items-center gap-2">
-        <SearchBar
-          className="w-auto"
-          searchQuery={search}
-          onSearchChange={setSearch}
-          showSearchButton={false}
-          debounceMs={400}
-          placeholder={t('searchPlaceholder')}
-          controls={[
-            {
-              id: 'status',
-              type: 'select',
-              value: statusFilter,
-              onChange: setStatusFilter,
-              placeholder: commonT('labels.status'),
-              options: [
-                { value: 'all', label: t('filters.allStatuses') },
-                { value: 'todo', label: t('legend.todo') },
-                { value: 'doing', label: t('legend.doing') },
-                { value: 'review', label: t('legend.review') },
-                { value: 'done', label: t('legend.done') },
-              ],
-            },
-            {
-              id: 'project',
-              type: 'select',
-              value: projectFilter,
-              onChange: setProjectFilter,
-              placeholder: commonT('labels.project'),
-              options: [
-                { value: 'all', label: t('filters.allProjects') },
-                ...projectOptions,
-              ],
-            },
-          ]}
-        />
-      </div>
-
-      {isLoading ? (
-        <Card className="border-dashed">
-          <CardContent className="flex min-h-80 items-center justify-center gap-3 text-muted-foreground">
-            <Loader2 className="size-5 animate-spin" />
-            <span>{t('loading')}</span>
-          </CardContent>
-        </Card>
-      ) : hasError ? (
-        <EmptyState
-          icon={<AlertCircle className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={t('loadErrorDescription')}
-          actionLabel={commonT('actions.refresh')}
-          onAction={() => {
-            void refetchProjects();
-            void refetchTasks();
-          }}
-        />
-      ) : !timelineBounds || groupedProjects.length === 0 ? (
-        <EmptyState
-          icon={<CalendarRange className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={t('emptyDescription')}
-          actionLabel={commonT('actions.refresh')}
-          onAction={() => {
-            void refetchProjects();
-            void refetchTasks();
-          }}
-        />
-      ) : (
-        <div className="overflow-hidden rounded-3xl border bg-card shadow-sm">
-          <div className="flex flex-wrap items-center gap-2 border-b bg-muted/20 px-4 py-3">
-            <Popover open={datePickerOpen} onOpenChange={setDatePickerOpen}>
-              <PopoverTrigger asChild>
-                <Badge
-                  variant="secondary"
-                  className="cursor-pointer gap-1.5 hover:bg-secondary/80"
-                >
-                  <Clock3 className="size-3.5" />
-                  {t('labels.range', {
-                    from: formatDate(
-                      toDateKey(dateRange?.from ?? timelineBounds.start),
-                      getSettingValue,
-                      currentLocaleCode
-                    ),
-                    to: formatDate(
-                      toDateKey(dateRange?.to ?? timelineBounds.end),
-                      getSettingValue,
-                      currentLocaleCode
-                    ),
-                  })}
-                  {dateRange ? <X className="size-3 opacity-70" /> : null}
-                </Badge>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
-                <Calendar
-                  mode="range"
-                  selected={
-                    dateRange
-                      ? { from: dateRange.from, to: dateRange.to }
-                      : undefined
-                  }
-                  onSelect={(range) => {
-                    if (range?.from && range?.to) {
-                      setDateRange({ from: range.from, to: range.to });
-                      setDatePickerOpen(false);
-                    } else if (range?.from && !range?.to) {
-                      setDateRange(null);
-                    }
-                  }}
-                  numberOfMonths={2}
-                />
-                {dateRange ? (
-                  <div className="border-t p-2">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="w-full"
-                      onClick={() => {
-                        setDateRange(null);
-                        setDatePickerOpen(false);
-                      }}
-                    >
-                      <X className="mr-2 size-3" />
-                      {t('filters.clearDateRange')}
-                    </Button>
-                  </div>
-                ) : null}
-              </PopoverContent>
-            </Popover>
-
-            {(
-              [
-                {
-                  status: 'todo',
-                  className:
-                    'border-slate-400 bg-slate-700 text-white hover:bg-slate-600',
-                },
-                {
-                  status: 'doing',
-                  className:
-                    'border-sky-300 bg-sky-500 text-white hover:bg-sky-400',
-                },
-                {
-                  status: 'review',
-                  className:
-                    'border-amber-300 bg-amber-500 text-slate-950 hover:bg-amber-400',
-                },
-                {
-                  status: 'done',
-                  className:
-                    'border-emerald-300 bg-emerald-500 text-white hover:bg-emerald-400',
-                },
-              ] as const
-            ).map(({ status, className }) => (
-              <Badge
-                key={status}
-                className={cn(
-                  'cursor-pointer transition',
-                  className,
-                  statusFilter === status
-                    ? 'ring-2 ring-white/60 ring-offset-1'
-                    : 'opacity-60 hover:opacity-100'
-                )}
-                onClick={() =>
-                  setStatusFilter(statusFilter === status ? 'all' : status)
-                }
-              >
-                {t(`legend.${status}`)}
-              </Badge>
-            ))}
-
-            <Badge className="border-rose-300 bg-rose-500/10 text-rose-700 hover:bg-rose-500/10">
-              {t('legend.overdue')}
-            </Badge>
-          </div>
-
-          <div className="overflow-auto">
-            <div
-              style={{
-                minWidth: LABEL_WIDTH + timelineBounds.width,
-              }}
-            >
-              <div
-                className="sticky top-0 z-30 grid border-b bg-background/95 backdrop-blur"
-                style={{
-                  gridTemplateColumns: `${LABEL_WIDTH}px ${timelineBounds.width}px`,
-                }}
-              >
-                <div className="sticky left-0 z-30 border-r bg-background px-4 py-3">
-                  <p className="text-sm font-semibold">
-                    {t('labels.projectTask')}
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    {t('viewDescription')}
-                  </p>
-                </div>
-
-                <div className="relative">
-                  <div
-                    className="grid"
-                    style={{
-                      gridTemplateColumns: `repeat(${timelineBounds.totalDays}, ${DAY_WIDTH}px)`,
-                    }}
-                  >
-                    {timelineBounds.days.map((day, index) => (
-                      <div
-                        key={toDateKey(day)}
-                        className="border-r px-1 py-2 text-center"
-                        title={formatDate(
-                          toDateKey(day),
-                          getSettingValue,
-                          currentLocaleCode
-                        )}
-                      >
-                        <div className="text-xs font-semibold">
-                          {day.getDate()}
-                        </div>
-                        <div className="text-[10px] uppercase text-muted-foreground">
-                          {index === 0 || day.getDate() === 1
-                            ? monthFormatter.format(day)
-                            : ' '}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-
-                  {timelineBounds.todayOffset !== null ? (
-                    <div
-                      className="pointer-events-none absolute inset-y-0 w-0.5 bg-primary/80"
-                      style={{
-                        left:
-                          timelineBounds.todayOffset * DAY_WIDTH +
-                          DAY_WIDTH / 2,
-                      }}
-                    />
-                  ) : null}
-                </div>
-              </div>
-
-              {groupedProjects.map((group) => (
-                <div
-                  key={group.project.id}
-                  className="border-b last:border-b-0"
-                >
-                  <div
-                    className="grid border-b bg-muted/10"
-                    style={{
-                      gridTemplateColumns: `${LABEL_WIDTH}px ${timelineBounds.width}px`,
-                    }}
-                  >
-                    <div className="sticky left-0 z-20 border-r bg-card px-4 py-3">
-                      <div className="flex items-start justify-between gap-3">
-                        <div className="min-w-0">
-                          <p className="truncate text-sm font-semibold">
-                            {group.project.name}
-                          </p>
-                          <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                            {group.project.clientName ? (
-                              <>
-                                <span className="truncate">
-                                  {group.project.code || '—'}
-                                </span>
-                                <span>•</span>
-                                <Avatar className="h-4 w-4 shrink-0">
-                                  <AvatarImage
-                                    src={
-                                      group.project.clientUserPhotoId
-                                        ? getUserPhotoUrl(
-                                            group.project.clientUserPhotoId
-                                          )
-                                        : getPersonAvatarUrl(
-                                            group.project.clientAvatarId
-                                          )
-                                    }
-                                    alt={group.project.clientName}
-                                  />
-                                  <AvatarFallback className="text-[8px] font-medium">
-                                    {getInitials(group.project.clientName)}
-                                  </AvatarFallback>
-                                </Avatar>
-                                <span className="truncate">
-                                  {group.project.clientName}
-                                </span>
-                              </>
-                            ) : (
-                              <span className="truncate">
-                                {group.project.code ||
-                                  commonT('labels.notAvailable')}
-                              </span>
-                            )}
-                          </div>
-                        </div>
-                        <Badge variant="secondary">
-                          {t('labels.tasksCount', {
-                            count: group.tasks.length,
-                          })}
-                        </Badge>
-                      </div>
-                    </div>
-
-                    <div
-                      className="relative h-12 border-l-0"
-                      style={timelineRowBackground}
-                    >
-                      {timelineBounds.todayOffset !== null ? (
-                        <div
-                          className="pointer-events-none absolute inset-y-0 w-0.5 bg-primary/80"
-                          style={{
-                            left:
-                              timelineBounds.todayOffset * DAY_WIDTH +
-                              DAY_WIDTH / 2,
-                          }}
-                        />
-                      ) : null}
-                    </div>
-                  </div>
-
-                  {group.tasks.map((item) => (
-                    <div
-                      key={item.task.id}
-                      className="grid border-b last:border-b-0"
-                      style={{
-                        gridTemplateColumns: `${LABEL_WIDTH}px ${timelineBounds.width}px`,
-                      }}
-                    >
-                      <button
-                        type="button"
-                        className="sticky left-0 z-10 flex cursor-pointer flex-col gap-2 border-r bg-background px-4 py-3 text-left transition hover:bg-muted/40"
-                        onClick={() => setSelectedTask(item.task)}
-                      >
-                        <div className="flex items-start justify-between gap-2">
-                          <div className="min-w-0">
-                            <p className="truncate text-sm font-medium">
-                              {item.task.name}
-                            </p>
-                            <p className="truncate text-xs text-muted-foreground">
-                              {item.task.assigneeName ??
-                                commonT('labels.notAvailable')}
-                            </p>
-                          </div>
-                          <StatusBadge
-                            label={t(`legend.${item.task.status}`)}
-                            className={getStatusBadgeClass(item.task.status)}
-                          />
-                        </div>
-
-                        {item.task.description ? (
-                          <p className="line-clamp-2 text-xs text-muted-foreground">
-                            {getTaskDescriptionPreview(item.task.description)}
-                          </p>
-                        ) : null}
-                      </button>
-
-                      <div
-                        className="relative h-18"
-                        style={timelineRowBackground}
-                      >
-                        {timelineBounds.todayOffset !== null ? (
-                          <div
-                            className="pointer-events-none absolute inset-y-0 w-0.5 bg-primary/80"
-                            style={{
-                              left:
-                                timelineBounds.todayOffset * DAY_WIDTH +
-                                DAY_WIDTH / 2,
-                            }}
-                          />
-                        ) : null}
-
-                        <button
-                          type="button"
-                          className={[
-                            'absolute top-1/2 flex h-10 -translate-y-1/2 cursor-pointer items-center gap-2 overflow-hidden rounded-2xl border px-3 text-left shadow-lg transition hover:brightness-95',
-                            getBarClassName(item.task.status, item.overdue),
-                          ].join(' ')}
-                          style={{
-                            left: item.left,
-                            width: item.width,
-                          }}
-                          onClick={() => setSelectedTask(item.task)}
-                          title={`${item.task.name} • ${formatDate(
-                            toDateKey(item.start),
-                            getSettingValue,
-                            currentLocaleCode
-                          )} - ${formatDate(
-                            toDateKey(item.end),
-                            getSettingValue,
-                            currentLocaleCode
-                          )}`}
-                        >
-                          <span className="truncate text-xs font-semibold">
-                            {item.task.name}
-                          </span>
-                          <span className="hidden truncate text-[11px] opacity-90 md:inline">
-                            {formatDate(
-                              toDateKey(item.start),
-                              getSettingValue,
-                              currentLocaleCode
-                            )}{' '}
-                            -{' '}
-                            {formatDate(
-                              toDateKey(item.end),
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
-                          </span>
-                        </button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-
-      <TaskDetailSheet
-        task={selectedTask}
-        open={selectedTask !== null}
-        defaultTab="comments"
-        onOpenChange={(open) => {
-          if (!open) setSelectedTask(null);
-        }}
-        statusLabel={(status) => {
-          try {
-            return t(`legend.${status}`);
-          } catch {
-            return status;
-          }
-        }}
-        footer={
-          selectedTask?.projectId ? (
-            <Button asChild variant="outline" className="gap-2">
-              <Link href={`/operations/my-projects/${selectedTask.projectId}`}>
-                <FolderKanban className="size-4" />
-                {t('actions.openProject')}
-              </Link>
-            </Button>
-          ) : null
-        }
-      />
-    </Page>
-  );
-}