"use client"; import { Calendar, FileText, MessageSquare, MoreVertical, Paperclip, Plus, } from "lucide-react"; import { parseAsStringEnum, useQueryState } from "nuqs"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { Avatar, AvatarFallback, AvatarImage, } from "@/registry/new-york/ui/avatar"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Checkbox } from "@/registry/new-york/ui/checkbox"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@/registry/new-york/ui/dialog"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/registry/new-york/ui/dropdown-menu"; import { Input } from "@/registry/new-york/ui/input"; import { Tabs, TabsContent, TabsList, TabsTrigger, } from "@/registry/new-york/ui/tabs"; import { Textarea } from "@/registry/new-york/ui/textarea"; import type { Task, TaskAssignee, TaskPriority, TaskStatus } from "./task-list"; export interface TaskComment { id: string; content: string; author: TaskAssignee; createdAt: Date; updatedAt?: Date; } export interface TaskAttachment { id: string; name: string; url: string; size: number; type: string; uploadedBy: TaskAssignee; uploadedAt: Date; } export interface TaskActivity { id: string; type: "created" | "updated" | "assigned" | "commented" | "completed"; user: TaskAssignee; description: string; timestamp: Date; } export interface Subtask { id: string; title: string; completed: boolean; dueDate?: Date; } export interface TaskDetailProps { task?: Task | null; comments?: TaskComment[]; attachments?: TaskAttachment[]; activities?: TaskActivity[]; subtasks?: Subtask[]; onUpdate?: (updates: Partial) => Promise; onDelete?: () => Promise; onCommentAdd?: (content: string) => Promise; onAttachmentUpload?: (file: File) => Promise; onSubtaskToggle?: (subtaskId: string, completed: boolean) => Promise; onSubtaskAdd?: (title: string) => Promise; className?: string; } function formatDate(date: Date): string { return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", }).format(date); } function formatDateTime(date: Date): string { return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit", }).format(date); } function getPriorityColor(priority: TaskPriority): string { switch (priority) { case "urgent": return "bg-red-500"; case "high": return "bg-orange-500"; case "medium": return "bg-yellow-500"; default: return "bg-gray-500"; } } function getStatusLabel(status: TaskStatus): string { switch (status) { case "todo": return "To Do"; case "in_progress": return "In Progress"; case "done": return "Done"; case "cancelled": return "Cancelled"; } } const tabValues = [ "details", "subtasks", "comments", "attachments", "activity", ] as const; const parseTab = parseAsStringEnum([...tabValues] as string[]).withDefault( "details" ); export default function TaskDetail({ task, comments = [], attachments = [], activities = [], subtasks = [], onUpdate, onDelete, onCommentAdd, onAttachmentUpload, onSubtaskToggle, onSubtaskAdd, className, }: TaskDetailProps) { const [activeTab, setActiveTab] = useQueryState("tab", parseTab); const [isEditing, setIsEditing] = useState(false); const [editTitle, setEditTitle] = useState(task?.title || ""); const [editDescription, setEditDescription] = useState( task?.description || "" ); const [commentText, setCommentText] = useState(""); const [showDeleteDialog, setShowDeleteDialog] = useState(false); if (!task) { return (

Select a task to view details

); } const handleSave = async () => { await onUpdate?.({ title: editTitle, description: editDescription, }); setIsEditing(false); }; const handleCancel = () => { setEditTitle(task.title); setEditDescription(task.description || ""); setIsEditing(false); }; const handleCommentSubmit = async () => { if (!commentText.trim()) return; await onCommentAdd?.(commentText); setCommentText(""); }; const completedSubtasks = subtasks.filter((s) => s.completed).length; const subtaskProgress = subtasks.length > 0 ? (completedSubtasks / subtasks.length) * 100 : 0; return ( <>

{isEditing ? (

setEditTitle(e.target.value)} value={editTitle} />

setEditDescription(e.target.value)}
                    value={editDescription}
                  />
                  <div className="flex gap-2">
                    <Button onClick={handleSave} size="sm" type="button">
                      Save
                    </Button>
                    <Button
                      onClick={handleCancel}
                      size="sm"
                      type="button"
                      variant="outline"
                    >
                      Cancel
                    </Button>
                  </div>
                </div>
              ) : (
                <>
                  <CardTitle className="wrap-break-word">
                    {task.title}
                  </CardTitle>
                  {task.description && (
                    <CardDescription className="wrap-break-word">
                      {task.description}
                    </CardDescription>
                  )}
                </>
              )}
            </div>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button size="icon" type="button" variant="ghost">
                  <MoreVertical className="size-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => setIsEditing(true)}>
                  Edit
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  onClick={() => setShowDeleteDialog(true)}
                  variant="destructive"
                >
                  Delete
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col gap-6">
            <div className="flex flex-wrap items-center gap-4">
              <div className="flex items-center gap-2">
                <span className="text-muted-foreground text-sm">Status:</span>
                <Badge variant="outline">{getStatusLabel(task.status)}</Badge>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-muted-foreground text-sm">Priority:</span>
                <div className="flex items-center gap-1.5">
                  <div
                    className={cn(
                      "size-2 rounded-full",
                      getPriorityColor(task.priority)
                    )}
                  />
                  <span className="text-sm capitalize">{task.priority}</span>
                </div>
              </div>
              {task.dueDate && (
                <div className="flex items-center gap-2">
                  <Calendar className="size-4 text-muted-foreground" />
                  <span className="text-muted-foreground text-sm">
                    {formatDate(task.dueDate)}
                  </span>
                </div>
              )}
            </div>

