مستند طراحی UI صفحه خانه مدیر

این سند برای تیم‌های محصول، طراحی و مهندسی است و مشخصات قابل‌تحویل فریم Home مدیر ساختمان را تعریف می‌کند. صفحه باید وضعیت مالی، رخدادهای امروز و کارهای نیازمند پیگیری را در Context فعال نمایش دهد. طراحی Home مالک/ساکن و جزئیات Workflow ماژول‌های مقصد خارج از محدوده این سند هستند.

وضعیت سند

وضعیت سند

وضعیت In Review است. ساختار اصلی صفحه در Figma طراحی شده و رفتار صف «نیازمند توجه» مشخص است؛ Stateهای جایگزین و نسخه مالک/ساکن هنوز نیازمند طراحی هستند.

خلاصه تصمیم

Home مدیر یک Dashboard اقدام‌محور است. Hero مالی، اقدام‌های سریع، نمای امروز، کارها، تیکت‌ها، نظرسنجی و اعلان‌ها در صفحه دیده می‌شوند؛ اما منطق کامل هر قابلیت در ماژول تخصصی خودش باقی می‌ماند. دکمه شناور «ایجاد» نیز Launcher سراسری Actionهای مجاز است و مقصد ناوبری مستقل محسوب نمی‌شود.

مشخصات سند

مورد	مقدار
وضعیت	In Review
مالک محتوا	تیم محصول
مخاطب	محصول، طراحی UI/UX و مهندسی
مرحله فعلی	بازبینی UI و تکمیل Stateها
تاریخ مستندسازی	2026-09-12
نقش هدف	مدیر ساختمان با دسترسی کامل
پلتفرم	موبایل، راست‌به‌چپ
نام فریم/Section	Home
شناسه Node	1553:2984
ابعاد Section	570 × 1864 px
منبع حقیقت UI	فریم Home در Figma
مستند مرجع محصول	صفحه اصلی و ناوبری نقش‌ها

طرح Figma

نمای زیر مستقیماً از فریم Home در فایل Figma بارگذاری می‌شود. اگر Preview نمایش داده نشد، فریم Home را در Figma باز کنید.

تصویر طراحی به‌تنهایی جای مشخصات متنی این صفحه را نمی‌گیرد؛ قواعد، Stateها و معیارهای پذیرش باید مستقل از دسترسی به Figma قابل جست‌وجو باشند.

دامنه

داخل محدوده

• ترتیب و محتوای ویجت‌های Home مدیر
• رفتار Entry Pointها، ناوبری پایین و دکمه «ایجاد»
• قواعد Permission-aware و Context فعال
• Stateهای موردنیاز برای Design Sign-off
• وابستگی Home به ماژول‌های مالی، عملیات، پیام‌ها، رأی‌گیری و Shift

خارج از محدوده

• Workflow داخلی محاسبه شارژ، ثبت هزینه و انتشار اعلان
• چرخه‌عمر تیکت، Task، رأی‌گیری و دفتر روزانه
• طراحی Home مالک و Home ساکن
• مشخصات API و پیاده‌سازی Componentها

هدف صفحه

صفحه خانه باید در یک نگاه به مدیر بگوید وضعیت مالی ساختمان چگونه است، امروز چه اتفاق‌هایی در جریان است و کدام کارها نیازمند پیگیری‌اند. کارهای پرتکرار نیز باید بدون ورود به منوی کامل قابل شروع باشند.

ترتیب فعلی محتوا از «تصویر کلی» به «اقدام روزانه» حرکت می‌کند:

1. Context و وضعیت مالی
2. اقدام‌های سریع
3. نمای امروز مجتمع
4. کارها و آخرین تیکت‌ها
5. مشارکت و اطلاع‌رسانی

ساختار صفحه

۱. سربرگ و Context فعال

• تصویر پروفایل مدیر و دسترسی به حساب کاربری
• آیکن اعلان با امکان نمایش Badge موارد خوانده‌نشده یا نیازمند اقدام
• انتخاب‌گر ساختمان/نقش فعال در بالای صفحه
• نمایش Context باید برای حساب‌های چندساختمانی یا چندنقشی قابل تغییر باشد.

با تغییر Context، تمام مبلغ‌ها، Badgeها، اقدام‌های سریع و محتوای ویجت‌ها باید دوباره بر اساس Building، Role، Permission و Scope فعال بارگذاری شوند.

