📮
Mailbox Page
organizes incoming, sent, and archived messages, providing an efficient way to manage communications.
View Mode
HTML
<div class="page-head">
<div class="d-flex justify-content-between align-items-center gap-1">
<div>
<h1 class="page-title">صندوق البريد</h1>
<p class="page-desc">متابعة وارسال الرسائل بفعالية.</p>
</div>
<button class="btn btn-primary flex-shrink-0" data-bs-toggle="modal" data-bs-target="#new-message-modal"><span class="tticon-plus-bold btn-icon"> </span>رسالة جديدة</button>
</div>
</div>
<div class="inbox" id="inbox">
<ul class="inbox__tabs nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-inbox-tab" data-bs-toggle="pill" data-bs-target="#pills-inbox" type="button" role="tab" aria-controls="pills-inbox" aria-selected="true"><span class="tticon-inbox nav-icon"></span>البريد الوارد<span class="nav-number">(246)</span><span class="nav-unread-number">4</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-sent-tab" data-bs-toggle="pill" data-bs-target="#pills-sent" type="button" role="tab" aria-controls="pills-sent" aria-selected="false"><span class="tticon-send nav-icon"></span>المرسل<span class="nav-number">(137)</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-draft-tab" data-bs-toggle="pill" data-bs-target="#pills-draft" type="button" role="tab" aria-controls="pills-draft" aria-selected="false"><span class="tticon-pen-line nav-icon"></span>المسودة<span class="nav-number">(4)</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-scheduled-tab" data-bs-toggle="pill" data-bs-target="#pills-scheduled" type="button" role="tab" aria-controls="pills-scheduled" aria-selected="false"><span class="tticon-envelope-clock nav-icon"></span>المجدولة</button>
</li>
</ul><div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-inbox" role="tabpanel" aria-labelledby="pills-inbox-tab" tabindex="0">
<div class="table-wrapper border-0 rounded-0">
<div class="table-header d-flex justify-content-between align-items-center">
<div class="form-check me-3">
<input class="form-check-input" type="checkbox"/>
</div>
<div class="input-group me-auto"><span class="tticon-search input-group-text"></span>
<input class="form-control" type="search" placeholder="بحث داخل صندوق البريد..."/>
</div>
<div class="d-flex gap-2 align-items-center me-3 action-btns">
<button class="btn btn-square btn-sm" data-bs-toggle="tooltip" data-bs-title="تعيين كغير مقروءة" data-bs-offset="0,4"><span class="tticon-envelope-open btn-icon"></span></button>
<button class="btn btn-square btn-sm" data-bs-toggle="tooltip" data-bs-title="إعادة توجيه" data-bs-offset="0,4"><span class="tticon-send btn-icon"></span></button>
<hr/>
<button class="btn btn-square btn-sm" data-bs-toggle="modal" data-bs-target="#delete-message-modal"><span class="tticon-trash btn-icon"></span></button>
</div>
</div>
<div class="overflow-scrolld">
<table class="table align-middle">
<tbody>
<tr class="inbox__message-item inbox__message-item--unread">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html">عبدالله الأسمري</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">استفسار عن حملة التبرعات</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">مرحبًا، أود معرفة المزيد عن حملة التبرعات القادمة وكيف يمكنني المشاركة.</span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-open dropdown-icon"></span>علامة مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item inbox__message-item--unread">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked="checked"/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html">نورة الزهراني</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">مشكلة في عملية التبرع</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">لقد حاولت التبرع ولكن واجهت مشكلة في عملية الدفع. هل يمكنكم مساعدتي؟</span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">10:13 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-open dropdown-icon"></span>علامة مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html">فاطمة العتيبي</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">تفاصيل الحملة الجديدة</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">أود أن أستفسر عن تفاصيل الحملة الجديدة التي تم الإعلان عنها مؤخرًا</span></span><span class="inbox__attachments"><span class="text-english">2</span><span class="tticon-attachment-bold"></span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">2:33 PM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html">محمد الغامدي</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">استفسار عن حملة التبرعات</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">هل يمكنكم تزويدي بمعلومات حول كيفية تحديث بيانات حسابي؟ شكرًا لكم!</span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item inbox__message-item--unread">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html">أحمد العنزي</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">مشكلة في حساب المستخدم</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">لقد واجهت مشكلة في تسجيل الدخول إلى حسابي. هل يمكنكم مساعدتي في استعادة الوصول؟</span></span><span class="inbox__attachments"><span class="text-english">4</span><span class="tticon-attachment-bold"></span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html"><span><span>19 </span><span class="text-arabic"> مارس</span></span></a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-open dropdown-icon"></span>علامة مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html">ليلى القحطاني</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">اقتراح جديد</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">أود اقتراح إجراء ورشة عمل للمتبرعين لتعريفهم بمشاريعنا وكيفية الدعم.</span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">12/14/2024</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<ul class="pagination">
<li class="pagination__item pagination__item--disabled pagination__item--prev"><a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-right"></span></a></li>
<li class="pagination__item pagination__item--active"><a class="pagination__item-link" href="#!">1</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">2</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">3</a></li>
<li class="pagination__item"><span class="pagination__item-dots">...</span></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">12</a></li>
<li class="pagination__item pagination__item--next"><a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-left"></span></a></li>
</ul>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24" fill="var(--tt-text-loud)" xmlns="http://www.w3.org/2000/svg">
<path d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z"/>
<path opacity="0.4" d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z"/>
</svg>10
</button>
<ul class="dropdown-menu dropdown-start">
<li><a class="dropdown-item active" href="#!">10</a></li>
<li><a class="dropdown-item" href="#!">20</a></li>
<li><a class="dropdown-item" href="#!">30</a></li>
<li><a class="dropdown-item" href="#!">40</a></li>
<li><a class="dropdown-item" href="#!">50</a></li>
</ul>
</div><span>93</span><span class="d-none d-sm-inline">/</span><span class="d-none d-sm-inline">1-10</span>
</div>
</div>
</div></div>
<div class="tab-pane fade" id="pills-sent" role="tabpanel" aria-labelledby="pills-sent-tab" tabindex="0">
<div class="table-wrapper border-0 rounded-0">
<div class="table-header d-flex justify-content-between align-items-center">
<div class="form-check me-3">
<input class="form-check-input" type="checkbox"/>
</div>
<div class="input-group me-auto"><span class="tticon-search input-group-text"></span>
<input class="form-control" type="search" placeholder="بحث داخل صندوق البريد..."/>
</div>
<div class="d-flex gap-2 align-items-center me-3 action-btns">
<button class="btn btn-square btn-sm"><span class="tticon-envelope-dot btn-icon"></span></button>
<hr/>
<button class="btn btn-square btn-sm"><span class="tticon-trash btn-icon"></span></button>
<button class="btn btn-square btn-sm ms-3"><span class="tticon-refresh btn-icon"></span></button>
</div>
</div>
<div class="overflow-scrolld">
<table class="table align-middle">
<tbody>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html"><span class="tticon-checks inbox__seen-status"></span>إلى: عبدالله الأسمري</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">استفسار عن حملة التبرعات</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">مرحبًا، أود معرفة المزيد عن حملة التبرعات القادمة وكيف يمكنني المشاركة.</span></span><span class="inbox__attachments"><span class="text-english">1</span><span class="tticon-attachment-bold"></span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html"><span class="tticon-checks inbox__seen-status"></span>إلى: نورة الزهراني</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">مشكلة في عملية التبرع</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">لقد حاولت التبرع ولكن واجهت مشكلة في عملية الدفع. هل يمكنكم مساعدتي؟</span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked="checked"/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html"><span class="tticon-checks inbox__seen-status inbox__seen-status--seen"></span>إلى: فاطمة العتيبي</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">تفاصيل الحملة الجديدة</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">أود أن أستفسر عن تفاصيل الحملة الجديدة التي تم الإعلان عنها مؤخرًا</span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html"><span class="tticon-checks inbox__seen-status inbox__seen-status--seen"></span>إلى: محمد الغامدي</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">استفسار عن حملة التبرعات</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">هل يمكنكم تزويدي بمعلومات حول كيفية تحديث بيانات حسابي؟ شكرًا لكم!</span></span><span class="inbox__attachments"><span class="text-english">4</span><span class="tticon-attachment-bold"></span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked="checked"/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html"><span class="tticon-checks inbox__seen-status inbox__seen-status--seen"></span>إلى: ريم السبيعي</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">استفسار عن حملة التبرعات</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">مرحبًا، أود معرفة المزيد عن حملة التبرعات القادمة وكيف يمكنني المشاركة.</span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html"><span class="tticon-checks inbox__seen-status inbox__seen-status--seen"></span>إلى: أحمد العنزي</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">مشكلة في حساب المستخدم</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">أحتاج إلى تحديث معلومات الاتصال الخاصة بي، كيف يمكنني القيام بذلك؟</span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<ul class="pagination">
<li class="pagination__item pagination__item--disabled pagination__item--prev"><a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-right"></span></a></li>
<li class="pagination__item pagination__item--active"><a class="pagination__item-link" href="#!">1</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">2</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">3</a></li>
<li class="pagination__item"><span class="pagination__item-dots">...</span></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">12</a></li>
<li class="pagination__item pagination__item--next"><a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-left"></span></a></li>
</ul>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24" fill="var(--tt-text-loud)" xmlns="http://www.w3.org/2000/svg">
<path d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z"/>
<path opacity="0.4" d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z"/>
</svg>10
</button>
<ul class="dropdown-menu dropdown-start">
<li><a class="dropdown-item active" href="#!">10</a></li>
<li><a class="dropdown-item" href="#!">20</a></li>
<li><a class="dropdown-item" href="#!">30</a></li>
<li><a class="dropdown-item" href="#!">40</a></li>
<li><a class="dropdown-item" href="#!">50</a></li>
</ul>
</div><span>93</span><span class="d-none d-sm-inline">/</span><span class="d-none d-sm-inline">1-10</span>
</div>
</div>
</div></div>
<div class="tab-pane fade" id="pills-draft" role="tabpanel" aria-labelledby="pills-draft-tab" tabindex="0">
<div class="table-wrapper border-0 rounded-0">
<div class="table-header d-flex justify-content-between align-items-center">
<div class="form-check me-3">
<input class="form-check-input" type="checkbox"/>
</div>
<div class="input-group me-auto"><span class="tticon-search input-group-text"></span>
<input class="form-control" type="search" placeholder="بحث داخل صندوق البريد..."/>
</div>
<div class="d-flex gap-2 align-items-center me-3 action-btns">
<button class="btn btn-square btn-sm"><span class="tticon-envelope-dot btn-icon"></span></button>
<button class="btn btn-square btn-sm"><span class="tticon-trash btn-icon"></span></button>
</div>
</div>
<div class="overflow-scrolld">
<table class="table align-middle">
<tbody>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="inbox__item-name d-block text-dark" href="message-page.html"><span class="text-primary">مسودة</span></a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">لا يوجد عنوان</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">مرحبًا، أود معرفة المزيد عن حملة التبرعات القادمة وكيف يمكنني المشاركة.</span></span><span class="inbox__attachments"><span class="text-english">1</span><span class="tticon-attachment-bold"></span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked="checked"/>
</div>
</td>
<td><a class="inbox__item-name d-block text-dark" href="message-page.html"><span class="text-primary">مسودة</span></a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">لا يوجد عنوان</span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="inbox__item-name text-dark d-block" href="message-page.html"><span>أحمد الشمري, </span><span class="text-primary">مسودة</span></a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-label">الوارد</span><span class="inbox__message-subject"> طلب تحديث بيانات الحساب</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">أحتاج إلى تحديث معلومات الاتصال الخاصة بي، كيف يمكنني القيام بذلك؟</span></span><span class="inbox__attachments"><span class="text-english">1</span><span class="tticon-attachment-bold"></span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="inbox__item-name d-block text-dark" href="message-page.html"><span class="text-primary">مسودة</span></a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="d-inline-block me-2"></span><span class="inbox__message-subject">استفسار عن المساعدة</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">هل يمكنكم توجيهي حول كيفية تقديم طلب للحصول على مساعدة مالية؟</span></span><span class="inbox__attachments"><span class="text-english">2</span><span class="tticon-attachment-bold"></span></span></a></td>
<td><a class="inbox__message-time text-nowrap" href="message-page.html">9:46 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="order-page.html"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>أضف رد</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-right dropdown-icon"></span>إعادة توجيه</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<ul class="pagination">
<li class="pagination__item pagination__item--disabled pagination__item--prev"><a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-right"></span></a></li>
<li class="pagination__item pagination__item--active"><a class="pagination__item-link" href="#!">1</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">2</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">3</a></li>
<li class="pagination__item"><span class="pagination__item-dots">...</span></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">12</a></li>
<li class="pagination__item pagination__item--next"><a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-left"></span></a></li>
</ul>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24" fill="var(--tt-text-loud)" xmlns="http://www.w3.org/2000/svg">
<path d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z"/>
<path opacity="0.4" d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z"/>
</svg>10
</button>
<ul class="dropdown-menu dropdown-start">
<li><a class="dropdown-item active" href="#!">10</a></li>
<li><a class="dropdown-item" href="#!">20</a></li>
<li><a class="dropdown-item" href="#!">30</a></li>
<li><a class="dropdown-item" href="#!">40</a></li>
<li><a class="dropdown-item" href="#!">50</a></li>
</ul>
</div><span>93</span><span class="d-none d-sm-inline">/</span><span class="d-none d-sm-inline">1-10</span>
</div>
</div>
</div></div>
<div class="tab-pane fade" id="pills-scheduled" role="tabpanel" aria-labelledby="pills-scheduled-tab" tabindex="0">
<div class="table-wrapper border-0 rounded-0">
<div class="table-header border-0 d-flex justify-content-between align-items-center">
<div class="form-check me-3">
<input class="form-check-input" type="checkbox"/>
</div>
<div class="input-group me-auto"><span class="tticon-search input-group-text"></span>
<input class="form-control" type="search" placeholder="بحث داخل صندوق البريد..."/>
</div>
<div class="d-flex gap-2 align-items-center me-3 action-btns">
<button class="btn btn-square btn-sm"><span class="tticon-envelope-dot btn-icon"></span></button>
<hr/>
<button class="btn btn-square btn-sm"><span class="tticon-trash btn-icon"></span></button>
<button class="btn btn-square btn-sm ms-3"><span class="tticon-refresh btn-icon"></span></button>
</div>
</div>
<div class="table-alert table-alert-warning"> <span class="tticon-envelope-clock table-alert-icon"> </span><span class="table-alert-text">سيتم إرسال الرسائل المجدولة في الوقت المحدد لها.</span></div>
<div class="overflow-scrolld">
<table class="table align-middle">
<tbody>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html">إلى: فاطمة العتيبي</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">استفسار عن حملة التبرعات</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">أود أن أستفسر عن تفاصيل الحملة الجديدة التي تم الإعلان عنها مؤخرًا</span></span></a></td>
<td><a class="inbox__message-time text-nowrap text-warning" href="message-page.html">4:00 AM</a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-clock-dashed-fill dropdown-icon"></span>جدولة</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked="checked"/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html">إلى: يوسف الحربي</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">استفسار عن حملة التبرعات</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">واجهت صعوبة في إكمال عملية التبرع بسبب مشكلة تقنية. أود إبلاغكم بذلك</span></span></a></td>
<td><a class="inbox__message-time text-nowrap text-warning" href="message-page.html"><span><span>19 </span><span class="text-arabic"> مارس</span></span></a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-clock-dashed-fill dropdown-icon"></span>جدولة</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
<tr class="inbox__message-item">
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""/>
</div>
</td>
<td><a class="text-dark inbox__item-name" href="message-page.html">إلى: يوسف الحربي</a></td>
<td><a href="message-page.html"><span class="d-inline-block me-2"><span class="inbox__message-subject">استفسار عن حملة التبرعات</span><span class="inbox__message-subject d-none d-sm-inline"> - </span><span class="text-subdued d-none d-sm-inline">واجهت صعوبة في إكمال عملية التبرع بسبب مشكلة تقنية. أود إبلاغكم بذلك</span></span></a></td>
<td><a class="inbox__message-time text-nowrap text-warning" href="message-page.html"><span><span>19 </span><span class="text-arabic"> مارس</span></span></a></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-square dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-dots-horizontal-bold btn-icon"></span></button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-clock-dashed-fill dropdown-icon"></span>جدولة</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-envelope-dot dropdown-icon"></span>علامة غير مقروء</a></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-trash dropdown-icon"></span>حذف / إزالة</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-footer">
<ul class="pagination">
<li class="pagination__item pagination__item--disabled pagination__item--prev"><a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-right"></span></a></li>
<li class="pagination__item pagination__item--active"><a class="pagination__item-link" href="#!">1</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">2</a></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">3</a></li>
<li class="pagination__item"><span class="pagination__item-dots">...</span></li>
<li class="pagination__item"><a class="pagination__item-link" href="#!">12</a></li>
<li class="pagination__item pagination__item--next"><a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-left"></span></a></li>
</ul>
<div class="end-area">
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="dropdown-img" width="24" height="24" viewBox="0 0 24 24" fill="var(--tt-text-loud)" xmlns="http://www.w3.org/2000/svg">
<path d="M10.306 2.55301L6.29113 7.314C5.61613 8.114 6.18913 9.33304 7.23913 9.33304H15.7611C16.8111 9.33304 17.3831 8.114 16.7091 7.314L12.6942 2.55301C12.0712 1.81501 10.929 1.81501 10.306 2.55301Z"/>
<path opacity="0.4" d="M12.694 21.447L16.7089 16.686C17.3839 15.886 16.8109 14.667 15.7609 14.667H7.23893C6.18893 14.667 5.61693 15.886 6.29093 16.686L10.3058 21.447C10.9288 22.185 12.071 22.185 12.694 21.447Z"/>
</svg>10
</button>
<ul class="dropdown-menu dropdown-start">
<li><a class="dropdown-item active" href="#!">10</a></li>
<li><a class="dropdown-item" href="#!">20</a></li>
<li><a class="dropdown-item" href="#!">30</a></li>
<li><a class="dropdown-item" href="#!">40</a></li>
<li><a class="dropdown-item" href="#!">50</a></li>
</ul>
</div><span>93</span><span class="d-none d-sm-inline">/</span><span class="d-none d-sm-inline">1-10</span>
</div>
</div>
</div></div>
</div>
</div>