From 0c3287a44e3e193e7c4eb334a1b525a62c47bd38 Mon Sep 17 00:00:00 2001
From: vibhor121 <vibhorjandial7@gmail.com>
Date: Wed, 10 Sep 2025 11:14:31 +0530
Subject: [PATCH] feat: Add task details modal with view-only functionality

- Create TaskDetailsModal component for viewing complete task information
- Add View Details button (eye icon) to task tables in dashboard and team pages
- Display task title, description, status, priority, assignee, created by, due date, labels, tags, and watchlist status
- Use large textarea for easy reading of task descriptions
- Remove edit functionality to keep it as view-only feature
- Integrate modal into both main task list and team task list components
---
 components/task-details-modal.tsx | 232 ++++++++++++++++++++++++++++++
 components/todo-list-table.tsx    |   9 ++
 modules/teams/team-tasks.tsx      |  13 +-
 3 files changed, 252 insertions(+), 2 deletions(-)
 create mode 100644 components/task-details-modal.tsx

diff --git a/components/task-details-modal.tsx b/components/task-details-modal.tsx
new file mode 100644
index 0000000..46ef750
--- /dev/null
+++ b/components/task-details-modal.tsx
@@ -0,0 +1,232 @@
+'use client'
+
+import { TTask } from '@/api/tasks/tasks.types'
+import { Button } from '@/components/ui/button'
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+import { Textarea } from '@/components/ui/textarea'
+import { DateFormats, DateUtil } from '@/lib/date-util'
+import { CalendarIcon, ClockIcon, TagIcon, UserIcon, UserPlusIcon } from 'lucide-react'
+import { useState } from 'react'
+import { TaskPriorityLabel } from './task-priority-label'
+import { TodoLabelsList } from './todo-labels-list'
+import { TodoStatusTable } from './todo-status-table'
+
+type TaskDetailsModalProps = {
+  task: TTask
+  children: React.ReactNode
+}
+
+export function TaskDetailsModal({ task, children }: TaskDetailsModalProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        {children}
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="text-xl font-semibold text-gray-900">
+            Task Details
+          </DialogTitle>
+        </DialogHeader>
+        
+        <div className="space-y-6">
+          {/* Task Title */}
+          <div>
+            <Label className="text-sm font-medium text-gray-700 mb-2 block">
+              Task Title
+            </Label>
+            <div className="text-lg font-medium text-gray-900">
+              {task.title}
+            </div>
+          </div>
+
+          {/* Description */}
+          <div>
+            <Label className="text-sm font-medium text-gray-700 mb-2 block">
+              Description
+            </Label>
+            <div className="min-h-[120px] p-3 bg-gray-50 rounded-md border">
+              <Textarea
+                value={task.description || 'No description provided'}
+                readOnly
+                className="min-h-[100px] resize-none border-none bg-transparent p-0 focus:ring-0"
+              />
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Task Information Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Status */}
+            <div>
+              <Label className="text-sm font-medium text-gray-700 mb-2 block">
+                Status
+              </Label>
+              <div className="flex items-center">
+                <TodoStatusTable status={task.status} />
+              </div>
+            </div>
+
+            {/* Priority */}
+            <div>
+              <Label className="text-sm font-medium text-gray-700 mb-2 block">
+                Priority
+              </Label>
+              <div className="flex items-center">
+                {task.priority ? (
+                  <TaskPriorityLabel priority={task.priority} />
+                ) : (
+                  <span className="text-gray-500">No priority set</span>
+                )}
+              </div>
+            </div>
+
+            {/* Assignee */}
+            <div>
+              <Label className="text-sm font-medium text-gray-700 mb-2 block">
+                <UserIcon className="inline w-4 h-4 mr-1" />
+                Assignee
+              </Label>
+              <div className="text-gray-900">
+                {task.assignee ? (
+                  <div className="flex items-center space-x-2">
+                    <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-medium">
+                      {task.assignee.assignee_name?.charAt(0).toUpperCase() || 'U'}
+                    </div>
+                    <span>{task.assignee.assignee_name || 'Unknown User'}</span>
+                  </div>
+                ) : (
+                  'Unassigned'
+                )}
+              </div>
+            </div>
+
+            {/* Created By */}
+            <div>
+              <Label className="text-sm font-medium text-gray-700 mb-2 block">
+                <UserPlusIcon className="inline w-4 h-4 mr-1" />
+                Created By
+              </Label>
+              <div className="text-gray-900">
+                {task.createdBy ? (
+                  <div className="flex items-center space-x-2">
+                    <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-xs font-medium">
+                      {task.createdBy.name?.charAt(0).toUpperCase() || 'U'}
+                    </div>
+                    <span>{task.createdBy.name || 'Unknown User'}</span>
+                  </div>
+                ) : (
+                  'Unknown'
+                )}
+              </div>
+            </div>
+
+            {/* Due Date */}
+            <div>
+              <Label className="text-sm font-medium text-gray-700 mb-2 block">
+                <CalendarIcon className="inline w-4 h-4 mr-1" />
+                Due Date
+              </Label>
+              <div className="text-gray-900">
+                {task.dueAt ? (
+                  new DateUtil(task.dueAt).format(DateFormats.D_MMM_YYYY)
+                ) : (
+                  'No due date'
+                )}
+              </div>
+            </div>
+
+            {/* Task ID */}
+            <div>
+              <Label className="text-sm font-medium text-gray-700 mb-2 block">
+                <ClockIcon className="inline w-4 h-4 mr-1" />
+                Task ID
+              </Label>
+              <div className="text-gray-900 font-mono text-sm">
+                {task.id}
+              </div>
+            </div>
+          </div>
+
+          {/* Labels */}
+          {task.labels && task.labels.length > 0 && (
+            <div>
+              <Label className="text-sm font-medium text-gray-700 mb-2 block">
+                <TagIcon className="inline w-4 h-4 mr-1" />
+                Labels
+              </Label>
+              <div className="flex flex-wrap gap-2">
+                <TodoLabelsList labels={task.labels} />
+              </div>
+            </div>
+          )}
+
+          {/* Tags */}
+          {task.tags && task.tags.length > 0 && (
+            <div>
+              <Label className="text-sm font-medium text-gray-700 mb-2 block">
+                Tags
+              </Label>
+              <div className="flex flex-wrap gap-2">
+                {task.tags.map((tag, index) => (
+                  <span
+                    key={index}
+                    className="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Watchlist Status */}
+          <div>
+            <Label className="text-sm font-medium text-gray-700 mb-2 block">
+              Watchlist
+            </Label>
+            <div className="text-gray-900">
+              {task.in_watchlist ? (
+                <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+                  ⭐ In Watchlist
+                </span>
+              ) : (
+                <span className="text-gray-500">Not in watchlist</span>
+              )}
+            </div>
+          </div>
+
+          {/* Deferred Details */}
+          {task.deferredDetails?.deferredTill && (
+            <div>
+              <Label className="text-sm font-medium text-gray-700 mb-2 block">
+                Deferred Until
+              </Label>
+              <div className="text-gray-900">
+                {new DateUtil(task.deferredDetails.deferredTill).format(DateFormats.D_MMM_YYYY)}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex justify-end space-x-2 pt-4 border-t">
+          <Button variant="outline" onClick={() => setIsOpen(false)}>
+            Close
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/components/todo-list-table.tsx b/components/todo-list-table.tsx
index 22d0555..e1709be 100644
--- a/components/todo-list-table.tsx
+++ b/components/todo-list-table.tsx
@@ -5,14 +5,17 @@ import { TTask } from '@/api/tasks/tasks.types'
 import { useAuth } from '@/hooks/useAuth'
 import { DateFormats, DateUtil } from '@/lib/date-util'
 import { DashboardTasksTableTabs } from '@/modules/dashboard/constants'
+import { EyeIcon } from 'lucide-react'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { EditTodoButton } from './edit-task-button'
 import { IncludeDoneSwitch } from './include-done-switch'
 import { Searchbar } from './searchbar'
 import { Shimmer } from './Shimmer'
+import { TaskDetailsModal } from './task-details-modal'
 import { TaskPriorityLabel } from './task-priority-label'
 import { TodoLabelsList } from './todo-labels-list'
 import { TodoStatusTable } from './todo-status-table'
+import { Button } from './ui/button'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table'
 import { WatchListButton } from './watchlist-button'
 
@@ -96,6 +99,12 @@ const TodoListTableRow = ({
       <TableCell>
         {showActions ? (
           <div className="flex items-center gap-0.5">
+            <TaskDetailsModal task={todo}>
+              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                <EyeIcon className="h-4 w-4" />
+                <span className="sr-only">View details</span>
+              </Button>
+            </TaskDetailsModal>
             {isEditTodoVisible && <EditTodoButton todo={todo} />}
             <WatchListButton taskId={todo.id} isInWatchlist={todo.in_watchlist} />
           </div>
diff --git a/modules/teams/team-tasks.tsx b/modules/teams/team-tasks.tsx
index 9c818ef..837dd38 100644
--- a/modules/teams/team-tasks.tsx
+++ b/modules/teams/team-tasks.tsx
@@ -2,24 +2,27 @@
 
 import { USER_TYPE_ENUM } from '@/api/common/common-enum'
 import { TasksApi } from '@/api/tasks/tasks.api'
+import { TASK_STATUS_ENUM } from '@/api/tasks/tasks.enum'
 import { GetTaskReqDto, TTask } from '@/api/tasks/tasks.types'
 import { TeamsApi } from '@/api/teams/teams.api'
 import { TTeam } from '@/api/teams/teams.type'
 import { EditTodoButton } from '@/components/edit-task-button'
+import { IncludeDoneSwitch } from '@/components/include-done-switch'
 import { ReassignUser } from '@/components/reassign-user'
 import { Searchbar } from '@/components/searchbar'
+import { TaskDetailsModal } from '@/components/task-details-modal'
 import { TaskPriorityLabel } from '@/components/task-priority-label'
 import { TodoLabelsList } from '@/components/todo-labels-list'
 import { TodoListTableHeader, TodoListTableRowShimmer } from '@/components/todo-list-table'
 import { TodoStatusTable } from '@/components/todo-status-table'
-import { IncludeDoneSwitch } from '@/components/include-done-switch'
+import { Button } from '@/components/ui/button'
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
 import { WatchListButton } from '@/components/watchlist-button'
 import { useAuth } from '@/hooks/useAuth'
 import { DateFormats, DateUtil } from '@/lib/date-util'
 import { useQuery } from '@tanstack/react-query'
+import { EyeIcon } from 'lucide-react'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { TASK_STATUS_ENUM } from '@/api/tasks/tasks.enum'
 
 const QUERY_PARAMS_KEYS = {
   search: 'search',
@@ -61,6 +64,12 @@ const TodoListTableRow = ({ todo, team }: TodoListTableRowProps) => {
       </TableCell>
 
       <TableCell className="flex items-center gap-0.5">
+        <TaskDetailsModal task={todo}>
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+            <EyeIcon className="h-4 w-4" />
+            <span className="sr-only">View details</span>
+          </Button>
+        </TaskDetailsModal>
         {isRessignTodoCtaVisible && <ReassignUser taskId={todo.id} teamId={team.id} />}
         {isEditTodoVisible && <EditTodoButton todo={todo} teamId={team?.id} />}
         {!isRessignTodoCtaVisible && (