۲. خلاصه مالی

Hero مالی با پس‌زمینه سبز تیره، مهم‌ترین KPI مالی ماه را نمایش می‌دهد:

داده	نمونه موجود در طرح	رفتار
نرخ وصول	٪۷۸ وصول	نسبت مبلغ وصول‌شده به مبلغ قابل وصول دوره فعال
مبلغ وصول‌شده	۴۲۸٬۵۶۰٬۰۰۰ ریال	مبلغ باید با جداکننده هزارگان و واحد پول نمایش داده شود.
دوره	«وصول شده از شارژ مرداد»	دوره مالی فعال باید صریح باشد.
CTA	«گزارش کامل مالی»	ورود به گزارش مالی همان ساختمان و همان دوره

در صورت نداشتن Permission مالی، کل Hero حذف می‌شود و فضای آن به اولین ویجت مجاز بعدی می‌رسد؛ مبلغ نباید به شکل Mask شده ولی قابل استنتاج باقی بماند.

۳. اقدام‌های سریع

چهار Entry Point فعلی عبارت‌اند از:

اقدام	نتیجه مورد انتظار
شارژ جدید	شروع Flow ایجاد Charge و انتخاب دوره/دامنه
اعلان جدید	ساخت اعلان برای مخاطبان مجاز
ثبت هزینه	ثبت هزینه با حساب، دسته‌بندی، مبلغ و مدرک
ایجاد بیشتر	بازکردن فهرست کامل Actionهای مجاز

Action بدون Permission نمایش داده نمی‌شود. پس از حذف یک Action، چینش باید بدون جای خالی بازآرایی شود.

۴. نمای امروز مجتمع

کارت تاریخ و خلاصه اتفاق‌های همان روز را ترکیب می‌کند:

• تاریخ شمسی: ۱۴ شهریور، شنبه
• تعداد کل: ۸ فعالیت
• رزرو امکانات: ۳
• مهمان‌های امروز: ۵
• CTA «نمای امروز» برای ورود به Timeline عملیاتی روز

آیتم‌های این کارت باید بتوانند مهمان، رزرو، بسته، پیمانکار، Shift و رویداد برنامه‌ریزی‌شده را پوشش دهند. فقط دسته‌هایی که مقدار دارند نمایش داده شوند.

۵. کارها و آخرین تیکت‌ها

دو خلاصه عملیاتی در کنار یکدیگر قرار گرفته‌اند:

• کار فوری: ۳
• کار عقب‌افتاده: ۱۴
• آخرین تیکت‌ها با عنوان، واحد/ثبت‌کننده، زمان یا وضعیت و تصویر فرد در صورت وجود

انتخاب شمارنده باید فهرست همان فیلتر را باز کند. انتخاب تیکت نیز مستقیماً به جزئیات آن می‌رود. فوریت نباید فقط با رنگ مشخص شود و باید Label یا آیکن قابل‌فهم داشته باشد.

۶. نظرسنجی فعال

طرح یک نظرسنجی تک‌انتخابی با سؤال «آیا با اضافه شدن لابی‌من سوم به ساختمان موافق هستید؟» دارد:

• موافقم
• مخالفم
• نظری ندارم
• CTA «مشاهده نتیجه»

پس از انتخاب گزینه، ثبت رأی باید Action صریح داشته باشد یا رفتار ثبت خودکار با پیام موفقیت روشن شود. تا زمان تصمیم محصول، ثبت خودکار فرض نمی‌شود. نتیجه پیش از رأی فقط در صورت Policy مجاز نمایش داده شود.

۷. اعلان‌ها

بخش پایانی، آخرین اعلان‌های ساختمان را به‌صورت خلاصه نمایش می‌دهد و CTA مشاهده همه اعلان‌ها دارد. هر ردیف حداقل شامل عنوان، زمان انتشار، وضعیت خوانده‌شدن و در صورت نیاز سطح اهمیت است.

اعلان اضطراری یا نیازمند تأیید دریافت باید بالاتر از محتوای عادی صفحه نمایش داده شود و در این فهرست گم نشود.

ناوبری ثابت و دکمه «ایجاد»

نوار پایین هنگام Scroll ثابت می‌ماند و شامل این مقصدهاست:

