جداول
  1. home داشبورد
  2. اپ
  3. جداول
جدول داده‌ها
شناسه نام سن شهر کشور
۱ جان دو ۲۵ نیویورک ایالات متحده آمریکا
۲ جین اسمیت ۳۰ لندن بریتانیا
۳ ساموئل گرین ۲۲ تورنتو کانادا
۴ امیلی براون ۲۷ سیدنی استرالیا
۵ مایکل جانسون ۲۹ آوکلند نیوزیلند
۶ سارا وایت ۲۴ شیکاگو ایالات متحده آمریکا
۷ ویلیام بلک ۳۵ ونکوور کانادا
۸ اولیویا گرین ۳۱ منچستر بریتانیا
۹ دیوید براون ۲۸ ملبورن استرالیا
۱۰ امی بلو ۲۶ ولینگتون نیوزیلند
محصولات پرفروش
محصول قیمت سفارش دهید سهام مبلغ
تصویر محصول
مچ بند هوشمند ۸ دی 1404
۳1,000 تومان ۷۵ ۷۵۰ 1,000 تومان
تصویر محصول
هدفون ۷ دی 1404
۴1,000 تومان ۲۵ ۸۲۵ عدد ۱1,000 تومان
تصویر محصول
آیفون ۱۵ پلاس ۶ دی 1404
۹1,000 تومان ۵۵ موجودی موجود نیست ۵1,000 تومان
تصویر محصول
بلندگوی بلوتوث ۵ دی 1404
۵1,000 تومان ۴۰ ۵۳۵ ۲1,000 تومان
تصویر محصول
ایربادهای نسل دوم ۴ دی 1404
۷1,000 تومان ۵۶ ۴۶۰ ۴1,000 تومان

نمایش ۵ از ۳۶ نتیجه

  1. 0 chevron_left
  2. 1
  3. 2
  4. 3
  5. 4
  6. 0 chevron_right 

