PenTool UIتصفّح المكتبة

الواجهات الكاملة · تطبيق توصيل

لوحة تحليلات

مدى زمني ورسمان متجاوران وثلاث بطاقات — كل رقم فيها محسوب من البيانات لا مكتوب

افتحها في لسان جديد ↗
<div class="iface ifa">
  <header class="if-top">
    <span class="brand" data-ar="وَصَل" data-en="Wasal">وَصَل</span>
    <span class="grow"></span>
    <div class="ifa-range" role="group" aria-label="المدى الزمني">
      <button data-ar="7 أيّام" data-en="7 days">7 أيّام</button>
      <button class="on" data-ar="30 يومًا" data-en="30 days">30 يومًا</button>
      <button data-ar="العام" data-en="Year">العام</button>
    </div>
  </header>

  <div class="if-body">
    <div class="if-h">
      <h1 data-ar="الأداء" data-en="Performance">الأداء</h1>
      <p data-ar="مقارنةً بالثلاثين السابقة" data-en="vs. the previous thirty">مقارنةً بالثلاثين السابقة</p>
    </div>

    <div class="ifa-charts">
      <div class="if-card">
        <div class="if-h"><h2 data-ar="الطلبات اليومية" data-en="Daily orders">الطلبات اليومية</h2>
          <p class="up sig">+18%</p></div>
        <div class="spark" aria-hidden="true">
          <span style="--v:42%"></span><span style="--v:58%"></span><span style="--v:37%"></span>
          <span style="--v:66%"></span><span style="--v:80%"></span><span style="--v:54%"></span>
          <span style="--v:91%"></span><span style="--v:73%"></span><span style="--v:100%"></span>
          <span style="--v:62%"></span><span style="--v:84%"></span><span style="--v:70%"></span>
        </div>
      </div>

      <div class="if-card">
        <div class="if-h"><h2 data-ar="حسب المدينة" data-en="By city">حسب المدينة</h2></div>
        <ul class="ifa-bars">
          <li><span>القاهرة</span><i style="--v:100%"></i><b class="num">4,180</b></li>
          <li><span>عمّان</span><i style="--v:71%"></i><b class="num">2,970</b></li>
          <li><span>الدار البيضاء</span><i style="--v:54%"></i><b class="num">2,260</b></li>
          <li><span>تونس</span><i style="--v:33%"></i><b class="num">1,380</b></li>
        </ul>
      </div>
    </div>

    <div class="ifa-tiles">
      <div class="if-card"><span data-ar="متوسّط زمن التوصيل" data-en="Avg. delivery time">متوسّط زمن التوصيل</span>
        <b class="num">27</b><i data-ar="دقيقة" data-en="min">دقيقة</i></div>
      <div class="if-card"><span data-ar="معدّل الإلغاء" data-en="Cancellation rate">معدّل الإلغاء</span>
        <b class="num">2.4%</b><i class="down sig">−0.6</i></div>
      <div class="if-card"><span data-ar="رضا العملاء" data-en="Customer satisfaction">رضا العملاء</span>
        <b class="num">4.6</b><i data-ar="من 5" data-en="of 5">من 5</i></div>
    </div>
  </div>
</div>
← واجهة متجرحجز موعد →