مقصد	رفتار
خانه	بازگشت به ابتدای Dashboard و نمایش حالت فعال
پیام‌ها	ورود به مرکز پیام‌ها و اعلان‌های نیازمند پاسخ
کارها	ورود به فهرست کارها، تیکت‌ها و ارجاع‌ها
بیشتر	بازکردن منوی کامل ماژول‌ها و تنظیمات

دکمه شناور «ایجاد» Action ناوبری نیست؛ یک Launcher زمینه‌مند است. با لمس آن، Bottom Sheet ایجاد سریع باز می‌شود و فقط گزینه‌های مجاز را نشان می‌دهد. چهار Action بالای صفحه Shortcuts ثابت و قابل اسکن‌اند؛ «ایجاد» مسیر عمومی برای Actionهای بیشتر است.

گزینه‌های پیشنهادی Bottom Sheet ایجاد

• شارژ
• هزینه
• اعلان
• درخواست یا Task
• عضو/فرد
• مهمان
• رزرو
• ثبت دفتر روزانه؛ فقط برای نقش‌های شیفتی مجاز

انطباق با نیازهای محصول

نیاز مصوب	پوشش در فریم فعلی	توضیح
Context Switcher	پوشش داده شده	در Header دیده می‌شود؛ State بازشده لازم است.
KPI و گزارش مالی	پوشش داده شده	نرخ وصول، مبلغ و CTA گزارش وجود دارد.
ایجاد سریع	پوشش داده شده	چهار Shortcut و FAB ایجاد وجود دارد.
نمای عملیاتی امروز	پوشش داده شده	تاریخ، فعالیت، رزرو و مهمان نمایش داده شده‌اند.
کار فوری و عقب‌افتاده	پوشش داده شده	شمارنده‌ها دیده می‌شوند.
آخرین تیکت‌ها	پوشش داده شده	کارت خلاصه وجود دارد.
نظرسنجی	پوشش داده شده	حالت انتخاب دیده می‌شود؛ ثبت/موفقیت نیاز به طراحی دارد.
اعلان‌ها	پوشش داده شده	فهرست خلاصه در انتهای صفحه وجود دارد.
صف یکپارچه «نیازمند توجه شما»	تصمیم محصول نهایی؛ UI نیازمند همگام‌سازی	فقط موارد اقدام‌پذیر وارد صف می‌شوند و فهرست کامل در صفحه «موارد نیازمند توجه» است.
دفتر روزانه و Escalation شیفت	فلو مستقل تکمیل	Home فقط خلاصه موارد فوری یا ارجاع‌شده را نشان می‌دهد.
ادامه راه‌اندازی	شرطی و غایب	نبود آن در حالت Setup کامل صحیح است؛ State ناقص لازم است.
آخرین فعالیت‌ها/Audit	از Home حذف شد	در صفحه مستقل «لاگ مدیر ساختمان» قرار می‌گیرد.
نسخه مالک/ساکن	خارج از این فریم	طراحی مستقل لازم است.

تصمیم تکمیلی برای دفتر روزانه و Shift

برای از دست نرفتن بازخورد عملیاتی، Home مدیر باید یک ردیف یا کارت در صف «نیازمند توجه» برای این موارد داشته باشد:

• گزارش نیازمند تصمیم مدیر
• رخداد فوری یا امنیتی
• مورد تحویل عقب‌افتاده
• تحویل مهم تأییدنشده توسط شیفت بعد
• مسئله تکرارشونده در چند Shift

موارد عادی دفتر روزانه وارد Home مدیر نمی‌شوند و فقط در گزارش Shift باقی می‌مانند. جزئیات Flow در ماژول دفتر روزانه و عملیات لابی ثبت شده است.

ساختار نهایی بخش «امروز»

«آخرین فعالیت‌ها» از Home حذف می‌شود. بخش «امروز» دو گروه مستقل دارد:

• نیازمند اقدام: تأیید، تصمیم، مورد فوری، عقب‌افتاده یا ارجاع مستقیم به مدیر
• برنامه امروز: مهمان، رزرو، مراجعه سرویس‌کار و رویدادهای صرفاً اطلاع‌رسان

موردی که به اقدام مدیر نیاز دارد فقط در گروه اول نمایش داده می‌شود و در «برنامه امروز» تکرار نمی‌شود. هر گروه خلاصه کوتاه و مسیر «مشاهده همه» به صفحه تخصصی خودش دارد. سابقه تغییرات و فعالیت‌های تاریخی از «لاگ مدیر ساختمان» قابل دسترسی است.

