📋 تسک‌فلو | مدیر تسک کانبان با قابلیت ذخیره‌سازی فایل

یک اپلیکیشن مدیریت تسک کانبان (Kanban) تک‌صفحه‌ای قدرتمند که درون یک فایل HTML قرار گرفته است. این ابزار با طراحی گلس‌مورفیسم (Glassmorphism)، پشتیبانی کامل از زبان فارسی و تاریخ شمسی، و قابلیت منحصربه‌فرد ذخیره‌سازی در فایل JSON، جایگزینی کامل برای نرم‌افزارهای سنگین مدیریت پروژه است – بدون نیاز به نصب، سرور یا اینترنت!

مشاهده دمو زنده: task.thepm.ir

---

✨ ویژگی‌های کلیدی

🎨 بصری و طراحی

• رابط کاربری گلس‌مورفیسم (Glassmorphism UI): المان‌های نیمه‌شفاف با افکت تاری (backdrop-filter: blur) و سایه‌های ظریف.
• حالت تاریک و روشن (Dark & Light Mode): تغییر آنی بین دو تم با ذخیره ترجیحات کاربر در فایل دیتابیس.
• طراحی کاملاً واکنش‌گرا (Responsive): در موبایل ستون‌ها به صورت عمودی چیده می‌شوند و همه قابلیت‌ها با لمس کار می‌کنند.
• انیمیشن‌های نرم: افکت محو شدن (Fade-in)، پرش (Scale) برای کارت‌ها، و انیمیشن هشدار برای ددلاین‌های نزدیک.
• نشانگر وضعیت بصری: تسک‌های نزدیک به اتمام (حاشیه زرد)، تسک‌های عقب افتاده (حاشیه قرمز + نبض‌زننده).

🛠 قابلیت‌های مدیریت تسک

• ۴ ستون کانبان: Backlog → Todo → Blocked → Done
• کشیدن و رها کردن (Drag & Drop):
  • حرکت تسک‌ها بین ستون‌ها با موس یا لمس (موبایل)
  • بازچینی (Reordering) تسک‌ها درون یک ستون
  • نمایش Ghost تصویر هنگام درگ
  • اعتبارسنجی هوشمند (برای انتقال به Todo/Blocked/Done حتماً باید مهلت تعیین شده باشد)
• زیرتسک (Parent-Child):
  • ارتباط والد-فرزندی بین تسک‌ها
  • نمایش بصری با حاشیه آبی در سمت راست
  • مدیریت زیرمجموعه‌ها از داخل مودال جزئیات
• سیستم بلاک (Block System):
  • تسک‌ها می‌توانند توسط تسک‌های دیگر مسدود شوند
  • نمایش آیکون ⚠️ روی کارت‌های بلاک شده
  • انتخاب تسک بلاک‌کننده از طریق مودال اختصاصی
• مهلت انجام (Due Date):
  • تقویم شمسی (جلالی) تعاملی
  • تشخیص خودکار ددلاین گذشته (Overdue)
  • هشدار برای مهلت‌های ۱ و ۲ روز باقیمانده
• مسئول (Assignee):
  • انتساب هر تسک به یک نفر
  • لیست خودکار مسئولین (ذخیره و تکمیل می‌شود)
  • فیلتر بر اساس مسئول

📁 آرشیو و سطل آشغال

• آرشیو (Archive): تسک‌های تمام شده را آرشیو کنید (وضعیت اصلی حفظ می‌شود)
• سطل آشغال (Trash): حذف موقت تسک‌ها با قابلیت بازگردانی
• بازگردانی کامل: از آرشیو یا سطل آشغال به وضعیت اصلی برگردید
• حذف دائمی: خالی کردن کامل سطل آشغال با یک کلیک

🔍 فیلتر و جستجو

• جستجوی زنده: در عنوان و توضیحات تسک‌ها
• فیلتر بر اساس وضعیت: نمایش فقط تسک‌های یک ستون خاص
• فیلتر بر اساس مسئول: تمام مسئولین ثبت‌شده به صورت خودکار
• فیلتر بازه تاریخ: از تاریخ و تا تاریخ (با تقویم تعاملی)
• دکمه پاک کردن فیلترها: بازنشانی سریع تمام فیلترها

📝 تاریخچه تغییرات (Log)

• ثبت تمام تغییرات هر تسک:
  • تغییر وضعیت (قبلی → جدید)
  • ویرایش اطلاعات
  • انتقال با Drag & Drop
• زمان دقیق (تاریخ و ساعت شمسی) برای هر رویداد
• قابل مشاهده در مودال جزئیات تسک

💾 سیستم ذخیره‌سازی پیشرفته

• ذخیره‌سازی مبتنی بر فایل (File System Access API):
  • ذخیره خودکار در یک فایل JSON انتخابی توسط کاربر
  • قابلیت حمل: فایل دیتابیس را در درایو، ایمیل یا کلود ذخیره کنید
  • بدون سرور، بدون دیتابیس، فقط یک فایل
