|
ID
|
Name
|
Age
|
City
|
Country
|
|
1
|
John Doe
|
25
|
New York
|
USA
|
|
2
|
Jane Smith
|
30
|
London
|
UK
|
|
3
|
Samuel Green
|
22
|
Toronto
|
Canada
|
|
4
|
Emily Brown
|
27
|
Sydney
|
Australia
|
|
5
|
Michael Johnson
|
29
|
Auckland
|
New Zealand
|
|
6
|
Sarah White
|
24
|
Chicago
|
USA
|
|
7
|
William Blac
|
35
|
Vancouver
|
Canada
|
|
8
|
Olivia Green
|
31
|
Manchester
|
UK
|
|
9
|
David Brown
|
28
|
Melbourne
|
Australia
|
|
10
|
Amy Blue
|
26
|
Wellington
|
New Zealand
|
No results found.
|
Product
|
Price
|
Order
|
Stock
|
Amount
|
|
|
$35.00
|
75
|
750
|
$2,625
|
|
|
$49.00
|
25
|
825
|
$1,225
|
|
|
$99.00
|
55
|
Stock Out
|
$5,445
|
|
|
$59.00
|
40
|
535
|
$2,360
|
|
|
$79.00
|
56
|
460
|
$4,424
|
<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">
Showing 5 of 36 results
</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>
|
Order ID
|
Customer
|
Created
|
Total
|
Status
|
|
#JAN-2345
|
|
12 Jun 2025
|
$10,490
|
Shipped
|
|
#JAN-1323
|
|
11 Jun 2025
|
$6,575
|
Confirmed
|
|
#DEC-1234
|
|
10 Jun 2025
|
$12,870
|
Pending
|
|
#DEC-3567
|
|
09 Jun 2025
|
$7,895
|
Shipped
|
|
#DEC-1098
|
|
08 Jun 2025
|
$4,680
|
Rejected
|
<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-500 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">
Showing 5 of 36 results
</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>
<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]">
david@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]">
sarah@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-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]">
<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]">
micheal@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-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]">
<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]">
amanda@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]">
taylor@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">
Showing 5 of 36 results
</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>
|
ID
|
Project Name
|
Client
|
Assignees
|
Budget
|
Start Date
|
End Date
|
Status
|
Action
|
|
#854
|
Project CyberSphere
|
NovaTech Solutions
|
|
$4,500
|
25 Mar 2025
|
25 Apr 2025
|
Finished
|
|
|
#853
|
Digital Oasis Initiative
|
AlphaWave Innovations
|
|
$6,800
|
20 Mar 2025
|
20 Apr 2025
|
In Progress
|
|
|
#852
|
CloudScape Evolution
|
InnovateIQ Inc.
|
|
$2,500
|
15 Mar 2025
|
15 Apr 2025
|
Pending
|
|
|
#851
|
Data Dynamo Drive
|
BlueSky Technologies
|
|
$7,500
|
10 Mar 2025
|
10 Apr 2025
|
In Progress
|
|
|
#850
|
QuantumLeap Quest
|
NexGen Systems
|
|
$3,400
|
05 Mar 2025
|
05 Apr 2025
|
Finished
|
|
<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-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">
<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-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">
<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">
Showing 5 of 36 results
</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>
<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-500 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-500 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">
Showing 4 of 36 results
</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>
|
Name
|
Course Name
|
Status
|
|
Olivia Clark
|
Web Design
|
|
|
Alexander Garcia
|
Python Dev
|
|
|
Chloe Lewis
|
Front-end
|
|
|
Ava Turner
|
Back-end
|
|
|
Ryan Flores
|
Data Analytics
|
|
|
John Doe
|
Plugin Dev
|
|
<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>
<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>
|
ID
|
Agent Name
|
Total Tickets
|
Open Tickets
|
Resolved Tickets
|
Avg. Resolution Time
|
Satisfaction Rate
|
Action
|
|
#854
|
|
230
|
20
|
75
|
2.5 hours
|
80%
|
|
|
#853
|
|
180
|
16
|
35
|
1.4 hours
|
75%
|
|
|
#852
|
|
150
|
35
|
45
|
3.2 hours
|
80%
|
|
|
#851
|
|
75
|
86
|
25
|
4.5 hours
|
100%
|
|
|
#850
|
|
320
|
90
|
10
|
3.8 hours
|
100%
|
|
|
#849
|
|
120
|
55
|
20
|
5.3 hours
|
60%
|
|
|
Name
|
Date
|
Ratings
|
|
|
28 April 2025
|
|
|
|
25 April 2025
|
|
|
|
23 April 2025
|
|
|
|
20 April 2025
|
|
|
|
15 April 2025
|
|
<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>
<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-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 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-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 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>