<div class="table-responsive overflow-x-auto">
<table class="w-full">
    <thead class="text-black dark:text-white">
        <tr>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] bg-gray-50 dark:bg-[#15203c] whitespace-nowrap ltr:first:rounded-tl-md ltr:last:rounded-tr-md rtl:first:rounded-tr-md rtl:last:rounded-tl-md">
                Product
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] bg-gray-50 dark:bg-[#15203c] whitespace-nowrap ltr:first:rounded-tl-md ltr:last:rounded-tr-md rtl:first:rounded-tr-md rtl:last:rounded-tl-md">
                Price
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] bg-gray-50 dark:bg-[#15203c] whitespace-nowrap ltr:first:rounded-tl-md ltr:last:rounded-tr-md rtl:first:rounded-tr-md rtl:last:rounded-tl-md">
                Order
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] bg-gray-50 dark:bg-[#15203c] whitespace-nowrap ltr:first:rounded-tl-md ltr:last:rounded-tr-md rtl:first:rounded-tr-md rtl:last:rounded-tl-md">
                Stock
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] bg-gray-50 dark:bg-[#15203c] whitespace-nowrap ltr:first:rounded-tr-md ltr:last:rounded-tr-md rtl:first:rounded-tr-md rtl:last:rounded-tl-md">
                Amount
            </th>
        </tr>
    </thead>
    <tbody class="text-black dark:text-white">
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <div class="flex items-center">
                    <div class="rounded-md w-[40px]">
                        <img src="assets/images/products/product1.jpg" class="inline-block rounded-md" alt="product-image">
                    </div>
                    <div class="ltr:ml-[12px] rtl:mr-[12px]">
                        <a href="product-details.html" class="font-medium inline-block text-[14px] md:text-[15px] transition-all hover:text-primary-500">
                            Smart Band
                        </a>
                        <span class="block text-sm text-gray-500 dark:text-gray-400">
                            08 Jun 2025
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $35.00
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                75
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                750
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $2,625
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <div class="flex items-center">
                    <div class="rounded-md w-[40px]">
                        <img src="assets/images/products/product2.jpg" class="inline-block rounded-md" alt="product-image">
                    </div>
                    <div class="ltr:ml-[12px] rtl:mr-[12px]">
                        <a href="product-details.html" class="font-medium inline-block text-[14px] md:text-[15px] transition-all hover:text-primary-500">
                            Headphone
                        </a>
                        <span class="block text-sm text-gray-500 dark:text-gray-400">
                            07 Jun 2025
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $49.00
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                25
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                825
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $1,225
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <div class="flex items-center">
                    <div class="rounded-md w-[40px]">
                        <img src="assets/images/products/product3.jpg" class="inline-block rounded-md" alt="product-image">
                    </div>
                    <div class="ltr:ml-[12px] rtl:mr-[12px]">
                        <a href="product-details.html" class="font-medium inline-block text-[14px] md:text-[15px] transition-all hover:text-primary-500">
                            iPhone 15 Plus
                        </a>
                        <span class="block text-sm text-gray-500 dark:text-gray-400">
                            06 Jun 2025
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $99.00
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                55
            </td>
            <td class="text-danger-400 ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                Stock Out
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $5,445
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <div class="flex items-center">
                    <div class="rounded-md w-[40px]">
                        <img src="assets/images/products/product4.jpg" class="inline-block rounded-md" alt="product-image">
                    </div>
                    <div class="ltr:ml-[12px] rtl:mr-[12px]">
                        <a href="product-details.html" class="font-medium inline-block text-[14px] md:text-[15px] transition-all hover:text-primary-500">
                            Bluetooth Speaker
                        </a>
                        <span class="block text-sm text-gray-500 dark:text-gray-400">
                            05 Jun 2025
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $59.00
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                40
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                535
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $2,360
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <div class="flex items-center">
                    <div class="rounded-md w-[40px]">
                        <img src="assets/images/products/product5.jpg" class="inline-block rounded-md" alt="product-image">
                    </div>
                    <div class="ltr:ml-[12px] rtl:mr-[12px]">
                        <a href="product-details.html" class="font-medium inline-block text-[14px] md:text-[15px] transition-all hover:text-primary-500">
                            Airbuds 2nd Gen
                        </a>
                        <span class="block text-sm text-gray-500 dark:text-gray-400">
                            04 Jun 2025
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $79.00
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                56
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                460
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $4,424
            </td>
        </tr>
    </tbody>
</table>
</div>
<div class="px-[20px] py-[12px] md:py-[14px] rounded-b-md border-l border-r border-b border-gray-100 dark:border-[#172036] sm:flex sm:items-center justify-between">
<p class="mb-0 text-sm">
    نمایش 10 از 36 نتیجه
</p>
<ol class="mt-[10px] sm:mt-0">
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            <span class="opacity-0">
                0
            </span>
            <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                chevron_left
            </i>
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-primary-500 bg-primary-500 text-white">
            1
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            2
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            3
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            4
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            <span class="opacity-0">
                0
            </span>
            <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                chevron_right
            </i>
        </a>
    </li>
</ol>
</div>
سفارشات اخیر
شناسه سفارش مشتری ایجاد شده مجموع وضعیت
#ژانویه-۲۳۴۵
تصویر محصول
سارا جانسون
۱۲ دی 1404 ۱1,000 تومان ارسال شد
#ژانویه-۱۳۲۳
تصویر محصول
مایکل اسمیت
۱۱ دی 1404 ۶1,000 تومان تأیید شد
#دسامبر-۱۲۳۴
تصویر محصول
امیلی براون
۱۰ دی 1404 ۱۲1,000 تومان در حال بررسی
#دسامبر-۳۵۶۷
تصویر محصول
جیسون لی
۹ دی 1404 ۷1,000 تومان ارسال شد
#دسامبر-۱۰۹۸
تصویر محصول
اشلی دیویس
۸ دی 1404 ۴1,000 تومان رد شد

نمایش ۵ از ۳۶ نتیجه

  1. 0 chevron_left
  2. 1
  3. 2
  4. 3
  5. 4
  6. 0 chevron_right 

<div class="table-responsive overflow-x-auto">
<table class="w-full">
    <thead class="text-black dark:text-white">
        <tr>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] bg-gray-50 dark:bg-[#15203c] whitespace-nowrap first:rounded-tl-md">
                Order ID
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] bg-gray-50 dark:bg-[#15203c] whitespace-nowrap first:rounded-tl-md">
                Customer
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] bg-gray-50 dark:bg-[#15203c] whitespace-nowrap first:rounded-tl-md">
                Created
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] bg-gray-50 dark:bg-[#15203c] whitespace-nowrap first:rounded-tl-md">
                Total
            </th>
            <th class="font-medium text-left px-[20px] py-[11px] bg-gray-50 dark:bg-[#15203c] whitespace-nowrap first:rounded-tr-md">
                Status
            </th>
        </tr>
    </thead>
    <tbody class="text-black dark:text-white">
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                #JAN-2345
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <div class="flex items-center">
                    <div class="rounded-md w-[40px]">
                        <img src="assets/images/users/user1.jpg" class="inline-block rounded-md" alt="product-image">
                    </div>
                    <div class="ltr:ml-[12px] rtl:mr-[12px]">
                        <span class="block font-medium">
                            Sarah Johnson
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                12 Jun 2025
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $10,490
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <span class="px-[8px] py-[3px] inline-block bg-success-100 dark:bg-[#15203c] text-success-600 rounded-sm font-medium text-xs">
                    Shipped
                </span>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                #JAN-1323
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <div class="flex items-center">
                    <div class="rounded-md w-[40px]">
                        <img src="assets/images/users/user2.jpg" class="inline-block rounded-md" alt="product-image">
                    </div>
                    <div class="ltr:ml-[12px] rtl:mr-[12px]">
                        <span class="block font-medium">
                            Michael Smith
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                11 Jun 2025
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $6,575
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <span class="px-[8px] py-[3px] inline-block bg-primary-50 dark:bg-[#15203c] text-primary-500 rounded-sm font-medium text-xs">
                    Confirmed
                </span>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                #DEC-1234
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <div class="flex items-center">
                    <div class="rounded-md w-[40px]">
                        <img src="assets/images/users/user3.jpg" class="inline-block rounded-md" alt="product-image">
                    </div>
                    <div class="ltr:ml-[12px] rtl:mr-[12px]">
                        <span class="block font-medium">
                            Emily Brown
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                10 Jun 2025
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $12,870
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <span class="px-[8px] py-[3px] inline-block bg-warning-50 dark:bg-[#15203c] text-warning-700 rounded-sm font-medium text-xs">
                    Pending
                </span>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                #DEC-3567
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <div class="flex items-center">
                    <div class="rounded-md w-[40px]">
                        <img src="assets/images/users/user4.jpg" class="inline-block rounded-md" alt="product-image">
                    </div>
                    <div class="ltr:ml-[12px] rtl:mr-[12px]">
                        <span class="block font-medium">
                            Jason Lee
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                09 Jun 2025
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $7,895
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <span class="px-[8px] py-[3px] inline-block bg-success-100 dark:bg-[#15203c] text-success-600 rounded-sm font-medium text-xs">
                    Shipped
                </span>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                #DEC-1098
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <div class="flex items-center">
                    <div class="rounded-md w-[40px]">
                        <img src="assets/images/users/user5.jpg" class="inline-block rounded-md" alt="product-image">
                    </div>
                    <div class="ltr:ml-[12px] rtl:mr-[12px]">
                        <span class="block font-medium">
                            Ashley Davis
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                08 Jun 2025
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                $4,680
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] border-b border-gray-100 dark:border-[#172036] ltr:first:border-l ltr:last:border-r rtl:first:border-r rtl:last:border-l">
                <span class="px-[8px] py-[3px] inline-block bg-danger-100 dark:bg-[#15203c] text-danger-500 rounded-sm font-medium text-xs">
                    Rejected
                </span>
            </td>
        </tr>
    </tbody>
</table>
</div>
<div class="px-[20px] py-[12px] md:py-[14px] rounded-b-md border-l border-r border-b border-gray-100 dark:border-[#172036] sm:flex sm:items-center justify-between">
<p class="mb-0 text-sm">
    نمایش 10 از 36 نتیجه
</p>
<ol class="mt-[10px] sm:mt-0">
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            <span class="opacity-0">
                0
            </span>
            <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                chevron_left
            </i>
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-primary-500 bg-primary-500 text-white">
            1
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            2
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            3
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            4
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            <span class="opacity-0">
                0
            </span>
            <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                chevron_right
            </i>
        </a>
    </li>
</ol>
</div>
برترین بازیگران
تصویر کاربر
الکس دیویس alex@trezo.com
arrow_outward
تصویر کاربر
لورا مارتینز laura@trezo.com
arrow_outward
تصویر کاربر
مارک تامپسون mark@trezo.com
arrow_outward
تصویر کاربر
راشل وایت rachel@trezo.com
arrow_outward
تصویر کاربر
کوین لی kevin@trezo.com
arrow_outward

تعداد آیتم در هر صفحه: 5

1 – 5 of 10

  1. 0 chevron_right
  2. 0 chevron_left 
    
    <div class="table-responsive overflow-x-auto">
    <table class="w-full">
        <tbody class="text-black dark:text-white">
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                    <div class="flex items-center">
                        <div class="w-[44px] h-[44px] ltr:mr-[12px] rtl:ml-[12px]">
                            <img src="assets/images/users/user6.jpg" class="rounded-full inline-block" alt="user-image">
                        </div>
                        <div>
                            <span class="block font-medium">
                                Alex Davis
                            </span>
                            <span class="text-gray-500 dark:text-gray-400 block mt-px">
                                sample@trezo.com
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-right rtl:text-left whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                    <a href="javascript:void(0);" class="inline-block relative w-[36px] h-[36px] text-center text-gray-500 dark:text-gray-400 transition-all border border-gray-100 dark:border-[#172036] rounded-full hover:bg-primary-500 hover:border-primary-500 hover:text-white">
                        <i class="material-symbols-outlined absolute left-0 right-0 !text-lg top-1/2 -translate-y-1/2">
                            arrow_outward
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                    <div class="flex items-center">
                        <div class="w-[44px] h-[44px] ltr:mr-[12px] rtl:ml-[12px]">
                            <img src="assets/images/users/user7.jpg" class="rounded-full inline-block" alt="user-image">
                        </div>
                        <div>
                            <span class="block font-medium">
                                Laura Martinez
                            </span>
                            <span class="text-gray-500 dark:text-gray-400 block mt-px">
                                sample@trezo.com
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-right rtl:text-left whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                    <a href="javascript:void(0);" class="inline-block relative w-[36px] h-[36px] text-center text-gray-500 dark:text-gray-400 transition-all border border-gray-100 dark:border-[#172036] rounded-full hover:bg-primary-500 hover:border-primary-500 hover:text-white">
                        <i class="material-symbols-outlined absolute left-0 right-0 !text-lg top-1/2 -translate-y-1/2">
                            arrow_outward
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                    <div class="flex items-center">
                        <div class="w-[44px] h-[44px] ltr:mr-[12px] rtl:ml-[12px]">
                            <img src="assets/images/users/user8.jpg" class="rounded-full inline-block" alt="user-image">
                        </div>
                        <div>
                            <span class="block font-medium">
                                Mark Thompson
                            </span>
                            <span class="text-gray-500 dark:text-gray-400 block mt-px">
                                sample@trezo.com
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-right rtl:text-left whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                    <a href="javascript:void(0);" class="inline-block relative w-[36px] h-[36px] text-center text-gray-500 dark:text-gray-400 transition-all border border-gray-100 dark:border-[#172036] rounded-full hover:bg-primary-500 hover:border-primary-500 hover:text-white">
                        <i class="material-symbols-outlined absolute left-0 right-0 !text-lg top-1/2 -translate-y-1/2">
                            arrow_outward
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                    <div class="flex items-center">
                        <div class="w-[44px] h-[44px] ltr:mr-[12px] rtl:ml-[12px]">
                            <img src="assets/images/users/user9.jpg" class="rounded-full inline-block" alt="user-image">
                        </div>
                        <div>
                            <span class="block font-medium">
                                Rachel White
                            </span>
                            <span class="text-gray-500 dark:text-gray-400 block mt-px">
                                sample@trezo.com
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-right rtl:text-left whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                    <a href="javascript:void(0);" class="inline-block relative w-[36px] h-[36px] text-center text-gray-500 dark:text-gray-400 transition-all border border-gray-100 dark:border-[#172036] rounded-full hover:bg-primary-500 hover:border-primary-500 hover:text-white">
                        <i class="material-symbols-outlined absolute left-0 right-0 !text-lg top-1/2 -translate-y-1/2">
                            arrow_outward
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                    <div class="flex items-center">
                        <div class="w-[44px] h-[44px] ltr:mr-[12px] rtl:ml-[12px]">
                            <img src="assets/images/users/user10.jpg" class="rounded-full inline-block" alt="user-image">
                        </div>
                        <div>
                            <span class="block font-medium">
                                Kevin Lee
                            </span>
                            <span class="text-gray-500 dark:text-gray-400 block mt-px">
                                sample@trezo.com
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-right rtl:text-left whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                    <a href="javascript:void(0);" class="inline-block relative w-[36px] h-[36px] text-center text-gray-500 dark:text-gray-400 transition-all border border-gray-100 dark:border-[#172036] rounded-full hover:bg-primary-500 hover:border-primary-500 hover:text-white">
                        <i class="material-symbols-outlined absolute left-0 right-0 !text-lg top-1/2 -translate-y-1/2">
                            arrow_outward
                        </i>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
    </div>
    <div class="flex items-center justify-between mt-[17px]">
    <p class="mb-0 text-sm">
        Items per pages: <strong>5</strong>
    </p>
    <div class="flex items-center">
        <p class="mb-0 text-sm">
            1 – 5 of 10
        </p>
        <ol class="ltr:ml-[10px] rtl:mr-[10px] mt-[10px] sm:mt-0">
            <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
                <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                    <span class="opacity-0">
                        0
                    </span>
                    <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                        chevron_left
                    </i>
                </a>
            </li>
            <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
                <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                    <span class="opacity-0">
                        0
                    </span>
                    <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                        chevron_right
                    </i>
                </a>
            </li>
        </ol>
    </div>
    </div>
رهبران اخیر
 مشتری ایمیل منبع وضعیت عملیات
تصویر کاربر
دیوید براون
david@trezo.com ارگانیک تأیید شد
تصویر کاربر
سارا میلر
sarah@trezo.com اجتماعی در حال بررسی
تصویر کاربر
مایکل ویلسون
micheal@trezo.com وب‌سایت در حال انجام
تصویر کاربر
آماندا کلارک
amanda@trezo.com پرداخت شده تأیید شد
تصویر کاربر
جنیفر تیلور
taylor@trezo.com دیگران رد شد

نمایش ۵ از ۳۶ نتیجه

  1. 0 chevron_left
  2. 1
  3. 2
  4. 3
  5. 4
  6. 0 chevron_right 
    
    <div class="table-responsive overflow-x-auto">
    <table class="w-full">
        <thead class="text-black dark:text-white">
            <tr>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Customer
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Email
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Source
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Status
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Action
                </th>
            </tr>
        </thead>
        <tbody class="text-black dark:text-white">
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="rounded-full w-[40px]">
                            <img src="assets/images/users/user11.jpg" class="inline-block rounded-full" alt="user-image">
                        </div>
                        <div class="ltr:ml-[12px] rtl:mr-[12px]">
                            <span class="block font-medium">
                                David Brown
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    sample@trezo.com
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    Organic
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-primary-50 dark:bg-[#15203c] text-primary-500 rounded-sm font-medium text-xs">
                        Confirmed
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="rounded-full w-[40px]">
                            <img src="assets/images/users/user12.jpg" class="inline-block rounded-full" alt="user-image">
                        </div>
                        <div class="ltr:ml-[12px] rtl:mr-[12px]">
                            <span class="block font-medium">
                                Sarah Miller
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    sample@trezo.com
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    Social
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-warning-50 dark:bg-[#15203c] text-warning-700 rounded-sm font-medium text-xs">
                        Pending
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="rounded-full w-[40px]">
                            <img src="assets/images/users/user13.jpg" class="inline-block rounded-full" alt="user-image">
                        </div>
                        <div class="ltr:ml-[12px] rtl:mr-[12px]">
                            <span class="block font-medium">
                                Michael Wilson
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    sample@trezo.com
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    Website
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-success-50 dark:bg-[#15203c] text-success-600 rounded-sm font-medium text-xs">
                        In Progress
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="rounded-full w-[40px]">
                            <img src="assets/images/users/user14.jpg" class="inline-block rounded-full" alt="user-image">
                        </div>
                        <div class="ltr:ml-[12px] rtl:mr-[12px]">
                            <span class="block font-medium">
                                Amanda Clark
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    sample@trezo.com
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    Paid
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-primary-50 dark:bg-[#15203c] text-primary-500 rounded-sm font-medium text-xs">
                        Confirmed
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="rounded-full w-[40px]">
                            <img src="assets/images/users/user15.jpg" class="inline-block rounded-full" alt="user-image">
                        </div>
                        <div class="ltr:ml-[12px] rtl:mr-[12px]">
                            <span class="block font-medium">
                                Jennifer Taylor
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    sample@trezo.com
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    Others
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-danger-50 dark:bg-[#15203c] text-danger-500 rounded-sm font-medium text-xs">
                        Rejected
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    </div>
    <div class="px-[20px] md:px-[25px] pt-[12px] md:pt-[14px] sm:flex sm:items-center justify-between">
    <p class="mb-0 text-sm">
        نمایش 10 از 36 نتیجه
    </p>
    <ol class="mt-[10px] sm:mt-0">
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                <span class="opacity-0">
                    0
                </span>
                <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                    chevron_left
                </i>
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-primary-500 bg-primary-500 text-white">
                1
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                2
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                3
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                4
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                <span class="opacity-0">
                    0
                </span>
                <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                    chevron_right
                </i>
            </a>
        </li>
    </ol>
    </div>
همه پروژه‌ها
شناسه نام پروژه مشتری واگذارشدگان بودجه تاریخ شروع تاریخ پایان وضعیت عملیات
#۸۵۴ پروژه سایبرسپهر راهکارهای نواتک
تصویر کاربر
تصویر کاربر
تصویر کاربر
تصویر کاربر
+10
1,000 تومان ۲۵ دی 1404 ۲۵ دی 1404 تمام شده
#۸۵۳ ابتکار دیجیتال اوسیس نوآوری‌های آلفاویو
تصویر کاربر
تصویر کاربر
تصویر کاربر
+۰۴
1,000 تومان ۲۰ دی 1404 ۲۰ دی 1404 در حال انجام
#۸۵۲ تکامل کلوداسکیپ شرکت اینوویت‌آی‌کیو
تصویر کاربر
تصویر کاربر
+۰۷
1,000 تومان ۱۵ دی 1404 ۱۵ دی 1404 در حال بررسی
#۸۵۱ درایو داده دینامو فناوری‌های بلواسکای
تصویر کاربر
تصویر کاربر
تصویر کاربر
تصویر کاربر
+۱۵
1,000 تومان ۱۰ دی 1404 ۱۰ دی 1404 در حال انجام
#۸۵۰ کوئست کوانتوم‌لیپ سیستم‌های نکس‌جن
تصویر کاربر
تصویر کاربر
تصویر کاربر
+۰۳
1,000 تومان ۵ دی 1404 ۵ دی 1404 تمام شده

نمایش ۵ از ۳۶ نتیجه

  1. 0 chevron_left
  2. 1
  3. 2
  4. 3
  5. 4
  6. 0 chevron_right 

<div class="table-responsive overflow-x-auto">
    <table class="w-full">
        <thead class="text-black dark:text-white">
            <tr>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    ID
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Project Name
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Client
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Assignees
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Budget
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Start Date
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    End Date
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Status
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Action
                </th>
            </tr>
        </thead>
        <tbody class="text-black dark:text-white">
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #854
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <a href="project-overview.html" class="inline-block font-medium transition-all text-gray-500 dark:text-gray-400 hover:text-primary-500">
                        Project CyberSphere
                    </a>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    NovaTech Solutions
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user15.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user11.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user6.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user9.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] text-xs rounded-full border border-white bg-primary-500 text-white font-medium flex items-center justify-center">
                            +10
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        $4,500
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        25 Mar 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        25 Apr 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-success-50 dark:bg-[#15203c] text-success-600 rounded-sm font-medium text-xs">
                        Finished
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #853
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <a href="project-overview.html" class="inline-block font-medium transition-all text-gray-500 dark:text-gray-400 hover:text-primary-500">
                        Digital Oasis Initiative
                    </a>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    AlphaWave Innovations
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user7.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user8.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user9.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] text-xs rounded-full border border-white bg-primary-500 text-white font-medium flex items-center justify-center">
                            +04
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        $6,800
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        20 Mar 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        20 Apr 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-danger-50 dark:bg-[#15203c] text-danger-500 rounded-sm font-medium text-xs">
                        In Progress
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #852
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <a href="project-overview.html" class="inline-block font-medium transition-all text-gray-500 dark:text-gray-400 hover:text-primary-500">
                        CloudScape Evolution
                    </a>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    InnovateIQ Inc.
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user10.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user12.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] text-xs rounded-full border border-white bg-primary-500 text-white font-medium flex items-center justify-center">
                            +07
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        $2,500
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        15 Mar 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        15 Apr 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-purple-50 dark:bg-[#15203c] text-purple-500 rounded-sm font-medium text-xs">
                        Pending
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #851
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <a href="project-overview.html" class="inline-block font-medium transition-all text-gray-500 dark:text-gray-400 hover:text-primary-500">
                        Data Dynamo Drive
                    </a>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    BlueSky Technologies
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user13.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user14.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user15.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user12.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] text-xs rounded-full border border-white bg-primary-500 text-white font-medium flex items-center justify-center">
                            +15
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        $7,500
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        10 Mar 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        10 Apr 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-danger-50 dark:bg-[#15203c] text-danger-500 rounded-sm font-medium text-xs">
                        In Progress	
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #850
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <a href="project-overview.html" class="inline-block font-medium transition-all text-gray-500 dark:text-gray-400 hover:text-primary-500">
                        QuantumLeap Quest
                    </a>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    NexGen Systems
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user7.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user9.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] rounded-full ltr:-mr-[13px] rtl:-ml-[13px] border border-white">
                            <img alt="user-image" class="rounded-full" src="assets/images/users/user6.jpg" />
                        </div>
                        <div class="w-[34px] h-[34px] text-xs rounded-full border border-white bg-primary-500 text-white font-medium flex items-center justify-center">
                            +03
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        $3,400
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        05 Mar 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        05 Apr 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-success-50 dark:bg-[#15203c] text-success-600 rounded-sm font-medium text-xs">
                        Finished
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="px-[20px] md:px-[25px] pt-[12px] md:pt-[14px] sm:flex sm:items-center justify-between">
    <p class="mb-0 text-sm">
        نمایش 10 از 36 نتیجه
    </p>
    <ol class="mt-[10px] sm:mt-0">
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                <span class="opacity-0">
                    0
                </span>
                <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                    chevron_left
                </i>
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-primary-500 bg-primary-500 text-white">
                1
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                2
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                3
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                4
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                <span class="opacity-0">
                    0
                </span>
                <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                    chevron_right
                </i>
            </a>
        </li>
    </ol>
</div>
وظایف من
 نام پروژه مهلت وضعیت
توسعه وب ۱۰ دی 1404 تکمیل شده
طراحی تجربه کاربری/رابط کاربری ۵ دی 1404 در حال انجام
توسعه واکنشی ۲۸ دی 1404 لغو شد
تحقیقات پایتون ۹ دی 1404 در حال بررسی
توسعه وب ۱۰ دی 1404 تکمیل شده

نمایش ۴ از ۳۶ نتیجه

  1. 0 chevron_left
  2. 1
  3. 2
  4. 3
  5. 0 chevron_right 

<div class="table-responsive overflow-x-auto">
<table class="w-full">
    <thead class="text-black dark:text-white">
        <tr>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                <div class="form-check relative top-[2px]">
                    <input type="checkbox" class="cursor-pointer">
                </div>
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                Project Name
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                Deadline
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                Status
            </th>
        </tr>
    </thead>
    <tbody class="text-black dark:text-white">
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <div class="form-check relative top-[2px]">
                    <input type="checkbox" class="cursor-pointer">
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <a href="#" class="font-medium transition-all hover:text-primary-500">
                    Web Development
                </a>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                10 Jan 2025
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <span class="px-[8px] py-[3px] inline-block bg-primary-50 dark:bg-[#15203c] text-primary-500 rounded-sm font-medium text-xs">
                    Completed
                </span>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <div class="form-check relative top-[2px]">
                    <input type="checkbox" class="cursor-pointer">
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <a href="#" class="font-medium transition-all hover:text-primary-500">
                    UX/UI Design
                </a>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                05 Feb 2025
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <span class="px-[8px] py-[3px] inline-block bg-success-50 dark:bg-[#15203c] text-success-600 rounded-sm font-medium text-xs">
                    In Progress
                </span>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <div class="form-check relative top-[2px]">
                    <input type="checkbox" class="cursor-pointer">
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <a href="#" class="font-medium transition-all hover:text-primary-500">
                    React Development
                </a>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                28 Mar 2025
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <span class="px-[8px] py-[3px] inline-block bg-danger-50 dark:bg-[#15203c] text-danger-500 rounded-sm font-medium text-xs">
                    Cancelled
                </span>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <div class="form-check relative top-[2px]">
                    <input type="checkbox" class="cursor-pointer">
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <a href="#" class="font-medium transition-all hover:text-primary-500">
                    Python Research
                </a>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                09 Mar 2025
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <span class="px-[8px] py-[3px] inline-block bg-warning-50 dark:bg-[#15203c] text-warning-700 rounded-sm font-medium text-xs">
                    Pending
                </span>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <div class="form-check relative top-[2px]">
                    <input type="checkbox" class="cursor-pointer">
                </div>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <a href="#" class="font-medium transition-all hover:text-primary-500">
                    Web Development
                </a>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                10 Jan 2025
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <span class="px-[8px] py-[3px] inline-block bg-primary-50 dark:bg-[#15203c] text-primary-500 rounded-sm font-medium text-xs">
                    Completed
                </span>
            </td>
        </tr>
    </tbody>
</table>
</div>
<div class="px-[20px] md:px-[25px] pt-[12px] md:pt-[14px] sm:flex sm:items-center justify-between">
<p class="mb-0 text-sm">
    نمایش 10 از 36 نتیجه
</p>
<ol class="mt-[10px] sm:mt-0">
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            <span class="opacity-0">
                0
            </span>
            <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                chevron_left
            </i>
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-primary-500 bg-primary-500 text-white">
            1
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            2
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            3
        </a>
    </li>
    <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
        <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
            <span class="opacity-0">
                0
            </span>
            <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                chevron_right
            </i>
        </a>
    </li>
</ol>
</div>
پیشرفت دانش‌آموز
نام نام دوره وضعیت
اولیویا کلارک طراحی وب
الکساندر گارسیا توسعه پایتون
کلوئی لوئیس بخش جلویی
آوا ترنر بک‌اند
رایان فلورس تجزیه و تحلیل داده‌ها
جان دو توسعه‌دهنده افزونه

تعداد مطالب در هر صفحه: 6

1 – 6 of 10

  1. 0 chevron_left
  2. 0 chevron_right 

<div class="table-responsive overflow-x-auto">
<table class="w-full">
    <thead class="text-black dark:text-white">
        <tr>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                Name
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                Course Name
            </th>
            <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                Status
            </th>
        </tr>
    </thead>
    <tbody class="text-black dark:text-white">
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036] font-medium">
                Olivia Clark
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <span class="text-gray-500 dark:text-gray-400">
                    Web Design
                </span>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <div class="flex w-full h-[4px] overflow-hidden rounded-md bg-primary-50 dark:bg-[#172036]">
                    <div class="flex flex-col justify-center overflow-hidden bg-primary-500 rounded-md" style="width: 55%;"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036] font-medium">
                Alexander Garcia
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <span class="text-gray-500 dark:text-gray-400">
                    Python Dev
                </span>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <div class="flex w-full h-[4px] overflow-hidden rounded-md bg-success-50 dark:bg-[#172036]">
                    <div class="flex flex-col justify-center overflow-hidden bg-success-500 rounded-md" style="width: 70%;"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036] font-medium">
                Chloe Lewis
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <span class="text-gray-500 dark:text-gray-400">
                    Front-end
                </span>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <div class="flex w-full h-[4px] overflow-hidden rounded-md bg-purple-50 dark:bg-[#172036]">
                    <div class="flex flex-col justify-center overflow-hidden bg-purple-500 rounded-md" style="width: 30%;"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036] font-medium">
                Ava Turner
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <span class="text-gray-500 dark:text-gray-400">
                    Back-end
                </span>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <div class="flex w-full h-[4px] overflow-hidden rounded-md bg-danger-50 dark:bg-[#172036]">
                    <div class="flex flex-col justify-center overflow-hidden bg-danger-500 rounded-md" style="width: 90%;"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036] font-medium">
                Ryan Flores
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <span class="text-gray-500 dark:text-gray-400">
                    Data Analytics
                </span>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <div class="flex w-full h-[4px] overflow-hidden rounded-md bg-secondary-50 dark:bg-[#172036]">
                    <div class="flex flex-col justify-center overflow-hidden bg-secondary-500 rounded-md" style="width: 50%;"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036] font-medium">
                John Doe
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <span class="text-gray-500 dark:text-gray-400">
                    Plugin Dev
                </span>
            </td>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[13px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                <div class="flex w-full h-[4px] overflow-hidden rounded-md bg-purple-50 dark:bg-[#172036]">
                    <div class="flex flex-col justify-center overflow-hidden bg-purple-500 rounded-md" style="width: 50%;"></div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
</div>
<div class="px-[20px] md:px-[25px] pt-[12px] md:pt-[14px] sm:flex sm:items-center justify-between">
<p class="mb-0 text-sm">
    Items per pages: <strong>6</strong>
</p>
<div class="flex items-center">
    <p class="mb-0 text-sm">
        1 – 6 of 10
    </p>
    <ol class="ltr:ml-[10px] rtl:mr-[10px] mt-[10px] sm:mt-0">
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                <span class="opacity-0">
                    0
                </span>
                <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                    chevron_left
                </i>
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                <span class="opacity-0">
                    0
                </span>
                <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                    chevron_right
                </i>
            </a>
        </li>
    </ol>
</div>
</div>
درس‌های گروهی
تصویر کاربر
تصویر کاربر
تصویر کاربر
بازاریابی دیجیتال ۱۵ دی 1404
arrow_outward
تصویر کاربر
تصویر کاربر
تصویر کاربر
توسعه وب ۱۰ دی 1404
arrow_outward
تصویر کاربر
تصویر کاربر
تصویر کاربر
طراحی تجربه کاربری/رابط کاربری ۵ دی 1404
arrow_outward
تصویر کاربر
تصویر کاربر
تصویر کاربر
نویسنده محتوا ۲ دی 1404
arrow_outward

تعداد آیتم در هر صفحه: 5

1 – 4 of 10

  1. 0 chevron_left
  2. 0 chevron_right 

<div class="table-responsive overflow-x-auto">
<table class="w-full">
    <tbody class="text-black dark:text-white">
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                <div class="flex items-center">
                    <div class="flex items-center">
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user20.jpg" class="rounded-full">
                        </div>
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user21.jpg" class="rounded-full">
                        </div>
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user6.jpg" class="rounded-full">
                        </div>
                    </div>
                    <div class="ltr:ml-[10px] rtl:mr-[10px]">
                        <span class="block font-medium">
                            Digital Marketing
                        </span>
                        <span class="block mt-[5px] text-gray-500 dark:text-gray-400">
                            15 March 2025
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-right rtl:text-left whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                <a href="javascript:void(0);" class="inline-block relative w-[36px] h-[36px] text-center text-gray-500 dark:text-gray-400 transition-all border border-gray-100 dark:border-[#172036] rounded-full hover:bg-primary-500 hover:border-primary-500 hover:text-white">
                    <i class="material-symbols-outlined absolute left-0 right-0 !text-lg top-1/2 -translate-y-1/2">
                        arrow_outward
                    </i>
                </a>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                <div class="flex items-center">
                    <div class="flex items-center">
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user22.jpg" class="rounded-full">
                        </div>
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user23.jpg" class="rounded-full">
                        </div>
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user24.jpg" class="rounded-full">
                        </div>
                    </div>
                    <div class="ltr:ml-[10px] rtl:mr-[10px]">
                        <span class="block font-medium">
                            Web Development
                        </span>
                        <span class="block mt-[5px] text-gray-500 dark:text-gray-400">
                            10 March 2025
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-right rtl:text-left whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                <a href="javascript:void(0);" class="inline-block relative w-[36px] h-[36px] text-center text-gray-500 dark:text-gray-400 transition-all border border-gray-100 dark:border-[#172036] rounded-full hover:bg-primary-500 hover:border-primary-500 hover:text-white">
                    <i class="material-symbols-outlined absolute left-0 right-0 !text-lg top-1/2 -translate-y-1/2">
                        arrow_outward
                    </i>
                </a>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                <div class="flex items-center">
                    <div class="flex items-center">
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user25.jpg" class="rounded-full">
                        </div>
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user26.jpg" class="rounded-full">
                        </div>
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user27.jpg" class="rounded-full">
                        </div>
                    </div>
                    <div class="ltr:ml-[10px] rtl:mr-[10px]">
                        <span class="block font-medium">
                            UX/UI Design
                        </span>
                        <span class="block mt-[5px] text-gray-500 dark:text-gray-400">
                            05 March 2025
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-right rtl:text-left whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                <a href="javascript:void(0);" class="inline-block relative w-[36px] h-[36px] text-center text-gray-500 dark:text-gray-400 transition-all border border-gray-100 dark:border-[#172036] rounded-full hover:bg-primary-500 hover:border-primary-500 hover:text-white">
                    <i class="material-symbols-outlined absolute left-0 right-0 !text-lg top-1/2 -translate-y-1/2">
                        arrow_outward
                    </i>
                </a>
            </td>
        </tr>
        <tr>
            <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                <div class="flex items-center">
                    <div class="flex items-center">
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user28.jpg" class="rounded-full">
                        </div>
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user29.jpg" class="rounded-full">
                        </div>
                        <div class="rounded-full w-[45px] h-[45px] text-xs ltr:-mr-[21px] rtl:-ml-[21px] ltr:last:mr-0 rtl:last:ml-0 border-[2px] border-white">
                            <img alt="user-image" src="assets/images/users/user30.jpg" class="rounded-full">
                        </div>
                    </div>
                    <div class="ltr:ml-[10px] rtl:mr-[10px]">
                        <span class="block font-medium">
                            Content Writer
                        </span>
                        <span class="block mt-[5px] text-gray-500 dark:text-gray-400">
                            02 March 2025
                        </span>
                    </div>
                </div>
            </td>
            <td class="ltr:text-right rtl:text-left whitespace-nowrap px-[20px] py-[17px] border-b border-gray-100 dark:border-[#172036] ltr:first:pl-0 ltr:last:pr-0 rtl:first:pr-0 rtl:last:pl-0">
                <a href="javascript:void(0);" class="inline-block relative w-[36px] h-[36px] text-center text-gray-500 dark:text-gray-400 transition-all border border-gray-100 dark:border-[#172036] rounded-full hover:bg-primary-500 hover:border-primary-500 hover:text-white">
                    <i class="material-symbols-outlined absolute left-0 right-0 !text-lg top-1/2 -translate-y-1/2">
                        arrow_outward
                    </i>
                </a>
            </td>
        </tr>
    </tbody>
</table>
</div>
<div class="sm:flex sm:items-center justify-between mt-[17px]">
<p class="mb-0 text-sm">
    Items per pages: <strong>5</strong>
</p>
<div class="flex items-center">
    <p class="mb-0 text-sm">
        1 – 4 of 10
    </p>
    <ol class="ltr:ml-[10px] rtl:mr-[10px] mt-[10px] sm:mt-0">
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                <span class="opacity-0">
                    0
                </span>
                <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                    chevron_left
                </i>
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                <span class="opacity-0">
                    0
                </span>
                <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                    chevron_right
                </i>
            </a>
        </li>
    </ol>
</div>
</div>
عملکرد نمایندگان
شناسه نام نماینده کل بلیط‌ها بلیط‌های باز تیکت‌های حل‌شده میانگین زمان حل مسئله میزان رضایت عملیات
#۸۵۴
تصویر کاربر
الیور خان
۲۳۰ ۲۰ ۷۵ ۲.۵ ساعت
۸۰٪
#۸۵۳
تصویر کاربر
آوا کوپر
۱۸۰ ۱۶ ۳۵ ۱.۴ ساعت
۷۵٪
#۸۵۲
تصویر کاربر
ایزابلا ایوانز
۱۵۰ ۳۵ ۴۵ ۳.۲ ساعت
۸۰٪
#۸۵۱
تصویر کاربر
میا هیوز
۷۵ ۸۶ ۲۵ ۴.۵ ساعت
۱۰۰٪
#۸۵۰
تصویر کاربر
نوح میچل
۳۲۰ ۹۰ ۱۰ ۳.۸ ساعت
۱۰۰٪
#849
تصویر کاربر
سوفیا کارتر
۱۲۰ ۵۵ ۲۰ ۵.۳ ساعت
۶۰٪

نمایش ۶ از ۳۶ نتیجه

  1. 0 chevron_left
  2. 1
  3. 2
  4. 3
  5. 4
  6. 0 chevron_right 

<div class="table-responsive overflow-x-auto">
    <table class="w-full">
        <thead class="text-black dark:text-white">
            <tr>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    ID
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Agent Name
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Total Tickets
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Open Tickets
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Resolved Tickets
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Avg. Resolution Time
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Satisfaction Rate
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Action
                </th>
            </tr>
        </thead>
        <tbody class="text-black dark:text-white">
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #854
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="rounded-full w-[40px]">
                            <img src="assets/images/users/user6.jpg" class="inline-block rounded-full" alt="user-image">
                        </div>
                        <div class="ltr:ml-[12px] rtl:mr-[12px]">
                            <span class="block font-medium">
                                Oliver Khan
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        230
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        20
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        75
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        2.5 hours
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="rounded-full relative w-[40px] h-[40px]">
                        <!-- Create Here: https://nikitahl.github.io/svg-circle-progress-generator/ -->
                        <svg width="50" height="50" viewBox="-25 -25 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" class="relative -top-[5px] ltr:-left-[5px] rtl:-right-[5px]" style="transform:rotate(-90deg)">
                            <circle r="90" cx="100" cy="100" fill="transparent" stroke="transparent" stroke-width="16px" stroke-dasharray="565.48px" stroke-dashoffset="0"></circle>
                            <circle r="90" cx="100" cy="100" stroke="#605DFF" stroke-width="16px" stroke-linecap="round" stroke-dashoffset="113px" fill="transparent" stroke-dasharray="565.48px"></circle>
                        </svg>
                        <span class="block text-gray-500 dark:text-gray-400 top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-[10px] absolute">
                            80%
                        </span>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #853
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="rounded-full w-[40px]">
                            <img src="assets/images/users/user13.jpg" class="inline-block rounded-full" alt="user-image">
                        </div>
                        <div class="ltr:ml-[12px] rtl:mr-[12px]">
                            <span class="block font-medium">
                                Ava Cooper
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        180
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        16
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        35
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        1.4 hours
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="rounded-full relative w-[40px] h-[40px]">
                        <svg width="50" height="50" viewBox="-25 -25 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" class="relative -top-[5px] ltr:-left-[5px] rtl:-right-[5px]" style="transform:rotate(-90deg)">
                            <circle r="90" cx="100" cy="100" fill="transparent" stroke="transparent" stroke-width="16px" stroke-dasharray="565.48px" stroke-dashoffset="0"></circle>
                            <circle r="90" cx="100" cy="100" stroke="#AD63F6" stroke-width="16px" stroke-linecap="round" stroke-dashoffset="141px" fill="transparent" stroke-dasharray="565.48px"></circle>
                        </svg>
                        <span class="block text-gray-500 dark:text-gray-400 top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-[10px] absolute">
                            75%
                        </span>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #852
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="rounded-full w-[40px]">
                            <img src="assets/images/users/user14.jpg" class="inline-block rounded-full" alt="user-image">
                        </div>
                        <div class="ltr:ml-[12px] rtl:mr-[12px]">
                            <span class="block font-medium">
                                Isabella Evans
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        150
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        35
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        45
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        3.2 hours
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="rounded-full relative w-[40px] h-[40px]">
                        <svg width="50" height="50" viewBox="-25 -25 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" class="relative -top-[5px] ltr:-left-[5px] rtl:-right-[5px]" style="transform:rotate(-90deg)">
                            <circle r="90" cx="100" cy="100" fill="transparent" stroke="transparent" stroke-width="16px" stroke-dasharray="565.48px" stroke-dashoffset="0"></circle>
                            <circle r="90" cx="100" cy="100" stroke="#25B003" stroke-width="16px" stroke-linecap="round" stroke-dashoffset="113px" fill="transparent" stroke-dasharray="565.48px"></circle>
                        </svg>
                        <span class="block text-gray-500 dark:text-gray-400 top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-[10px] absolute">
                            80%
                        </span>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #851
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="rounded-full w-[40px]">
                            <img src="assets/images/users/user15.jpg" class="inline-block rounded-full" alt="user-image">
                        </div>
                        <div class="ltr:ml-[12px] rtl:mr-[12px]">
                            <span class="block font-medium">
                                Mia Hughes
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        75
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        86
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        25
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        4.5 hours
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="rounded-full relative w-[40px] h-[40px]">
                        <svg width="50" height="50" viewBox="-25 -25 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" class="relative -top-[5px] ltr:-left-[5px] rtl:-right-[5px]" style="transform:rotate(-90deg)">
                            <circle r="90" cx="100" cy="100" fill="transparent" stroke="transparent" stroke-width="16px" stroke-dasharray="565.48px" stroke-dashoffset="0"></circle>
                            <circle r="90" cx="100" cy="100" stroke="#3584FC" stroke-width="16px" stroke-linecap="round" stroke-dashoffset="0px" fill="transparent" stroke-dasharray="565.48px"></circle>
                        </svg>
                        <span class="block text-gray-500 dark:text-gray-400 top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-[10px] absolute">
                            100%
                        </span>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #850
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="rounded-full w-[40px]">
                            <img src="assets/images/users/user16.jpg" class="inline-block rounded-full" alt="user-image">
                        </div>
                        <div class="ltr:ml-[12px] rtl:mr-[12px]">
                            <span class="block font-medium">
                                Noah Mitchell
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        320
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        90
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        10
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        3.8 hours
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="rounded-full relative w-[40px] h-[40px]">
                        <svg width="50" height="50" viewBox="-25 -25 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" class="relative -top-[5px] ltr:-left-[5px] rtl:-right-[5px]" style="transform:rotate(-90deg)">
                            <circle r="90" cx="100" cy="100" fill="transparent" stroke="transparent" stroke-width="16px" stroke-dasharray="565.48px" stroke-dashoffset="0"></circle>
                            <circle r="90" cx="100" cy="100" stroke="#FD5812" stroke-width="16px" stroke-linecap="round" stroke-dashoffset="0px" fill="transparent" stroke-dasharray="565.48px"></circle>
                        </svg>
                        <span class="block text-gray-500 dark:text-gray-400 top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-[10px] absolute">
                            100%
                        </span>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #849
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="rounded-full w-[40px]">
                            <img src="assets/images/users/user17.jpg" class="inline-block rounded-full" alt="user-image">
                        </div>
                        <div class="ltr:ml-[12px] rtl:mr-[12px]">
                            <span class="block font-medium">
                                Sophia Carter
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        120
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        55
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        20
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        5.3 hours
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="rounded-full relative w-[40px] h-[40px]">
                        <svg width="50" height="50" viewBox="-25 -25 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" class="relative -top-[5px] ltr:-left-[5px] rtl:-right-[5px]" style="transform:rotate(-90deg)">
                            <circle r="90" cx="100" cy="100" fill="transparent" stroke="transparent" stroke-width="16px" stroke-dasharray="565.48px" stroke-dashoffset="0"></circle>
                            <circle r="90" cx="100" cy="100" stroke="#605DFF" stroke-width="16px" stroke-linecap="round" stroke-dashoffset="226px" fill="transparent" stroke-dasharray="565.48px"></circle>
                        </svg>
                        <span class="block text-gray-500 dark:text-gray-400 top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-[10px] absolute">
                            60%
                        </span>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="px-[20px] md:px-[25px] pt-[12px] md:pt-[14px] sm:flex sm:items-center justify-between">
    <p class="mb-0 text-sm">
        نمایش 10 از 36 نتیجه
    </p>
    <ol class="mt-[10px] sm:mt-0">
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                <span class="opacity-0">
                    0
                </span>
                <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                    chevron_left
                </i>
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-primary-500 bg-primary-500 text-white">
                1
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                2
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                3
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                4
            </a>
        </li>
        <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
            <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                <span class="opacity-0">
                    0
                </span>
                <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                    chevron_right
                </i>
            </a>
        </li>
    </ol>
</div>
امتیازهای اخیر مشتریان
نام تاریخ رتبه‌بندی‌ها
تصویر کاربر
اولیویا کلارک کلان داده
۲۸ دی 1404
تصویر کاربر
آوا ترنر تجربه کاربری/رابط کاربری
۲۵ دی 1404
تصویر کاربر
لوکاس مورگان توسعه‌دهنده
۲۳ دی 1404
تصویر کاربر
ایزابلا کوپر طراح
۲۰ دی 1404
تصویر کاربر
ایتان پارکر پایتون
۱۵ دی 1404

تعداد آیتم در هر صفحه: 5

1 – 5 of 10

  1. 0 chevron_left
  2. 0 chevron_right 

<div class="table-responsive overflow-x-auto">
    <table class="w-full">
        <thead class="text-black dark:text-white">
            <tr>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Name
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Date
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Ratings
                </th>
            </tr>
        </thead>
        <tbody class="text-black dark:text-white">
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="w-[44px] h-[44px] ltr:mr-[12px] rtl:ml-[12px]">
                            <img src="assets/images/users/user13.jpg" class="rounded-full inline-block" alt="user-image">
                        </div>
                        <div>
                            <span class="block font-medium">
                                Olivia Clark
                            </span>
                            <span class="text-gray-500 dark:text-gray-400 block mt-px">
                                Big Data
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        28 April 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="text-[15px] leading-none text-orange-400">
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="w-[44px] h-[44px] ltr:mr-[12px] rtl:ml-[12px]">
                            <img src="assets/images/users/user16.jpg" class="rounded-full inline-block" alt="user-image">
                        </div>
                        <div>
                            <span class="block font-medium">
                                Ava Turner
                            </span>
                            <span class="text-gray-500 dark:text-gray-400 block mt-px">
                                UX/UI
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        25 April 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="text-[15px] leading-none text-orange-400">
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-half-fill"></i>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="w-[44px] h-[44px] ltr:mr-[12px] rtl:ml-[12px]">
                            <img src="assets/images/users/user17.jpg" class="rounded-full inline-block" alt="user-image">
                        </div>
                        <div>
                            <span class="block font-medium">
                                Lucas Morgan
                            </span>
                            <span class="text-gray-500 dark:text-gray-400 block mt-px">
                                Developer
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        23 April 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="text-[15px] leading-none text-orange-400">
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-line"></i>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="w-[44px] h-[44px] ltr:mr-[12px] rtl:ml-[12px]">
                            <img src="assets/images/users/user18.jpg" class="rounded-full inline-block" alt="user-image">
                        </div>
                        <div>
                            <span class="block font-medium">
                                Isabella Cooper
                            </span>
                            <span class="text-gray-500 dark:text-gray-400 block mt-px">
                                Designer
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        20 April 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="text-[15px] leading-none text-orange-400">
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-half-fill"></i>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center">
                        <div class="w-[44px] h-[44px] ltr:mr-[12px] rtl:ml-[12px]">
                            <img src="assets/images/users/user16.jpg" class="rounded-full inline-block" alt="user-image">
                        </div>
                        <div>
                            <span class="block font-medium">
                                Ethan Parker
                            </span>
                            <span class="text-gray-500 dark:text-gray-400 block mt-px">
                                Python
                            </span>
                        </div>
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        15 April 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="text-[15px] leading-none text-orange-400">
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="px-[20px] md:px-[25px] pt-[12px] md:pt-[14px] sm:flex sm:items-center justify-between">
    <p class="mb-0 text-sm">
        Items per pages: <strong>5</strong>
    </p>
    <div class="flex items-center">
        <p class="mb-0 text-sm">
            1 – 5 of 10
        </p>
        <ol class="ltr:ml-[10px] rtl:mr-[10px] mt-[10px] sm:mt-0">
            <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
                <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                    <span class="opacity-0">
                        0
                    </span>
                    <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                        chevron_left
                    </i>
                </a>
            </li>
            <li class="inline-block mx-[1px] ltr:first:ml-0 ltr:last:mr-0 rtl:first:mr-0 rtl:last:ml-0">
                <a href="javascript:void(0);" class="w-[31px] h-[31px] block leading-[29px] relative text-center rounded-md border border-gray-100 dark:border-[#172036] transition-all hover:bg-primary-500 hover:text-white hover:border-primary-500">
                    <span class="opacity-0">
                        0
                    </span>
                    <i class="material-symbols-outlined left-0 right-0 absolute top-1/2 -translate-y-1/2">
                        chevron_right
                    </i>
                </a>
            </li>
        </ol>
    </div>
</div>
فهرست کارها
 شناسه عنوان وظیفه اختصاص داده شده به تاریخ سررسید اولویت وضعیت عملیات
#۸۵۴ زیرساخت شبکه الیور کلارک ۳۰ دی 1404 بالا تمام شده
#۸۵۳ مهاجرت ابری ایتان بیکر ۲۵ دی 1404 کم در حال بررسی
#۸۵۲ بازسازی وب‌سایت سوفیا کارتر ۲۰ دی 1404 متوسط در حال انجام
#۸۵۱ اپلیکیشن موبایل آوا کوپر ۱۵ دی 1404 بالا تمام شده
#۸۵۰ استقرار سیستم ایزابلا ایوانز ۱۰ دی 1404 کم لغو شد 

<div class="table-responsive overflow-x-auto">
    <table class="w-full">
        <thead class="text-black dark:text-white">
            <tr>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    ID
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Task Title
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Assigned To
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Due Date
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Priority
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Status
                </th>
                <th class="font-medium ltr:text-left rtl:text-right px-[20px] py-[11px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 bg-primary-50 dark:bg-[#15203c] whitespace-nowrap">
                    Action
                </th>
            </tr>
        </thead>
        <tbody class="text-black dark:text-white">
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #854
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="block font-medium text-gray-500 dark:text-gray-400">
                        Network Infrastructure
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    Oliver Clark
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        30 Apr 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        High
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-primary-50 dark:bg-[#15203c] text-primary-500 rounded-sm font-medium text-xs">
                        Finished
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none custom-tooltip" id="customTooltip" data-text="View">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none custom-tooltip" id="customTooltip" data-text="Edit">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none custom-tooltip" id="customTooltip" data-text="Delete">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #853
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="block font-medium text-gray-500 dark:text-gray-400">
                        Cloud Migration
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    Ethan Baker
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        25 Apr 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        Low
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-warning-50 dark:bg-[#15203c] text-warning-700 rounded-sm font-medium text-xs">
                        Pending
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none custom-tooltip" id="customTooltip" data-text="View">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none custom-tooltip" id="customTooltip" data-text="Edit">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none custom-tooltip" id="customTooltip" data-text="Delete">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #852
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="block font-medium text-gray-500 dark:text-gray-400">
                        Website Revamp
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    Sophia Carter
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        20 Apr 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        Medium
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-success-50 dark:bg-[#15203c] text-success-600 rounded-sm font-medium text-xs">
                        In Progress
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none custom-tooltip" id="customTooltip" data-text="View">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none custom-tooltip" id="customTooltip" data-text="Edit">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none custom-tooltip" id="customTooltip" data-text="Delete">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #851
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="block font-medium text-gray-500 dark:text-gray-400">
                        Mobile Application
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    Ava Cooper
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        15 Apr 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        High
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-primary-50 dark:bg-[#15203c] text-primary-500 rounded-sm font-medium text-xs">
                        Finished
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none custom-tooltip" id="customTooltip" data-text="View">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none custom-tooltip" id="customTooltip" data-text="Edit">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none custom-tooltip" id="customTooltip" data-text="Delete">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="form-check relative top-[2px]">
                        <input type="checkbox" class="cursor-pointer">
                    </div>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        #850
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="block font-medium text-gray-500 dark:text-gray-400">
                        System Deployment
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    Isabella Evans
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        10 Apr 2025
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="text-gray-500 dark:text-gray-400">
                        Low
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <span class="px-[8px] py-[3px] inline-block bg-danger-50 dark:bg-[#15203c] text-danger-500 rounded-sm font-medium text-xs">
                        Cancelled
                    </span>
                </td>
                <td class="ltr:text-left rtl:text-right whitespace-nowrap px-[20px] py-[15px] md:ltr:first:pl-[25px] md:rtl:first:pr-[25px] ltr:first:pr-0 rtl:first:pl-0 border-b border-gray-100 dark:border-[#172036]">
                    <div class="flex items-center gap-[9px]">
                        <button type="button" class="text-primary-500 leading-none custom-tooltip" id="customTooltip" data-text="View">
                            <i class="material-symbols-outlined !text-md">
                                visibility
                            </i>
                        </button>
                        <button type="button" class="text-gray-500 dark:text-gray-400 leading-none custom-tooltip" id="customTooltip" data-text="Edit">
                            <i class="material-symbols-outlined !text-md">
                                edit
                            </i>
                        </button>
                        <button type="button" class="text-danger-500 leading-none custom-tooltip" id="customTooltip" data-text="Delete">
                            <i class="material-symbols-outlined !text-md">
                                delete
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="px-[25px] pt-[12px] md:pt-[15px] ltr:text-right rtl:text-left">
    <button type="button" class="inline-block transition-all rounded-md font-medium px-[13px] py-[6px] text-primary-500 border border-primary-500 hover:bg-primary-500 hover:text-white" id="add-new-popup-toggle">
        <span class="inline-block relative ltr:pl-[22px] rtl:pr-[22px]">
            <i class="material-symbols-outlined !text-[22px] absolute ltr:-left-[4px] rtl:-right-[4px] top-1/2 -translate-y-1/2">
                add
            </i>
            Add New Task
        </span>
    </button>
</div>

<!-- Add New Popup -->
<div class="add-new-popup z-[999] fixed transition-all inset-0 overflow-x-hidden overflow-y-auto" id="add-new-popup">
    <div class="popup-dialog flex transition-all max-w-[550px] min-h-full items-center mx-auto">
        <div class="trezo-card w-full bg-white dark:bg-[#0c1427] mb-[25px] p-[20px] md:p-[25px] rounded-md">
            <div class="trezo-card-header bg-gray-50 dark:bg-[#15203c] mb-[20px] md:mb-[25px] flex items-center justify-between -mx-[20px] md:-mx-[25px] -mt-[20px] md:-mt-[25px] p-[20px] md:p-[25px] rounded-t-md">
                <div class="trezo-card-title">
                    <h5 class="mb-0">
                        Add New Task
                    </h5>
                </div>
                <div class="trezo-card-subtitle">
                    <button type="button" class="text-[23px] transition-all leading-none text-black dark:text-white hover:text-primary-500" id="add-new-popup-toggle">
                        <i class="ri-close-fill"></i>
                    </button>
                </div>
            </div>
            <div class="trezo-card-content">
                <form>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-[20px] md:gap-[25px]">
                        <div class="sm:col-span-2">
                            <label class="mb-[10px] text-black dark:text-white font-medium block">
                                Task Name
                            </label>
                            <input type="text" class="h-[55px] rounded-md text-black dark:text-white border border-gray-200 dark:border-[#172036] bg-white dark:bg-[#0c1427] px-[17px] block w-full outline-0 transition-all placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:border-primary-500" placeholder="Task name">
                        </div>
                        <div>
                            <label class="mb-[10px] text-black dark:text-white font-medium block">
                                Assigned To
                            </label>
                            <select class="h-[55px] rounded-md text-black dark:text-white border border-gray-200 dark:border-[#172036] bg-white dark:bg-[#0c1427] px-[14px] block w-full outline-0 cursor-pointer transition-all focus:border-primary-500">
                                <option>
                                    Select
                                </option>
                                <option>
                                    Shawn Kennedy
                                </option>
                                <option>
                                    Roberto Cruz
                                </option>
                                <option>
                                    Juli Johnson
                                </option>
                                <option>
                                    Catalina Engles
                                </option>
                                <option>
                                    Louis Nagle
                                </option>
                                <option>
                                    Michael Marquez
                                </option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-[10px] text-black dark:text-white font-medium block">
                                Due Date
                            </label>
                            <input type="date" class="h-[55px] rounded-md text-black dark:text-white border border-gray-200 dark:border-[#172036] bg-white dark:bg-[#0c1427] px-[17px] block w-full outline-0 transition-all placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:border-primary-500">
                        </div>
                        <div>
                            <label class="mb-[10px] text-black dark:text-white font-medium block">
                                Priority
                            </label>
                            <select class="h-[55px] rounded-md text-black dark:text-white border border-gray-200 dark:border-[#172036] bg-white dark:bg-[#0c1427] px-[14px] block w-full outline-0 cursor-pointer transition-all focus:border-primary-500">
                                <option>
                                    Select
                                </option>
                                <option>
                                    High
                                </option>
                                <option>
                                    Medium
                                </option>
                                <option>
                                    Low
                                </option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-[10px] text-black dark:text-white font-medium block">
                                Status
                            </label>
                            <select class="h-[55px] rounded-md text-black dark:text-white border border-gray-200 dark:border-[#172036] bg-white dark:bg-[#0c1427] px-[14px] block w-full outline-0 cursor-pointer transition-all focus:border-primary-500">
                                <option>
                                    Select
                                </option>
                                <option>
                                    In Progress
                                </option>
                                <option>
                                    Pending
                                </option>
                                <option>
                                    Completed
                                </option>
                                <option>
                                    Not Started
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="mt-[20px] md:mt-[25px] ltr:text-right rtl:text-left">
                        <button type="button" class="rounded-md inline-block transition-all font-medium ltr:mr-[15px] rtl:ml-[15px] px-[26.5px] py-[12px] bg-danger-500 text-white hover:bg-danger-400" id="add-new-popup-toggle">
                            Cancel
                        </button>
                        <button type="button" class="inline-block bg-primary-500 text-white py-[12px] px-[26.5px] transition-all rounded-md hover:bg-primary-400">
                            <span class="inline-block relative ltr:pl-[25px] rtl:pr-[25px]">
                                <i class="material-symbols-outlined !text-[20px] absolute ltr:left-0 rtl:right-0 top-1/2 -translate-y-1/2">
                                    add
                                </i>
                                Create
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>