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

الواجهات الكاملة · وكالة عقارية

إدارة عملاء

جدول عريض ولوحة تفاصيل بجانبه — الصفّ المختار يفتح اللوحة لا صفحة جديدة

افتحها في لسان جديد ↗
<div class="iface ifr">
  <header class="if-top">
    <span class="brand" data-ar="سُكنى" data-en="Sukna">سُكنى</span>
    <nav>
      <a href="#" aria-current="page"><span data-ar="العملاء" data-en="Clients">العملاء</span></a>
      <a href="#"><span data-ar="المعروضات" data-en="Listings">المعروضات</span></a>
      <a href="#"><span data-ar="الجولات" data-en="Viewings">الجولات</span></a>
    </nav>
    <span class="grow"></span>
    <button class="if-btn" data-ar="عميل جديد" data-en="New client">عميل جديد</button>
  </header>

  <div class="if-body">
    <div class="if-h">
      <h1 data-ar="العملاء" data-en="Clients">العملاء</h1>
      <p><span class="num">124</span> <span data-ar="سجلًّا" data-en="records">سجلًّا</span></p>
    </div>

    <div class="ifr-cols">
      <div class="if-card ifr-table">
        <table>
          <thead><tr>
            <th data-ar="الاسم" data-en="Name">الاسم</th>
            <th data-ar="المدينة" data-en="City">المدينة</th>
            <th data-ar="الاهتمام" data-en="Interest">الاهتمام</th>
            <th data-ar="المرحلة" data-en="Stage">المرحلة</th>
          </tr></thead>
          <tbody>
            <tr class="on"><td>سلمى</td><td>عمّان</td><td data-ar="شقّة 3 غرف" data-en="3-bed flat">شقّة 3 غرف</td>
              <td><span class="pill hot" data-ar="جولة محجوزة" data-en="Viewing booked">جولة محجوزة</span></td></tr>
            <tr><td>أدهم</td><td>إربد</td><td data-ar="أرض سكنية" data-en="Residential plot">أرض سكنية</td>
              <td><span class="pill" data-ar="تواصل أوّل" data-en="First contact">تواصل أوّل</span></td></tr>
            <tr><td>هيا</td><td>الزرقاء</td><td data-ar="مكتب إداري" data-en="Office unit">مكتب إداري</td>
              <td><span class="pill" data-ar="تفاوض" data-en="Negotiating">تفاوض</span></td></tr>
            <tr><td>وليد</td><td>العقبة</td><td data-ar="شاليه" data-en="Chalet">شاليه</td>
              <td><span class="pill done" data-ar="أُغلق" data-en="Closed">أُغلق</span></td></tr>
            <tr><td>رند</td><td>عمّان</td><td data-ar="فيلا دورين" data-en="Two-storey villa">فيلا دورين</td>
              <td><span class="pill" data-ar="تفاوض" data-en="Negotiating">تفاوض</span></td></tr>
          </tbody>
        </table>
      </div>

      <aside class="ifr-panel">
        <div class="if-card">
          <div class="ifr-who"><span class="if-avatar">س</span>
            <div><b>سلمى</b><span data-ar="عميلة منذ مارس 2026" data-en="Client since March 2026">عميلة منذ مارس 2026</span></div></div>
          <dl>
            <div><dt data-ar="الميزانية" data-en="Budget">الميزانية</dt><dd class="num">85,000 – 110,000 د.أ</dd></div>
            <div><dt data-ar="الحيّ المفضّل" data-en="Preferred area">الحيّ المفضّل</dt><dd>عبدون</dd></div>
            <div><dt data-ar="آخر تواصل" data-en="Last contact">آخر تواصل</dt>
              <dd><span class="num">3</span> <span data-ar="أيّام" data-en="days ago">أيّام</span></dd></div>
          </dl>
        </div>
        <div class="if-card">
          <h2 data-ar="الخطوة التالية" data-en="Next step">الخطوة التالية</h2>
          <p data-ar="جولة في وحدتين بعبدون، الأحد 10:00." data-en="Two viewings in Abdoun, Sunday 10:00.">جولة في وحدتين بعبدون، الأحد 10:00.</p>
          <button class="if-btn" data-ar="سجّل مكالمة" data-en="Log a call">سجّل مكالمة</button>
        </div>
      </aside>
    </div>
  </div>
</div>
← إتمام الشراءلوحة تحكّم إدارية →