📝
Add Service Page
organizes incoming, sent, and archived messages, providing an efficient way to manage communications.
View Mode
HTML
<div class="page-head mb-0">
<h1 class="page-title">خدمة جديدة</h1>
<p class="page-desc">املء الحقول أدناه لانشاء خدمة جديدة.</p>
</div>
<hr class="my-4 my-lg-5"/>
<div class="row g-4">
<div class="col-xl-3 col-xxl-4">
<h6 class="mb-0">الأساسيات</h6>
<p class="text-body-xs mb-0">المعلومات الأساسية حول الخدمة.</p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-4">
<div class="col-sm-6">
<label class="form-label">اسم الخدمة <span class="text-danger">*</span></label>
<input class="form-control" type="text" placeholder="مثال: “خدمة استشارات الأعمال”"/>
</div>
<div class="col-sm-6">
<label class="form-label">وصف الخدمة <span class="text-danger">*</span></label>
<input class="form-control" type="text" placeholder="مثال: “استشارات لدعم ونمو أعمالك وتحقيق أهدافك...”"/>
</div>
<div class="col-sm-6">
<label class="form-label">مدة التنفيذ <span class="text-danger">*</span></label>
<input class="form-control text-english" type="text" placeholder="0"/>
</div>
<div class="col-sm-6">
<label class="form-label">التنفيذ حسب <span class="text-danger">*</span></label>
<div class="form-radio-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="duration" id="year"/>
<label class="form-check-label" for="year">عام</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="duration" id="month"/>
<label class="form-check-label" for="month">شهر</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="duration" id="day" checked="checked"/>
<label class="form-check-label" for="day">يوم</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="duration" id="hour"/>
<label class="form-check-label" for="hour">ساعة</label>
</div>
</div>
</div>
<div class="col-12">
<label class="form-label">الفئة المستفيدة <span class="text-danger">*</span></label>
<select class="js-choices" aria-label="Default select example" dir="rtl" multiple="multiple" data-placeholder="حدد من القائمة..">
<option value="1" selected="selected">ملحقات</option>
<option value="2">التقنية</option>
<option value="3">الجمال</option>
</select>
</div>
</div>
</div>
</div>
<hr class="my-4 my-lg-5"/>
<div class="row g-4">
<div class="col-xl-3 col-xxl-4">
<h6 class="mb-0">إعدادات الظهور</h6>
<p class="text-body-xs mb-0">حدد الخيارات المراد اظهارها او تفعيلها.</p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-2">
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="service-setting-01"/>
<label class="form-check-label" for="service-setting-01">عرض في الصفحة الرئيسية </label>
</div>
</div>
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="service-setting-02"/>
<label class="form-check-label" for="service-setting-02">الخطوات في صفحة الخدمة</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="service-setting-03" checked="checked"/>
<label class="form-check-label" for="service-setting-03">رسوم مالية مقابل الخدمة؟</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="service-setting-04"/>
<label class="form-check-label" for="service-setting-04">شروط الحصول علي الخدمة في صفحة الخدمة</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="service-setting-05" checked="checked"/>
<label class="form-check-label" for="service-setting-05">تفعل حالة الخدمة</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="service-setting-06"/>
<label class="form-check-label" for="service-setting-06">الفئات المستفيدة من الخدمة في صفحة تفاصيل الخدمة</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="service-setting-07"/>
<label class="form-check-label" for="service-setting-07">إرفاق العنوان؟</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="service-setting-08" checked="checked"/>
<label class="form-check-label" for="service-setting-08">مدة التنفيذ في صفحة تفاصيل الخدمة</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="service-setting-09"/>
<label class="form-check-label" for="service-setting-09">المستندات المطلوبة في صفحة الخدمة</label>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4 my-lg-5"/>
<div class="row g-4">
<div class="col-xl-3 col-xxl-4">
<h6 class="mb-0">المستندات للمستفيد</h6>
<p class="text-body-xs mb-0"><span class="d-block">مستندات للمستفيد عند التقديم على خدمة.</span><span class="d-block">بالامكان السحب والافلات لترتيب مستندات العمل.</span></p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-2">
<div class="col-sm-12">
<button class="btn btn-white mb-3" type="button" data-bs-toggle="modal" data-bs-target="#new-unit-modal"><span class="tticon-plus-bold btn-icon"> </span>إنشاء وحدة جديدة</button>
<div class="alert alert-warning mb-3">أضف المستندات المطلوبة من المستفيد، إما في قسم واحد أو مقسمة حسب النوع (مثل: المعلومات الشخصية وبيانات التواصل)، مع التأكد من وجود مستند واحد على الأقل. </div>
<div class="accordion form-accordion js-sortable-items" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne"><span class="tticon-dots-six-vertical-bold drag-icon js-sort-handle"></span><span class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="tticon-chevron-sm-down chevron-icon"></span><span>الخدمات الرقمية</span></span><span class="action-btns">
<button class="btn btn-sm btn-square" data-bs-toggle="modal" data-bs-target="#edit-unit-modal"><span class="tticon-pen btn-icon"></span></button>
<hr/>
<button class="btn btn-sm btn-square"><span class="tticon-trash btn-icon"></span></button></span></h2>
<div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="user-doc-item mb-3">
<div class="doc-options">
<select class="js-choices-no-search" aria-label="" dir="rtl">
<option disabled="disabled">اختر نوع الحقل..</option>
<option value="1" selected="selected">حقل نصي</option>
<option value="2">اختيار مفرد</option>
<option value="3">اختيار متعدد</option>
<option value="4">رفع ملف</option>
</select>
<input class="form-control" type="text" placeholder="عنوان الحقل" value="نوع الخدمة"/>
<div class="form-radio-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="name1" id="id1" checked="checked"/>
<label class="form-check-label" for="id1">الزامي</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="name1" id="id2"/>
<label class="form-check-label" for="id2">اختياري</label>
</div>
</div>
<button class="btn btn-sm btn-square"><span class="tticon-trash btn-icon"></span></button>
</div>
</div>
<div class="user-doc-item mb-3">
<div class="doc-options">
<select class="js-choices-no-search" aria-label="" dir="rtl">
<option disabled="disabled">اختر نوع الحقل..</option>
<option value="1">حقل نصي</option>
<option value="2">اختيار مفرد</option>
<option value="3" selected="selected">اختيار متعدد</option>
<option value="4">رفع ملف</option>
</select>
<input class="form-control" type="text" placeholder="عنوان الحقل" value="نوع الخدمة"/>
<div class="form-radio-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="name2" id="id3"/>
<label class="form-check-label" for="id3">الزامي</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="name2" id="id4" checked="checked"/>
<label class="form-check-label" for="id4">اختياري</label>
</div>
</div>
<button class="btn btn-sm btn-square"><span class="tticon-trash btn-icon"></span></button>
</div>
<div class="doc-multiple-options mt-3">
<div class="row g-3">
<div class="col-12"> <span class="lined-title">املء حقول الاختيار</span></div>
<div class="col-sm-6">
<div class="input-group-end">
<input class="form-control" type="text" placeholder="حقل الاختيار (1)" value="خدمة رقمية"/>
<button class="input-hidden-button"><span class="tticon-trash"></span></button>
</div>
</div>
<div class="col-sm-6">
<div class="input-group-end">
<input class="form-control" type="text" placeholder="حقل الاختيار (2)"/>
<button class="input-hidden-button"><span class="tticon-trash"></span></button>
</div>
</div>
<div class="col-sm-6">
<div class="input-group-end">
<input class="form-control" type="text" placeholder="حقل الاختيار (3)"/>
<button class="input-hidden-button"><span class="tticon-trash"></span></button>
</div>
</div>
<div class="col-12">
<button class="btn text-primary p-0"><span class="tticon-plus-bold btn-icon"> </span>اختيار جديد</button>
</div>
</div>
</div>
</div><span class="lined-title mb-3">بداية المستند الجديد</span>
<button class="btn bg-lg text-primary bg-light w-100 justify-content-start"><span class="tticon-plus-bold btn-icon"> </span>مستند جديد</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo"><span class="tticon-dots-six-vertical-bold drag-icon js-sort-handle"></span><span class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="tticon-chevron-sm-down chevron-icon"></span><span>الخدمات الرقمية</span></span><span class="action-btns">
<button class="btn btn-sm btn-square" data-bs-toggle="modal" data-bs-target="#edit-unit-modal"><span class="tticon-pen btn-icon"></span></button>
<hr/>
<button class="btn btn-sm btn-square"><span class="tticon-trash btn-icon"></span></button></span></h2>
<div class="accordion-collapse collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body"><span class="lined-title mb-3">بداية المستند الجديد</span>
<button class="btn bg-lg text-primary bg-light w-100 justify-content-start"><span class="tticon-plus-bold btn-icon"> </span>مستند جديد</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4 my-lg-5"/>
<div class="row g-4">
<div class="col-xl-3 col-xxl-4">
<h6 class="mb-0">شروط الخدمة</h6>
<p class="text-body-xs mb-0">حدد الخيارات المراد اظهارها او تفعيلها.</p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-2">
<div class="col-12">
<textarea class="form-control js-tinymce" placeholder="ابدأ بكتابة محتوى الصفحة هنا…" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
<hr class="my-4 my-lg-5"/>
<div class="row g-4">
<div class="col-xl-3 col-xxl-4">
<h6 class="mb-0">مسار العمل</h6>
<p class="text-body-xs mb-0"><span class="d-block">لإدارة ومعالجة طلبات المستفيدين.</span><span class="d-block">بالامكان السحب والافلات لترتيب مسار العمل.</span></p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-2">
<div class="col-sm-12">
<button class="btn btn-white mb-3" type="button" data-bs-toggle="modal" data-bs-target="#new-step-modal"><span class="tticon-plus-bold btn-icon"> </span>خطوة جديدة</button>
<div class="alert alert-warning mb-3">مسار العمل هو عملية تتبع طلبات المستفيدين، حيث يتم تمرير الطلبات عبر مراحل لمعالجتها داخلياً. تبدأ العملية من موظف الاستقبال، وفي حال الموافقة، يتم تحويل الطلب للمرحلة التالية كالمحاسب، وهكذا حتى تُستكمل جميع خطوات المعالجة.</div>
<div class="accordion form-accordion js-sortable-items" id="accordionExample2">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne2"><span class="tticon-dots-six-vertical-bold drag-icon js-sort-handle"></span><span class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2"><span class="tticon-chevron-sm-down chevron-icon"></span><span><span class="text-english">1. </span><span>مراجعة التحليل</span></span><span class="action-btns">
<button class="btn btn-sm btn-square"><span class="tticon-pen btn-icon"></span></button>
<hr/>
<button class="btn btn-sm btn-square"><span class="tticon-trash btn-icon"></span></button></span></span></h2>
<div class="accordion-collapse collapse show" id="collapseOne2" aria-labelledby="headingOne2" data-bs-parent="#accordionExample2">
<div class="accordion-body">
<div class="row g-2">
<div class="col-12">
<select class="js-choices-no-search" aria-label="" dir="rtl">
<option disabled="disabled" selected="selected">اختر القسم / المسمى الوظيفي</option>
<option value="1">الخيار الأول</option>
<option value="2">الخيار الثاني</option>
<option value="3">الخيار الثالث</option>
<option value="4">الخيار الرابع</option>
</select>
</div>
<div class="col-12">
<select class="js-choices-no-search" aria-label="" dir="rtl">
<option disabled="disabled" selected="selected">اختر الموظفين..</option>
<option value="1">الخيار الأول</option>
<option value="2">الخيار الثاني</option>
<option value="3">الخيار الثالث</option>
<option value="4">الخيار الرابع</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo2"><span class="tticon-dots-six-vertical-bold drag-icon js-sort-handle"></span><span class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2"><span class="tticon-chevron-sm-down chevron-icon"></span><span><span class="text-english">2. </span><span>اعتماد التحليل</span></span><span class="action-btns">
<button class="btn btn-sm btn-square"><span class="tticon-pen btn-icon"></span></button>
<hr/>
<button class="btn btn-sm btn-square"><span class="tticon-trash btn-icon"></span></button></span></span></h2>
<div class="accordion-collapse collapse" id="collapseTwo2" aria-labelledby="headingTwo2" data-bs-parent="#accordionExample2">
<div class="accordion-body">
<div class="row g-2">
<div class="col-12">
<select class="js-choices-no-search" aria-label="" dir="rtl">
<option disabled="disabled" selected="selected">اختر القسم / المسمى الوظيفي</option>
<option value="1">الخيار الأول</option>
<option value="2">الخيار الثاني</option>
<option value="3">الخيار الثالث</option>
<option value="4">الخيار الرابع</option>
</select>
</div>
<div class="col-12">
<select class="js-choices-no-search" aria-label="" dir="rtl">
<option disabled="disabled" selected="selected">اختر الموظفين..</option>
<option value="1">الخيار الأول</option>
<option value="2">الخيار الثاني</option>
<option value="3">الخيار الثالث</option>
<option value="4">الخيار الرابع</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4 my-lg-5"/>
<div class="d-flex align-items-center justify-content-between">
<button class="btn btn-primary">إضافة الخدمة</button>
<button class="btn btn-white">إلغاء</button>
</div>