@hed-hog/operations 0.0.338 → 0.0.347

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

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