attachments list

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 200,
+  "singleAttributePerLine": true
+}

src/langs/fa.json

@@ -1005,6 +1005,8 @@
       "copy_from": "کپی از",
       "none": "هیچ کدام",
       "link": "لینک",
+      "files": "فایل ها",
+      "links": "لینک ها",
       "or": "یا",
       "insert": "درج",
       "start_date": "تاریخ شروع",

src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx

@@ -1,6 +1,7 @@
 import { type FC, useEffect, useState } from "react";
 import DefaulModal from "../../../../components/DefaulModal";
 import type { Task } from "../../types";
+import AttachmentList from "./attachment/List";
 import CheckLists from "./checklist/List";
 import TaskDetailDescription from "./TaskDetailDescription";
 import TaskDetailHeader from "./TaskDetailHeader";
@@ -43,6 +44,8 @@ const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
 
       <TaskDetailDescription value={description} onChange={setDescription} />
 
+      <AttachmentList />
+
       <CheckLists />
     </DefaulModal>
   );

src/pages/taskmanager/components/task-detail/attachment/AttachmentItem.tsx

@@ -0,0 +1,54 @@
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { Document, Link2, More } from "iconsax-react";
+import { type FC } from "react";
+import { timeAgo } from "../../../../../config/func";
+
+type Props = {
+  title: string;
+  createdAt: string;
+  type: "file" | "link";
+  url?: string;
+  onEdit: () => void;
+  onDelete: () => void;
+};
+
+const AttachmentItem: FC<Props> = ({ title, createdAt, type, url, onEdit, onDelete }) => {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <div className="shrink-0 size-9 bg-white rounded-[10px] flex items-center justify-center">
+          {type === "file" ? <Document size={20} color="#292D32" /> : <Link2 size={20} color="#292D32" />}
+        </div>
+
+        <div className="min-w-0">
+          {type === "link" && url ? (
+            <a href={url} target="_blank" rel="noopener noreferrer" className="text-xs font-bold text-[#0047FF] underline truncate block">
+              {title}
+            </a>
+          ) : (
+            <div className="text-xs font-bold truncate">{title}</div>
+          )}
+          <div className="text-[11px] mt-0.5">{timeAgo(createdAt)}</div>
+        </div>
+      </div>
+
+      <Popover className="relative shrink-0">
+        <PopoverButton className="size-7 bg-white/60 rounded-[8px] flex items-center justify-center outline-none">
+          <More size={18} color="#292D32" />
+        </PopoverButton>
+
+        <PopoverPanel anchor="bottom end" className="z-[80] mt-1 rounded-[10px] bg-white shadow-md text-right p-3">
+          <button type="button" onClick={onEdit} className="w-full text-sm text-right">
+            ویرایش
+          </button>
+
+          <button type="button" onClick={onDelete} className="w-full mt-3 text-sm text-right text-[#FF0000]">
+            پاک کردن
+          </button>
+        </PopoverPanel>
+      </Popover>
+    </div>
+  );
+};
+
+export default AttachmentItem;

src/pages/taskmanager/components/task-detail/attachment/List.tsx

@@ -0,0 +1,75 @@
+import { type FC } from "react";
+import { useTranslation } from "react-i18next";
+import AttachmentItem from "./AttachmentItem";
+import type { TaskAttachment } from "./types";
+
+const AttachmentList: FC = () => {
+  const { t } = useTranslation("global");
+
+  const attachments: TaskAttachment[] = [
+    {
+      id: "1",
+      title: "file.pdf",
+      fileName: "file.pdf",
+      createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
+    },
+    {
+      id: "2",
+      title: "لینک طرح",
+      url: "https://example.com",
+      createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
+    },
+  ];
+
+  const files = attachments.filter((item) => item.fileName);
+  const links = attachments.filter((item) => item.url);
+
+  if (attachments.length === 0) return null;
+
+  return (
+    <div className="mt-6">
+      <div className="text-sm font-bold">{t("taskmanager.task_detail.attachment")}</div>
+
+      {files.length > 0 && (
+        <div className="mt-4">
+          <div className="text-sm">{t("taskmanager.task_detail.files")}</div>
+
+          <div className="mt-3 flex flex-col gap-3">
+            {files.map((item) => (
+              <AttachmentItem
+                key={item.id}
+                title={item.fileName ?? item.title}
+                createdAt={item.createdAt ?? ""}
+                type="file"
+                onEdit={() => {}}
+                onDelete={() => {}}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {links.length > 0 && (
+        <div className="mt-4">
+          <div className="text-sm">{t("taskmanager.task_detail.links")}</div>
+
+          <div className="mt-3 flex flex-col gap-3">
+            {links.map((item) => (
+              <AttachmentItem
+                key={item.id}
+                title={item.title}
+                createdAt={item.createdAt}
+                type="link"
+                url={item.url}
+                onEdit={() => {}}
+                onDelete={() => {}}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AttachmentList;

src/pages/taskmanager/components/task-detail/attachment/types.ts

@@ -1,6 +1,8 @@
 export type TaskAttachment = {
   id: string;
   title: string;
-  linkId: string;
+  createdAt: string;
+  linkId?: string;
   fileName?: string;
+  url?: string;
 };