• حالت Fallback (IndexedDB): برای مرورگرهایی که از File API پشتیبانی نمی‌کنند (Firefox، Safari)
• Import/Export کامل:
  • خروجی گرفتن از کل دیتابیس
  • وارد کردن فایل دیتابیس قبلی
  • بازنشانی کامل اطلاعات
• مدیریت دسترسی: درخواست مجدد دسترسی به فایل در صورت نیاز

🌐 پشتیبانی از زبان و تاریخ فارسی

• تاریخ شمسی کامل (Jalali Calendar):
  • تبدیل دقیق میلادی به شمسی با الگوریتم ریاضی محض
  • نمایش تاریخ‌ها در کارت‌ها، مودال‌ها و فیلترها
  • تقویم شمسی تعاملی برای انتخاب تاریخ
  • محاسبه اختلاف روزها برای تشخیص ددلاین
• پشتیبانی از راست‌چین (RTL): کل رابط کاربری برای زبان فارسی بهینه شده است
• فونت وزیر (Vazirmatn): فونت زیبا و خوانا برای متن فارسی

🖼 قابلیت‌های اضافی

• پیوست فایل (Attachment):
  • آپلود هر نوع فایل (تصاویر، اسناد، PDF)
  • ذخیره به صورت Base64 درون فایل JSON
  • دانلود مجدد از داخل مودال
• مودال جزئیات کامل: ویرایش تمام خصوصیات تسک در یک صفحه
• نوار وضعیت (Toast Notifications): پیام‌های غیر مزاحم برای تأیید عملیات
• نمایش تعداد: شمارنده تسک‌ها روی هر ستون و روی دکمه‌های آرشیو/سطل آشغال

---

🗂 ساختار پروژه

کل پروژه در یک فایل HTML به نام final.html قرار گرفته است:

Persian-Kanban-Task-Manager/
├── final.html          # کل اپلیکیشن (HTML + CSS + JS)
└── README.md           # مستندات پروژه

ساختار فایل HTML:

• <style>: استایل‌های کامل با پشتیبانی از تم تاریک/روشن و Glassmorphism
• <body>: المان‌های رابط کاربری (هدر، فیلتر، ستون‌های کانبان، مودال‌ها)
• <script>: منطق کامل اپلیکیشن (۱۵۰۰+ خط کد جاوااسکریپت خالص)

ساختار دیتابیس (JSON):

{
  "tasks": [ /* آرایه تسک‌ها */ ],
  "assignees": [ "نریمان", "سارا" ],
  "settings": { "darkMode": false }
}

هر تسک شامل: id، title، description، status، dueDate، assignee، blockedBy، parentId، attachments، log و order است.

---

🚀 تکنولوژی‌های استفاده شده

تکنولوژی	کاربرد
HTML5	ساختار صفحه و المان‌های سمانتیک
CSS3 (Custom)	استایل‌های Glassmorphism، انیمیشن‌ها، تم تاریک/روشن
JavaScript ES6+	منطق کامل برنامه (بدون فریم‌ورک)
File System Access API	ذخیره‌سازی در فایل JSON محلی
IndexedDB API	حالت Fallback برای مرورگرهای ناسازگار
Jalali Calendar Algorithm	تبدیل تاریخ میلادی به شمسی با الگوریتم ریاضی
Vazirmatn Font	فونت فارسی زیبا و خوانا

بدون وابستگی (Zero Dependencies)! تمام کتابخانه‌ها و الگوریتم‌ها به صورت دستی پیاده‌سازی شده‌اند.

---

⚙️ نحوه شخصی‌سازی و استفاده

شروع سریع (بدون کدنویسی)

1. فایل final.html را در مرورگر خود باز کنید.
2. در اولین اجرا:
   • کروم/ادج: یک فایل JSON انتخاب یا ایجاد کنید (داده‌ها در آن ذخیره می‌شوند)
   • فایرفاکس/سافاری: حالت Fallback فعال می‌شود (داده در IndexedDB ذخیره می‌شود)
3. شروع به اضافه کردن تسک‌ها کنید!

افزودن تسک جدید

• عنوان را در کادر بالای صفحه وارد کرده و روی "+ افزودن" کلیک کنید.
• تسک جدید در ستون Backlog قرار می‌گیرد.

ویرایش تسک

• روی هر کارت کلیک کنید تا مودال جزئیات باز شود.
• می‌توانید: عنوان، توضیحات، وضعیت، مسئول، مهلت، پیوست، والد و زیرمجموعه را تغییر دهید.
• لاگ تغییرات در پایین مودال قابل مشاهده است.

جابه‌جایی تسک‌ها

• با موس: کلیک و کشیدن (Drag & Drop) تسک به ستون دیگر
• با موبایل: لمس طولانی و کشیدن
• تغییر ترتیب در یک ستون: تسک را بین دو تسک دیگر رها کنید

فیلتر کردن

