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

الواجهات الكاملة · منصّة لوجستية

لوحة تحكّم إدارية

شريط جانبي وبطاقات مؤشّرات وجدول عمليات — تخطيط لوحة تعمل، لا صورة عنها

افتحها في لسان جديد ↗
<div class="iface ifd">
  <div class="ifd-wrap">
    <aside class="ifd-side">
      <div class="brand" data-ar="مسار" data-en="Masar">مسار</div>
      <nav>
        <a href="#" aria-current="page"><span data-ar="النظرة العامّة" data-en="Overview">النظرة العامّة</span></a>
        <a href="#"><span data-ar="الشحنات" data-en="Shipments">الشحنات</span></a>
        <a href="#"><span data-ar="الأسطول" data-en="Fleet">الأسطول</span></a>
        <a href="#"><span data-ar="العملاء" data-en="Customers">العملاء</span></a>
        <a href="#"><span data-ar="التقارير" data-en="Reports">التقارير</span></a>
      </nav>
      <div class="ifd-note">
        <b data-ar="خطّة الفريق" data-en="Team plan">خطّة الفريق</b>
        <span data-ar="7 من 10 مقاعد" data-en="7 of 10 seats">7 من 10 مقاعد</span>
      </div>
    </aside>

    <main class="ifd-main">
      <header class="if-top">
        <span class="brand" data-ar="النظرة العامّة" data-en="Overview">النظرة العامّة</span>
        <span class="grow"></span>
        <button class="if-btn ghost" data-ar="تصدير" data-en="Export">تصدير</button>
        <button class="if-btn" data-ar="شحنة جديدة" data-en="New shipment">شحنة جديدة</button>
        <span class="if-avatar">ك</span>
      </header>

      <div class="if-body">
        <div class="ifd-tiles">
          <div class="if-card"><span data-ar="شحنات اليوم" data-en="Today’s shipments">شحنات اليوم</span>
            <b class="num">148</b><i class="up sig">+12%</i></div>
          <div class="if-card"><span data-ar="قيد التوصيل" data-en="In transit">قيد التوصيل</span>
            <b class="num">63</b><i class="num">—</i></div>
          <div class="if-card"><span data-ar="متأخّرة" data-en="Delayed">متأخّرة</span>
            <b class="num">4</b><i class="down sig">−2</i></div>
          <div class="if-card"><span data-ar="متوسّط التسليم" data-en="Avg. delivery">متوسّط التسليم</span>
            <b class="num">1.9</b><i data-ar="يوم" data-en="days">يوم</i></div>
        </div>

        <div class="if-card ifd-chart">
          <div class="if-h"><h2 data-ar="الحجم الأسبوعي" data-en="Weekly volume">الحجم الأسبوعي</h2>
            <p data-ar="آخر سبعة أيّام" data-en="Last seven days">آخر سبعة أيّام</p></div>
          <div class="bars">
            <span style="--v:52%"></span><span style="--v:71%"></span><span style="--v:44%"></span>
            <span style="--v:88%"></span><span style="--v:63%"></span><span style="--v:96%"></span>
            <span style="--v:38%"></span>
          </div>
        </div>

        <div class="if-card">
          <div class="if-h"><h2 data-ar="آخر العمليات" data-en="Recent operations">آخر العمليات</h2></div>
          <table class="ifd-table">
            <thead><tr>
              <th data-ar="الرقم" data-en="Ref">الرقم</th>
              <th data-ar="الوجهة" data-en="Destination">الوجهة</th>
              <th data-ar="المسؤول" data-en="Owner">المسؤول</th>
              <th data-ar="الحالة" data-en="Status">الحالة</th>
            </tr></thead>
            <tbody>
              <tr><td class="num">SH-4821</td><td>عمّان — عبدون</td><td>كرم</td>
                  <td><span class="pill ok" data-ar="سُلّمت" data-en="Delivered">سُلّمت</span></td></tr>
              <tr><td class="num">SH-4820</td><td>الدوحة — الخليج الغربي</td><td>لمى</td>
                  <td><span class="pill" data-ar="قيد التوصيل" data-en="In transit">قيد التوصيل</span></td></tr>
              <tr><td class="num">SH-4819</td><td>القاهرة — المعادي</td><td>ياسين</td>
                  <td><span class="pill" data-ar="قيد التوصيل" data-en="In transit">قيد التوصيل</span></td></tr>
              <tr><td class="num">SH-4818</td><td>مسقط — القرم</td><td>رند</td>
                  <td><span class="pill late" data-ar="متأخّرة" data-en="Delayed">متأخّرة</span></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>
</div>
← إدارة عملاءصفحة توثيق →