Stateهای لازم پیش از تأیید نهایی

برای هر ویجت، حداقل Stateهای زیر باید در Figma اضافه شوند:

• Loading/Skeleton
• Empty با متن راهنما و CTA متناسب
• Partial Error با Retry همان ویجت
• Offline و نمایش زمان آخرین همگام‌سازی
• Permission Denied یا حذف کامل بر اساس Policy
• داده حساس مخفی
• Badge صفر، تک‌رقمی و +۹۹
• متن بلند، نام ساختمان بلند و مبلغ بزرگ
• اعلان اضطراری و پیام نیازمند تأیید دریافت
• صفحه با یک یا چند ویجت حذف‌شده به دلیل Permission

Stateهای اختصاصی نیز شامل مالی بدون دوره فعال، روز بدون فعالیت، بدون کار فوری، رأی ثبت‌شده، نظرسنجی بسته و بدون اعلان هستند.

قرارداد داده پیشنهادی

بلوک	داده‌های حداقلی
Context	buildingId، buildingName، roleId، roleTitle، permissions
مالی	periodId، periodTitle، collectedAmount، collectibleAmount، collectionRate، currency
امروز	date، totalActivities، شمارنده هر دسته، hasMore
کارها	urgentCount، overdueCount، unassignedCount
تیکت	id، title، unitLabel، requesterName، priority، status، updatedAt
نظرسنجی	pollId، question، options، selectedOption، canVote، resultPolicy، endsAt
اعلان	id، title، severity، publishedAt، readAt، ackRequired

قواعد UX و دسترس‌پذیری

• مبلغ، درصد و شمارنده باید برای Screen Reader دارای برچسب کامل باشند.
• رنگ تنها نشانه فوریت، عقب‌افتادگی، انتخاب یا موفقیت نیست.
• محدوده لمس Actionها حداقل 44 × 44 px باشد.
• نوار ناوبری و FAB نباید آخرین کارت یا CTA را بپوشانند؛ پایین صفحه Safe Area دارد.
• Scroll صفحه نباید نوار پایین را حرکت دهد.
• تاریخ نسبی در کنار تاریخ دقیق قابل دسترس باشد.
• هنگام تغییر Context، Skeleton موضعی و نام Context جدید از اختلاط داده جلوگیری کند.
• CTAهای هم‌نام باید مقصد و Context یکسان داشته باشند.

رویدادهای تحلیلی پیشنهادی

• home_viewed
• home_context_changed
• home_financial_report_opened
• home_quick_action_selected
• home_today_opened
• home_task_filter_opened
• home_ticket_opened
• home_poll_vote_submitted
• home_announcement_opened
• home_create_launcher_opened

تمام Eventها باید buildingId، roleId، sourceWidget و در صورت نیاز itemId داشته باشند؛ مبلغ و متن خصوصی در Analytics ارسال نشود.

موارد باز پیش از Design Sign-off

1. آیا اولویت Home با Hero مالی باقی می‌ماند یا صف «نیازمند توجه» در صورت وجود بالاتر از آن قرار می‌گیرد؟
2. رفتار نهایی ثبت رأی خودکار است یا با CTA؟
3. Bottom Sheet دکمه «ایجاد» دقیقاً چه Actionهایی را برای هر Permission نشان می‌دهد؟
4. جایگاه گزارش‌های Escalate‌شده لابی/نگهبانی در فریم نهایی چیست؟
5. فریم‌های Loading، Empty، Error، Offline و Permission-aware چه زمانی تکمیل می‌شوند؟
6. نسخه Home مالک و نسخه Home ساکن در یک Variant هستند یا دو Variant مستقل؟

معیار پذیرش طراحی

• همه CTAها مقصد یا Overlay مشخص دارند.
• عناصر ثابت و Scrollable در Layer naming تفکیک شده‌اند.
• همه Stateهای ضروری حداقل یک نمونه قابل بازبینی دارند.
• حذف Permission-aware ویجت‌ها Layout را نمی‌شکند.
• آخرین محتوا زیر Bottom Navigation قابل مشاهده و لمس است.
• صف توجه مدیر موارد Shift و کارهای فوری را بدون اتکا به رنگ متمایز می‌کند.
• طراحی نسخه مالک/ساکن با Scope واحد، جدا از نسخه مدیر تحویل می‌شود.