• روی دکمه 🔍 در هدر کلیک کنید تا نوار فیلتر باز شود.
• جستجو در عنوان/توضیحات، فیلتر بر اساس وضعیت/مسئول/بازه تاریخ.

آرشیو و حذف

• از مودال جزئیات تسک: دکمه 📦 آرشیو یا 🗑 سطل آشغال
• از هدر: دکمه 📦 برای مشاهده/بازگردانی آرشیو
• از هدر: دکمه 🗑 برای مشاهده/بازگردانی/حذف دائمی

تنظیمات و مدیریت داده

• دکمه ⚙️ در هدر:
  • 📥 Export: خروجی JSON از تمام داده‌ها
  • 📤 Import: وارد کردن فایل JSON قبلی
  • ⚠️ Reset: حذف کامل همه تسک‌ها (تنظیمات تم حفظ می‌شود)

حالت تاریک/روشن

• دکمه 🌓 در هدر - تنظیمات در فایل دیتابیس ذخیره می‌شود.

---

🌐 انتشار (Deployment)

این پروژه آماده برای GitHub Pages است، چون فقط یک فایل HTML است!

1. مخزن را Fork یا Clone کنید:

   git clone https://github.com/NarimanKhaleghi/Persian-Kanban-Task-Manager.git

2. فایل final.html را به index.html تغییر نام دهید (اختیاری).
3. تغییرات خود را به مخزن گیت‌هاب خود Push کنید.
4. به بخش Settings > Pages بروید.
5. شاخه main را به عنوان منبع انتخاب کرده و روی Save کلیک کنید.
6. تسک‌منیجر حرفه‌ای شما اکنون آنلاین است! 🎉

یا به سادگی: فایل را در هر هاست استاتیکی (Cloudflare Pages، Netlify، Vercel) آپلود کنید.

---

📊 مقایسه با رقبا

قابلیت	TaskFlow	Trello	Asana	Jira	Notion
بدون نیاز به اینترنت	✅	❌	❌	❌	❌
یک فایل HTML	✅	❌	❌	❌	❌
کنترل کامل روی داده‌ها	✅	❌	❌	❌	❌
تاریخ شمسی	✅	❌	❌	❌	❌
ذخیره در فایل محلی	✅	❌	❌	❌	❌
رایگان ۱۰۰٪	✅	⚠️	⚠️	⚠️	⚠️
سیستم بلاک	✅	❌	⚠️	✅	❌
تاریخچه تغییرات	✅	✅	✅	✅	⚠️
زیرتسک	✅	✅	✅	✅	✅

---

🖥 سیستم مورد نیاز

مرورگرهای پشتیبان (برای ذخیره فایل JSON):

• ✅ Google Chrome 86+
• ✅ Microsoft Edge 86+
• ✅ Opera 72+
• ⚠️ Firefox (حالت Fallback IndexedDB)
• ⚠️ Safari (حالت Fallback IndexedDB)

حداقل نسخه (برای حالت Fallback):

• هر مرورگری که از ES6 و IndexedDB پشتیبانی کند (تمام مرورگرهای مدرن از ۲۰۱۵ به بعد)

---

🤝 مشارکت

مشارکت‌ها، گزارش باگ‌ها و درخواست‌های ویژگی جدید پذیرفته می‌شود!

1. مخزن را Fork کنید
2. یک Branch جدید بسازید (git checkout -b feature/amazing-feature)
3. تغییرات خود را Commit کنید (git commit -m 'Add amazing feature')
4. به Branch خود Push کنید (git push origin feature/amazing-feature)
5. یک Pull Request ایجاد کنید

ایده‌های بهبود (Roadmap)

• اضافه کردن تگ‌ها و برچسب‌ها (Tags/Labels)
• تقویم میلادی به عنوان گزینه
• نوتیفیکیشن مرورگر برای ددلاین‌های نزدیک
• داشبورد آماری با نمودار (نمودار سرعت، تعداد تسک‌ها)
• قابلیت همگام‌سازی با Google Drive
• نسخه PWA با قابلیت نصب روی موبایل
• پشتیبانی از چندین برد (Multiple Boards)

---

📄 لایسنس

MIT License - آزاد برای استفاده شخصی، تجاری، آموزشی و هر نوع استفاده دیگر.

---

💬 تماس و پشتیبانی

• گزارش مشکل: صفحه Issues

مشاهده دمو زنده: task.thepm.ir

---

ساخته شده با ❤️ توسط نریمان خالقی

✨ برای کسانی که به داده‌های خود اهمیت می‌دهند و ابزاری ساده اما حرفه‌ای می‌خواهند ✨

---

نکته امنیتی: فایل دیتابیس JSON شامل تمام اطلاعات تسک‌ها و پیوست‌ها (به صورت Base64) است. از به اشتراک گذاری آن با افراد غیرمجاز خودداری کنید.

نکته فنی: برای بهترین تجربه از Google Chrome یا Microsoft Edge استفاده کنید تا از قابلیت ذخیره فایل بهره‌مند شوید.