From 1bef61588b0e5d6b25b665a2494ee52555ddba18 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 10 Jun 2026 14:47:26 +0330
Subject: [PATCH] Task + column scroll

---
 src/pages/taskmanager/components/Column.tsx | 13 +++++---
 src/pages/taskmanager/components/Task.tsx   | 33 +++++++++++++++++++++
 src/pages/taskmanager/workspace.tsx         | 13 ++++++--
 3 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/taskmanager/components/Task.tsx

diff --git a/src/pages/taskmanager/components/Column.tsx b/src/pages/taskmanager/components/Column.tsx
index 8a410da..031d8da 100644
--- a/src/pages/taskmanager/components/Column.tsx
+++ b/src/pages/taskmanager/components/Column.tsx
@@ -1,15 +1,20 @@
 import { AddCircle, More } from "iconsax-react";
 import { type FC } from "react";
 
-const Column: FC = () => {
+type Props = {
+  children: React.ReactNode;
+};
+
+const Column: FC<Props> = (props: Props) => {
   return (
-    <div className="bg-[#F0F3F7] rounded-xl p-6 max-w-[290px] w-full">
-      <div className="flex justify-between items-center">
+    <div className="bg-[#F0F3F7] rounded-xl p-6 max-w-[310px] w-full h-full flex flex-col min-h-0">
+      <div className="flex justify-between items-center shrink-0">
         <div>{"برای انجام"}</div>
         <More size={20} color="black" />
       </div>
+      <div className="mt-5 overflow-y-auto flex-1 min-h-0">{props.children}</div>
 
-      <div className="mt-5 flex gap-2 items-center">
+      <div className="mt-5 flex gap-2 items-center shrink-0">
         <AddCircle size={18} color="#888888" />
         <div className="text-description text-[13px] mt-0.5">اضافه کردن تسک</div>
       </div>
diff --git a/src/pages/taskmanager/components/Task.tsx b/src/pages/taskmanager/components/Task.tsx
new file mode 100644
index 0000000..2d819e8
--- /dev/null
+++ b/src/pages/taskmanager/components/Task.tsx
@@ -0,0 +1,33 @@
+import { AttachCircle, Calendar, TickSquare } from "iconsax-react";
+import { type FC } from "react";
+
+const Task: FC = () => {
+  return (
+    <div className="bg-white rounded-lg p-2">
+      <div className="h-10 bg-yellow-500 rounded-lg"></div>
+      <div className="bg-[#FF76C2] h-5 px-3 flex items-center mt-2 text-[10px] text-white rounded-md w-fit">برچشب</div>
+      <div className="font-bold text-xs mt-2">اضافه شدن پیش نمایش</div>
+      <div className="mt-2 flex items-center gap-4 text-xs">
+        <div className="flex items-center gap-1 text-[10px]">
+          <Calendar size={16} color="#292D32" />
+          <div>۱ اردیبهشت - ۲۰ اردیبهشت</div>
+        </div>
+
+        <div className="flex gap-1">
+          <AttachCircle size={16} color="#292D32" />
+          <div>1</div>
+        </div>
+        <div className="flex gap-1">
+          <TickSquare size={16} color="#292D32" />
+          <div>1/5</div>
+        </div>
+      </div>
+
+      <div className="mt-2 flex justify-end">
+        <div className="size-6 bg-gray-200 rounded-full"></div>
+      </div>
+    </div>
+  );
+};
+
+export default Task;
diff --git a/src/pages/taskmanager/workspace.tsx b/src/pages/taskmanager/workspace.tsx
index 0e9b76d..5f28cbd 100644
--- a/src/pages/taskmanager/workspace.tsx
+++ b/src/pages/taskmanager/workspace.tsx
@@ -1,13 +1,20 @@
 import { type FC } from "react";
 import Column from "./components/Column";
 import HeaderWorkspace from "./components/HeaderWorkspace";
+import Task from "./components/Task";
 
 const Workspace: FC = () => {
   return (
-    <div className="bg-[#01347A] h-full rounded-[32px] overflow-hidden">
+    <div className="bg-[#01347A] h-full rounded-[32px] overflow-hidden flex flex-col">
       <HeaderWorkspace />
-      <div className="px-8 flex gap-7 mt-6">
-        <Column />
+      <div className="px-8 flex gap-7 mt-6 flex-1 min-h-0 overflow-hidden pb-6">
+        <Column>
+          <div className="flex flex-col gap-4">
+            <Task />
+            <Task />
+            <Task />
+          </div>
+        </Column>
       </div>
     </div>
   );