{task.assignees && task.assignees.length > 0 && (
              <div className="flex flex-col gap-2">
                <span className="text-muted-foreground text-sm">Assignees</span>
                <div className="flex flex-wrap gap-2">
                  {task.assignees.map((assignee) => (
                    <div
                      className="flex items-center gap-2 rounded-lg border bg-card p-2"
                      key={assignee.id}
                    >
                      <Avatar className="size-6">
                        <AvatarImage
                          alt={assignee.name}
                          src={assignee.avatar}
                        />
                        <AvatarFallback>
                          {assignee.name.charAt(0).toUpperCase()}
                        </AvatarFallback>
                      </Avatar>
                      <span className="text-sm">{assignee.name}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

{task.tags && task.tags.length > 0 && (
              <div className="flex flex-col gap-2">
                <span className="text-muted-foreground text-sm">Tags</span>
                <div className="flex flex-wrap gap-2">
                  {task.tags.map((tag) => (
                    <Badge key={tag} variant="outline">
                      {tag}
                    </Badge>
                  ))}
                </div>
              </div>
            )}

<Tabs
              className="flex w-full flex-col gap-4"
              onValueChange={setActiveTab}
              value={activeTab}
            >
              <TabsList>
                <TabsTrigger value="details">Details</TabsTrigger>
                <TabsTrigger value="subtasks">
                  Subtasks ({subtasks.length})
                </TabsTrigger>
                <TabsTrigger value="comments">
                  Comments ({comments.length})
                </TabsTrigger>
                <TabsTrigger value="attachments">
                  Attachments ({attachments.length})
                </TabsTrigger>
                <TabsTrigger value="activity">Activity</TabsTrigger>
              </TabsList>

<div>
                <TabsContent value="details">
                  <div className="flex flex-col gap-4">
                    <div>
                      <span className="text-muted-foreground text-sm">
                        Created: {formatDateTime(task.createdAt)}
                      </span>
                    </div>
                    <div>
                      <span className="text-muted-foreground text-sm">
                        Updated: {formatDateTime(task.updatedAt)}
                      </span>
                    </div>
                  </div>
                </TabsContent>

<TabsContent value="subtasks">
                  <div className="flex flex-col gap-4">
                    {subtasks.length > 0 && (
                      <div className="flex items-center gap-2">
                        <div className="flex-1 rounded-full bg-muted">
                          <div
                            className="h-2 rounded-full bg-primary transition-all"
                            style={{ width: `${subtaskProgress}%` }}
                          />
                        </div>
                        <span className="text-muted-foreground text-sm">
                          {completedSubtasks} of {subtasks.length}
                        </span>
                      </div>
                    )}
                    <div className="flex flex-col gap-2">
                      {subtasks.map((subtask) => (
                        <div
                          className="flex items-center gap-2 rounded-lg border bg-card p-2"
                          key={subtask.id}
                        >
                          <label className="flex flex-1 cursor-pointer items-center gap-2">
                            <Checkbox
                              aria-label={`Mark subtask '${subtask.title}' as complete`}
                              checked={subtask.completed}
                              className="size-4"
                              onCheckedChange={() =>
                                onSubtaskToggle?.(
                                  subtask.id,
                                  !subtask.completed
                                )
                              }
                              tabIndex={0}
                            />
                            <span
                              className={cn(
                                "flex-1 text-sm",
                                subtask.completed &&
                                  "text-muted-foreground line-through"
                              )}
                            >
                              {subtask.title}
                            </span>
                          </label>
                        </div>
                      ))}
                    </div>
                    {onSubtaskAdd && (
                      <Button
                        onClick={() => {
                          const title = prompt("Subtask title:");
                          if (title) onSubtaskAdd(title);
                        }}
                        size="sm"
                        type="button"
                        variant="outline"
                      >
                        <Plus className="size-4" />
                        Add Subtask
                      </Button>
                    )}
                  </div>
                </TabsContent>

<TabsContent value="comments">
                  <div className="flex flex-col gap-4">
                    {comments.map((comment) => (
                      <div
                        className="flex gap-3 rounded-lg border bg-card p-3"
                        key={comment.id}
                      >
                        <Avatar className="size-8">
                          <AvatarImage
                            alt={comment.author.name}
                            src={comment.author.avatar}
                          />
                          <AvatarFallback>
                            {comment.author.name.charAt(0).toUpperCase()}
                          </AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <div className="flex items-center gap-2">
                            <span className="font-medium text-sm">
                              {comment.author.name}
                            </span>
                            <span className="text-muted-foreground text-xs">
                              {formatDateTime(comment.createdAt)}
                            </span>
                          </div>
                          <p className="wrap-break-word text-sm">
                            {comment.content}
                          </p>
                        </div>
                      </div>
                    ))}
                    {onCommentAdd && (
                      <div className="flex flex-col gap-2">
                        <Textarea
                          onChange={(e) => setCommentText(e.target.value)}
                          placeholder="Add a comment…"
                          value={commentText}
                        />
                        <Button
                          onClick={handleCommentSubmit}
                          size="sm"
                          type="button"
                        >
                          <MessageSquare className="size-4" />
                          Post Comment
                        </Button>
                      </div>
                    )}
                  </div>
                </TabsContent>

<TabsContent value="attachments">
                  <div className="flex flex-col gap-2">
                    {attachments.map((attachment) => (
                      <div
                        className="flex items-center justify-between rounded-lg border bg-card p-3"
                        key={attachment.id}
                      >
                        <div className="flex items-center gap-3">
                          <Paperclip className="size-4 text-muted-foreground" />
                          <div className="flex flex-col">
                            <span className="text-sm">{attachment.name}</span>
                            <span className="text-muted-foreground text-xs">
                              {formatDateTime(attachment.uploadedAt)}
                            </span>
                          </div>
                        </div>
                        <Button size="sm" type="button" variant="outline">
                          Download
                        </Button>
                      </div>
                    ))}
                    {onAttachmentUpload && (
                      <Button
                        onClick={() => {
                          const input = document.createElement("input");
                          input.type = "file";
                          input.onchange = (e) => {
                            const file = (e.target as HTMLInputElement)
                              .files?.[0];
                            if (file) onAttachmentUpload(file);
                          };
                          input.click();
                        }}
                        size="sm"
                        type="button"
                        variant="outline"
                      >
                        <Paperclip className="size-4" />
                        Upload Attachment
                      </Button>
                    )}
                  </div>
                </TabsContent>

<TabsContent value="activity">
                  <div className="flex flex-col gap-3">
                    {activities.map((activity) => (
                      <div className="flex gap-3" key={activity.id}>
                        <Avatar className="size-8">
                          <AvatarImage
                            alt={activity.user.name}
                            src={activity.user.avatar}
                          />
                          <AvatarFallback>
                            {activity.user.name.charAt(0).toUpperCase()}
                          </AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <p className="text-sm">
                            <span className="font-medium">
                              {activity.user.name}
                            </span>{" "}
                            {activity.description}
                          </p>
                          <span className="text-muted-foreground text-xs">
                            {formatDateTime(activity.timestamp)}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                </TabsContent>
              </div>
            </Tabs>
          </div>
        </CardContent>
      </Card>

<Dialog onOpenChange={setShowDeleteDialog} open={showDeleteDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Task</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete this task? This action cannot be
              undone.
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-end gap-2">
            <Button
              onClick={() => setShowDeleteDialog(false)}
              type="button"
              variant="outline"
            >
              Cancel
            </Button>
            <Button
              onClick={async () => {
                await onDelete?.();
                setShowDeleteDialog(false);
              }}
              type="button"
              variant="destructive"
            >
              Delete
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}
</article></body></html>

Example Usage