💼
Service Details 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 align-items-center gap-2">
<div>
<ul class="meta-list mb-1">
<li class="meta-list__item"><span class="tticon-docs icon-18"></span></li>
<li class="meta-list__item">محمد العتيبي</li>
</ul>
<div class="d-sm-flex gap-2 align-items-center">
<h1 class="page-title h4 m-0 text-english">#2486002</h1><span class="status status--warning"> قيد المراجعة</span>
</div>
</div>
<div class="dropdown ms-auto">
<button class="btn btn-primary dropdown-toggle px-sm-4" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-boundary="viewport"><span class="tticon-collapse-horizontal btn-icon icon-20"></span>الإجراءات</button>
<ul class="dropdown-menu dropdown-start">
<li class="dropdown-header"> <span>اختر عملية</span></li>
<li><a class="dropdown-item" href="#!"><span class="tticon-arrow-bend-up-left dropdown-icon"></span>توجيه للموظف السابق</a></li>
<li><a class="dropdown-item" href="#!" data-bs-toggle="modal" data-bs-target="#complete-order-modal"><span class="tticon-refresh-dots dropdown-icon"></span>الحالة مكتمل</a></li>
<li><a class="dropdown-item" href="#!" data-bs-toggle="modal" data-bs-target="#replay-order-modal"><span class="tticon-pen dropdown-icon"></span>توجيه للمستفيد</a></li>
<li><a class="dropdown-item" href="#!" data-bs-toggle="modal" data-bs-target="#archive-order-modal"><span class="tticon-doc-x dropdown-icon"></span>اغلاق وأرشفة</a></li>
</ul>
</div>
</div>
</div>
<div class="order-meta-list mb-4">
<div class="order-service"><span class="service-label">الخدمة</span>
<div class="d-flex align-items-center"><span class="text-dark">خدمة توفير أنظمة منافذ للجمعيات التعاونية</span><span class="tticon-chevron-sm-left text-primary chevron-icon"></span></div>
</div>
<div class="meta-item"> <span class="meta-label">المستفيد</span><span class="d-block text-dark">محمد العتيبي</span></div>
<div class="meta-item"> <span class="meta-label">الميزانية</span><span class="d-block text-dark d-flex align-items-center"><span class="text-english">224 </span><span class="tticon-sar icon-12"></span></span></div>
<div class="meta-item"> <span class="meta-label">التنفيذ</span><span class="d-block text-dark">خلال يومين</span></div>
<div class="meta-item"> <span class="meta-label">الردود</span><span class="d-block text-dark">4 ردود</span></div>
<div class="meta-item"> <span class="meta-label">تاريخ الإنشاء</span><span class="d-block text-dark dir-ltr text-english">24-6-2024 @ 3:42 PM</span></div><a class="btn btn-white btn-square btn-sm rounded-pill edit-button" data-bs-toggle="modal" data-bs-target="#edit-order-modal"><span class="tticon-pen btn-icon"></span></a>
</div>
<div class="border rounded-4 p-4 border mb-4">
<h4 class="widget-title"> <span class="tticon-book title-icon"></span><span>بيانات النموذج</span></h4>
<ul class="list-group">
<li class="list-group-item"><span class="w-50 text-normal">اسم المنظمة</span><span class="w-50 text-muted">شركة التحول التقني</span></li>
<li class="list-group-item"><span class="w-50 text-normal">اسم ممثل الجهة</span><span class="w-50 text-muted">عبدالله الأشمري</span></li>
<li class="list-group-item"><span class="w-50 text-normal">رقم التواصل</span><span class="w-50 text-muted text-english">0533841399</span></li>
<li class="list-group-item"><span class="w-50 text-normal">اسم البنك</span><span class="w-50 text-muted">مصرف الراجحي</span></li>
<li class="list-group-item"><span class="w-50 text-normal">رقم حساب البنك</span><span class="w-50 text-muted text-english">002345678901</span></li>
<li class="list-group-item"><span class="w-50 text-normal">صورة من الايبان الدولي لرقم الحساب</span><span class="w-50 text-muted">
<button class="btn btn-white btn-sm"> <span class="tticon-download btn-icon"> </span>تحميل</button></span></li>
<li class="list-group-item"><span class="w-50 text-normal">عنوان البريد</span><span class="w-50 text-muted text-english">[email protected]</span></li>
<li class="list-group-item"><span class="w-50 text-normal">المنصة المطلوبة</span><span class="w-50 text-muted">رقمن</span></li>
<li class="list-group-item"><span class="w-50 text-normal">هل الاشتراك ساري؟</span><span class="w-50 text-danger">لا, غير ساري</span></li>
</ul>
</div>
<div class="border rounded-4 p-4 border mb-4">
<h4 class="widget-title"> <span class="tticon-user title-icon"></span><span>المستفيد</span></h4>
<ul class="list-group">
<li class="list-group-item"><span class="w-50 text-normal">رقم الجوال</span><span class="w-50 text-muted text-english">0533841399</span></li>
<li class="list-group-item"><span class="w-50 text-normal">عنوان البريد</span><span class="w-50 text-muted text-english">[email protected]</span></li>
<li class="list-group-item"><span class="w-50 text-normal">العنوان</span><span class="w-50 text-muted">جدة، حي الروضة، شارع الأمير سلطان</span></li>
<li class="list-group-item"><span class="w-50 text-normal">الدولة</span><span class="w-50 text-muted">المملكة العربية السعودية</span></li>
</ul>
</div>
<div class="border rounded-4 p-4 border mb-4">
<h4 class="widget-title mb-4"><span class="tticon-receipt-clock title-icon"></span><span>سجل الإجراءات</span></h4>
<div class="action-log">
<div class="action-log__item">
<div class="action-log__item-content"><span class="tticon-arrow-down-dashed-fill action-log__icon action-log__icon--info"></span>
<div class="action-log__statement"><span class="text-dark">استقبل بواسطة</span><span> موظف الاستقبال </span><span class="text-dark">محمد الأحمدي</span><span class="status status--success ms-md-3">المرحلة النشطة</span><span class="status status--warning ms-md-3">معلقة</span></div>
<div class="action-log__time"><span class="text-english">19 </span><span>مارس، </span><span class="text-english">5:14 PM</span></div>
</div>
<p class="action-log__desc">سنقوم بمراجعة البيانات والرد عليك قريبًا.</p>
</div>
<div class="action-log__item">
<div class="action-log__item-content"><span class="tticon-clock-dashed-fill action-log__icon action-log__icon--warning"></span>
<div class="action-log__statement"><span class="text-dark">مراجعة بواسطة</span><span> مدير المنتج </span><span class="text-dark">أسامة خليل</span></div>
<div class="action-log__time"><span class="text-english">19 </span><span>مارس، </span><span class="text-english">5:14 PM</span></div>
</div>
</div>
<div class="action-log__item">
<div class="action-log__item-content"><span class="tticon-arrow-u-up-left-fill action-log__icon action-log__icon--primary"></span>
<div class="action-log__statement"><span class="text-dark">التوجيه بواسطة</span><span> مدير إدارة المنتجات </span><span class="text-dark">فهد الشبيب </span><span class="status status--info ms-md-3">قيد التنفيذ</span></div>
<div class="action-log__time"><span class="text-english">19 </span><span>مارس، </span><span class="text-english">5:14 PM</span></div>
</div>
</div>
<div class="action-log__item">
<div class="action-log__item-content"><span class="tticon-checks action-log__icon action-log__icon--success"></span>
<div class="action-log__statement"><span class="text-dark">اعتماد الصرف</span><span> مدير الإدارة المالية </span><span class="text-dark">جميل محسن </span></div>
<div class="action-log__time"><span class="text-english">19 </span><span>يوليو، </span><span class="text-english">5:14 PM</span></div>
</div>
</div>
</div>
</div>
<div class="border rounded-4 p-4 border">
<h4 class="widget-title mb-4"><span class="tticon-chat title-icon"></span><span>الردود</span></h4>
<div class="comments-list">
<div class="comments-list__item"> <span class="tticon-user avatar-icon comments-list__avatar"></span>
<div class="comments-list__content">
<div class="comments-list__header">
<div class="comments-list__meta">
<h6 class="comments-list__author">محمد العتيبي</h6><span class="comments-list__date"> <span class="text-english">19 </span><span>مارس، </span><span class="text-english">5:14 PM</span></span>
</div>
<div class="comments-list__stage text-info"><span class="tticon-arrow-down-dashed-fill"></span><span>مرحلة الاستقبال</span></div>
</div>
<div class="comments-list__body">
<p>جارٍ مراجعة المعلومات، وسنوافيك بالمستجدات قريبًا.</p>
</div>
</div>
</div>
<div class="comments-list__item"> <span class="tticon-user avatar-icon comments-list__avatar"></span>
<div class="comments-list__content">
<div class="comments-list__header">
<div class="comments-list__meta">
<h6 class="comments-list__author">عبدالله العنزي</h6><span class="comments-list__date"> <span class="text-english">19 </span><span>مارس، </span><span class="text-english">5:14 PM</span></span>
</div>
<div class="comments-list__stage text-warning"><span class="tticon-clock-dashed-fill"></span><span>مرحلة التحقق</span></div>
</div>
<div class="comments-list__body">
<p>سنقوم بالاطلاع على البيانات والتأكد منها، وسيتم الرد عليك في أقرب وقت ممكن.</p>
</div>
</div>
</div>
</div>
</div>