tieptk/agent_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
tieptk
2026-03-07 10:26:20 +07:00
commit aa223ce3bb
1128 changed files with 118856 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
template/home/components/main_stat.html Normal file
View File

@@ -0,0 +1,210 @@
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="mr-[10px] w-[calc(100%-36px)] text-[#B1B1B1] text-[12px] text-custom-16 uppercase">
Đơn
hàng
mới</p>
<a href=""
class="bg-[#F0F8FF] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-cart"></i>
</a>
</div>
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#E8F7F2] bg-green-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#299D00] text-[14px]">
<i class="icons icon-increase"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-[12px] text-custom-16 uppercase">Khách
hàng
liên hệ qua website</p>
<a href=""
class="bg-[#F0F9F2] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-contact"></i>
</a>
</div>
<p class="text-[22px] text-custom-28 leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#E8F7F2] bg-green-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#299D00] text-[14px]">
<i class="icons icon-increase"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-custom-16 text-[12px] uppercase">Đơn
trả
góp</p>
<a href=""
class="bg-[#F7F5FF] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-pay"></i>
</a>
</div>
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#FFEEEB] bg-[red]-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#E00000] text-[14px]">
<i class="icons icon-reduce"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 2xl:col-span-1 item-stat bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] transition duration-300 hover:shadow-[0px_1px_5px_0px_rgba(0,0,0,0.20)]">
<div class="border-b border-b-[#FAFAFB] p-[10px_10px_15px_13px]">
<div class="flex justify-between leading-[16px] min-h-[32px]">
<p class="w-[calc(100%-36px)] mr-[10px] text-[#B1B1B1] text-custom-16 text-[12px] uppercase">Đơn
hoàn
trả</p>
<a href=""
class="bg-[#F9F2F2] flex h-[26px] items-center justify-center rounded-[4px] text-center w-[26px]">
<i class="icons icon-installment"></i>
</a>
</div>
<p class="text-[28px] max-[1620px]:text-[22px] leading-[36px] font-[600]">10.000.000</p>
</div>
<div class="flex items-center p-[8px_13px]">
<div
class="bg-[#FFEEEB] bg-[red]-100 flex font-[700] inline-flex items-center leading-[24px] mr-[10px] px-[5px] rounded-[4px] text-[#E00000] text-[14px]">
<i class="icons icon-reduce"></i>
<b class="font-[700]"> 10% </b>
</div>
<p class="text-[#C5C5C5] text-custom-16 text-[12px]">Hôm qua</p>
</div>
</div>
<div
class="sm:col-span-2 item-chart bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] col-span-2">
<div class="flex justify-between min-h-[100px]">
<div>
<h5 class="leading-[30px] text-[24px] font-[600]">32.4k</h5>
<p class="text-custom-16 text-[14px] text-[#7E7E7E]">Doanh thu trong tuần này</p>
</div>
<div
class="flex items-center px-2.5 py-0.5 text-base font-semibold text-green-500 dark:text-green-500 text-center">
12%
<i class="fa-solid fa-arrow-up ml-[5px]"></i>
</div>
</div>
<div id="js-revenue-chart"></div>
<div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
<div class="flex justify-between items-center pt-5">
<select>
<option value=""> Last 7 days </option>
<option value=""> Yesterday </option>
<option value=""> Today </option>
<option value=""> Last 7 days </option>
<option value=""> Last 30 days </option>
<option value=""> Last 90 days </option>
</select>
<a href="#"
class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
Users Report
<i class="fa-solid fa-angle-right ml-[5px]"></i>
</a>
</div>
</div>
</div>
<div
class="sm:col-span-2 item-chart bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] p-[16px] max-[1620px]:p-[10px] col-span-2">
<div class="pb-[14px] mb-[10px] border-b border-gray-200 dark:border-gray-700">
<h5 class="leading-[30px] text-[24px] font-[600]">3.4k</h5>
<div class="flex items-center justify-between">
<p class="text-[14px] text-[#7E7E7E] text-custom-16">Truy cập web trong tuần này</p>
<span
class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md dark:bg-green-900 dark:text-green-300">
<svg class="w-2.5 h-2.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 10 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 13V1m0 0L1 5m4-4 4 4" />
</svg>
42.5%
</span>
</div>
</div>
<div class="grid grid-cols-2">
<dl class="flex items-center">
<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Lượt truy cập:
</dt>
<dd class="text-gray-900 text-sm dark:text-white font-semibold">1.458</dd>
</dl>
<dl class="flex items-center justify-end">
<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Người xem:</dt>
<dd class="text-gray-900 text-sm dark:text-white font-semibold">2.130</dd>
</dl>
</div>
<div id="js-access-chart"></div>
<div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
<div class="flex justify-between items-center pt-5">
<select>
<option value=""> Last 7 days </option>
<option value=""> Yesterday </option>
<option value=""> Today </option>
<option value=""> Last 7 days </option>
<option value=""> Last 30 days </option>
<option value=""> Last 90 days </option>
</select>
<a href="#"
class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
Leads Report
<svg class="w-2.5 h-2.5 ms-1.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 9 4-4-4-4" />
</svg>
</a>
</div>
</div>
</div>

850
template/home/home.html Normal file
View File

@@ -0,0 +1,850 @@
<!-- Start: Dashboard Stats Widget -->
<div class="flex gap-3">
<div class="w-[calc(100%_-450px)]">
<!-- việc cần làm -->
<div class="box-indicator">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<i data-lucide="notebook-tabs" class="size-5"></i>
<b class="text-lg">Việc cần làm</b>
</div>
<button type="button" href="javascript:void(0)"
onclick="document.getElementById('box-add-indicator')?.showModal()"
class="btn btn-sm hura-btn-active cursor-pointer">
<i data-lucide="plus-circle" class="size-3"></i>
Thêm việc cần làm
</button>
</div>
<div class="grid grid-cols-4 gap-3 mt-3">
<div class="card bg-base-100 cursor-pointer shadow transition-all hover:shadow-md">
<div class="p-4">
<div class="flex items-center justify-between">
<div class="bg-base-200 rounded-box inline-flex items-center justify-center p-2">
<span data-lucide="shopping-cart" class="size-5"></span>
</div>
<a href="/order" class="btn btn-sm hura-btn-outline">Xem</a>
</div>
<div class="mt-3 flex items-center justify-between">
<p class="text-sm font-medium">Đơn hàng mới</p>
<span class="text-base-content/80 text-xs">
52.4%
</span>
</div>
<progress max="125" value="65.5"
class="progress progress-primary mt-0.5 h-1.5 align-super"></progress>
<div class="-mt-1.5 flex items-center justify-between">
<span class="text-sm font-medium">6</span>
<span class="text-base-content/80 text-xs">
10
</span>
</div>
</div>
</div>
<div class="card bg-base-100 cursor-pointer shadow transition-all hover:shadow-md">
<div class="p-4">
<div class="flex items-center justify-between">
<div class="bg-base-200 rounded-box inline-flex items-center justify-center p-2">
<span data-lucide="user" class="size-5"></span>
</div>
<a href="/customer" class="btn btn-sm hura-btn-outline">Xem</a>
</div>
<div class="mt-3 flex items-center justify-between">
<p class="text-sm font-medium">Liên hệ mới</p>
<span class="text-base-content/80 text-xs">
52.5%
</span>
</div>
<progress max="125" value="65.5"
class="progress progress-warning mt-0.5 h-1.5 align-super"></progress>
<div class="-mt-1.5 flex items-center justify-between">
<span class="text-sm font-medium">6</span>
<span class="text-base-content/80 text-xs">
10
</span>
</div>
</div>
</div>
<div class="card bg-base-100 cursor-pointer shadow transition-all hover:shadow-md">
<div class="p-4">
<div class="flex items-center justify-between">
<div class="bg-base-200 rounded-box inline-flex items-center justify-center p-2">
<span data-lucide="bug" class="size-5"></span>
</div>
<a href="#" class="btn btn-sm hura-btn-outline">Xem</a>
</div>
<div class="mt-3 flex items-center justify-between">
<p class="text-sm font-medium">Lỗi web</p>
<span class="text-base-content/80 text-xs">
10%
</span>
</div>
<progress max="100" value="10"
class="progress progress-error mt-0.5 h-1.5 align-super"></progress>
<div class="-mt-1.5 flex items-center justify-between">
<span class="text-sm font-medium">1</span>
<span class="text-base-content/80 text-xs">
5
</span>
</div>
</div>
</div>
<div class="card bg-base-100 cursor-pointer shadow transition-all hover:shadow-md">
<div class="p-4">
<div class="flex items-center justify-between">
<div class="bg-base-200 rounded-box inline-flex items-center justify-center p-2">
<span data-lucide="badge-dollar-sign" class="size-5"></span>
</div>
<a href="#" class="btn btn-sm hura-btn-outline">Xem</a>
</div>
<div class="mt-3 flex items-center justify-between">
<p class="text-sm font-medium">Đơn trả góp mới</p>
<span class="text-base-content/80 text-xs">
90%
</span>
</div>
<progress max="100" value="90"
class="progress progress-info mt-0.5 h-1.5 align-super"></progress>
<div class="-mt-1.5 flex items-center justify-between">
<span class="text-sm font-medium">9</span>
<span class="text-base-content/80 text-xs">
10
</span>
</div>
</div>
</div>
</div>
<!-- box dialog chỉ mục -->
<dialog id="box-add-indicator" class="modal p-0">
<div class="modal-box bg-transparent p-0 shadow-none max-w-xl">
<div class="bg-base-100 rounded-box p-4">
<div class="flex items-center justify-between">
<b>Thêm danh sách việc cần làm</b>
<form method="dialog">
<button class="btn btn-xs btn-circle btn-ghost" aria-label="Close">
<i data-lucide="x" class="text-base-content/80 size-4"></i>
</button>
</form>
</div>
<div class="mt-2 -mb-px">
<label class="label py-2 flex items-center gap-2">
<input type="checkbox" name="" class="checkbox checkbox-sm rounded-sm hura-checkbox"
id="">
<span class="label-text text-black">Đơn hàng mới</span>
</label>
<label class="label py-2 flex items-center gap-2">
<input type="checkbox" name="" class="checkbox checkbox-sm rounded-sm hura-checkbox"
id="">
<span class="label-text text-black">Liên hệ mới của khách hàng</span>
</label>
<label class="label py-2 flex items-center gap-2">
<input type="checkbox" name="" class="checkbox checkbox-sm rounded-sm hura-checkbox"
id="">
<span class="label-text text-black">Bài luận mới chưa duyệt</span>
</label>
<label class="label py-2 flex items-center gap-2">
<input type="checkbox" name="" class="checkbox checkbox-sm rounded-sm hura-checkbox"
id="">
<span class="label-text text-black">Lỗi website</span>
</label>
<label class="label py-2 flex items-center gap-2">
<input type="checkbox" name="" class="checkbox checkbox-sm rounded-sm hura-checkbox"
id="">
<span class="label-text text-black">Đơn hàng chưa xử lý</span>
</label>
<label class="label py-2 flex items-center gap-2">
<input type="checkbox" name="" class="checkbox checkbox-sm rounded-sm hura-checkbox"
id="">
<span class="label-text text-black">Đơn hàng trả góp mới</span>
</label>
<button type="submit" class="btn hura-btn-active btn-sm mt-3">Lưu lại</button>
</div>
</div>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</div>
<!-- tóm tắt -->
<div class="box mt-7">
<div class="flex items-center">
<div class="flex items-center gap-2">
<i data-lucide="file-pen-line" class="size-5"></i>
<b class="text-lg">Tóm tắt</b>
</div>
</div>
<div class="grid gap-3 lg:grid-cols-2 xl:grid-cols-4 mt-3">
<!-- đơn hàng mới -->
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium h-[40px]">
Đơn hàng mới
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
100
</p>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<i data-lucide="circle-dollar-sign" class="size-5"></i>
</div>
</div>
<div class="flex items-center gap-3 mt-2">
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
<i data-lucide="arrow-up" class="size-3.5"></i>
10.8%
</div>
<p class="text-base-content/60 text-sm">
Hôm qua
</p>
</div>
</div>
</div>
<!-- Liên hệ khách hàng -->
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium h-[40px]">
Khách hàng liên hệ
qua website
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
12
</p>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<i data-lucide="phone" class="size-5"></i>
</div>
</div>
<div class="flex items-center gap-3 mt-2">
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
<i data-lucide="arrow-up" class="size-3.5"></i>
5.4%
</div>
<p class="text-base-content/60 text-sm">
Hôm qua
</p>
</div>
</div>
</div>
<!-- comment mới được phê duyệt -->
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium h-[40px]">
Bình luận mới dược phê duyệt
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
20
</p>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<i data-lucide="message-circle-more" class="size-5"></i>
</div>
</div>
<div class="flex items-center gap-3 mt-2">
<div class="badge badge-soft badge-error badge-sm gap-0.5 px-1 font-medium">
<i data-lucide="arrow-down" class="size-3.5"></i>
-6.8%
</div>
<p class="text-base-content/60 text-sm">
Hôm qua
</p>
</div>
</div>
</div>
<!-- lỗi web -->
<div class="card bg-base-100 shadow">
<div class="card-body gap-2">
<div class="flex items-start justify-between gap-2 text-sm">
<div>
<p class="text-base-content/80 font-medium h-[40px]">
Lỗi website
</p>
<div class="mt-3 flex items-center gap-2">
<p class="inline text-2xl font-semibold">
30
</p>
</div>
</div>
<div class="bg-base-200 rounded-box flex items-center p-2">
<i data-lucide="bug" class="size-5"></i>
</div>
</div>
<div class="flex items-center gap-3 mt-2">
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
<i data-lucide="arrow-up" class="size-3.5"></i>
8.5%
</div>
<p class="text-base-content/60 text-sm">
Hôm qua
</p>
</div>
</div>
</div>
</div>
<!-- End: Dashboard Stats Widget -->
<div class="mt-3 grid grid-cols-1 gap-3 xl:grid-cols-12">
<div class="xl:col-span-7">
<!-- Start: Revenue Statistic -->
<div class="card bg-base-100 shadow">
<div class="card-body px-0 pb-0">
<div class="flex items-start justify-between">
<span class="font-medium">
Doanh thu
</span>
<div class="tabs tabs-box tabs-xs hidden sm:block">
<div class="tab false px-3">Ngày</div>
<div class="tab false px-3">Tháng</div>
<div class="tab tab-active px-3">Năm</div>
</div>
</div>
<div class="mt-3">
<div class="flex items-center gap-3">
<span class="text-4xl font-semibold">
184.78K
</span>
<span class="text-success font-medium">
+3.24%
</span>
</div>
<span class="text-base-content/60 text-sm">
Tổng doanh thu trong năm nay
</span>
</div>
<div id="revenue-statics-chart"></div>
</div>
</div>
<!-- End: Revenue Statistic -->
</div>
<div class="xl:col-span-5">
<!-- Start: Customer Acquisition -->
<div class="card bg-base-100 shadow">
<div class="card-body p-0">
<div class="flex items-center justify-between">
<span class="font-medium">
Truy cập khách hàng
</span>
<div class="inline-flex items-center gap-2">
<div class="text-base-content/60 w-6 border border-dashed"></div>
<span class="text-base-content/80 text-xs">
Dự đoán
</span>
</div>
</div>
<div class="mt-4">
<div class="divide-base-300 grid grid-cols-2 gap-5 sm:grid-cols-3 sm:divide-x">
<div class="text-center">
<p>Advertise</p>
<p class="mt-0.5 text-xl font-medium">
$148
</p>
<div class="text-success mt-0.5 inline-flex items-center gap-1">
<i data-lucide="arrow-up" class="size-3"></i>
<p class="text-xs">4.78%</p>
</div>
</div>
<div class="hidden text-center sm:block">
<p>Customers</p>
<p class="mt-0.5 text-xl font-medium">
427
</p>
<div class="text-success mt-0.5 inline-flex items-center gap-1">
<i data-lucide="arrow-up" class="size-3"></i>
<p class="text-xs">3.15%</p>
</div>
</div>
</div>
</div>
<div class="-mt-25">
<div id="customer-acquisition-chart"></div>
</div>
</div>
</div>
<!-- End: Customer Acquisition -->
</div>
</div>
</div>
<div class="mt-3">
<div class="card bg-base-100 shadow-md">
<div class="card-body p-4">
<div class="flex items-center gap-2">
<i data-lucide="megaphone" class="size-5"></i>
<h3 class="card-title text-lg">Hoạt động gần đây</h3>
</div>
<ul id="stream" class="space-y-2 overflow-auto max-h-[270px] mt-3">
<!-- item -->
<li class="alert py-1 alert-success">
<span>✅</span>
<div>
<p class="font-medium">Đơn hàng #12345 đã được xử lý</p>
<span class="text-xs opacity-70">Vừa xong</span>
</div>
</li>
<li class="alert py-1 alert-info">
<span>💬</span>
<div>
<p class="font-medium">Khách hàng Nguyễn Văn A đã gửi phản hồi</p>
<span class="text-xs opacity-70">3 phút trước</span>
</div>
</li>
<li class="alert py-1 alert-warning">
<span>⚠️</span>
<div>
<p class="font-medium">Lỗi kết nối với cổng thanh toán</p>
<span class="text-xs opacity-70">4 phút trước</span>
</div>
</li>
<li class="alert py-1">
<span>📰</span>
<div>
<p class="font-medium">Tin tức mới: Xu hướng mua sắm trực tuyến 2024</p>
<span class="text-xs opacity-70">5 phút trước</span>
</div>
</li>
<li class="alert py-1 alert-error">
<i data-lucide="ban" class="size-4"></i>
<div>
<p class="font-medium">Đơn hàng #12345 đã bị hủy</p>
<span class="text-xs opacity-70">Vừa xong</span>
</div>
</li>
<li class="alert py-1 alert-info">
<span>💬</span>
<div>
<p class="font-medium">Khách hàng Nguyễn Văn A đã gửi phản hồi</p>
<span class="text-xs opacity-70">3 phút trước</span>
</div>
</li>
<li class="alert py-1 alert-warning ">
<span>⚠️</span>
<div>
<p class="font-medium">Lỗi kết nối với cổng thanh toán</p>
<span class="text-xs opacity-70">4 phút trước</span>
</div>
</li>
<li class="alert py-1">
<span>📰</span>
<div>
<p class="font-medium">Tin tức mới: Xu hướng mua sắm trực tuyến 2024</p>
<span class="text-xs opacity-70">5 phút trước</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="w-[450px]">
<!-- ghi nhắc việc -->
<div class="bg-white shadow p-3 rounded-sm">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<i data-lucide="notebook-pen" class="size-5"></i>
<b class="">Ghi nhắc việc làm cá nhân</b>
</div>
<input type="date" value="2025-11-26" class="input w-1/3" />
</div>
<form class="flex items-center justify-between mt-3">
<input type="text" placeholder="Nhập việc cần làm của bạn" class="input input-sm w-[80%]" />
<button type="button" class="btn hura-btn-active btn-sm">Tạo mới</button>
</form>
<div class="overflow-x-auto border border-base-300 mt-3 rounded-sm">
<table class="table table-sm">
<thead class="bg-base-200 text-black font-bold">
<td> STT </td>
<td> Nội dung </td>
<td> Hết hạn </td>
<td> Trạng thái </td>
<td>Sửa</td>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
<td> 28/11/2023 </td>
<td>
<div class="badge badge-success badge-sm badge-soft whitespace-nowrap">Đang triển khai
</div>
</td>
<td>
<div class="flex items-center gap-2">
<a href="" class="btn btn-soft btn-xs btn-square hura-btn-outline">
<i data-lucide="pencil" class="size-3"></i>
</a>
<a href="" class="btn btn-soft btn-xs btn-square btn-error">
<i data-lucide="trash-2" class="size-3"></i>
</a>
</div>
</td>
</tr>
<tr>
<td> 2 </td>
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
<td> 28/11/2023 </td>
<td>
<div class="badge badge-error badge-sm badge-soft whitespace-nowrap">Đang triển khai
</div>
</td>
<td>
<div class="flex items-center gap-2">
<a href="" class="btn btn-soft btn-xs btn-square hura-btn-outline">
<i data-lucide="pencil" class="size-3"></i>
</a>
<a href="" class="btn btn-soft btn-xs btn-square btn-error">
<i data-lucide="trash-2" class="size-3"></i>
</a>
</div>
</td>
</tr>
<tr>
<td> 3 </td>
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
<td> 28/11/2023 </td>
<td>
<div class="badge badge-sm badge-ghost whitespace-nowrap">Đang triển khai</div>
</td>
<td>
<div class="flex items-center gap-2">
<a href="" class="btn btn-soft btn-xs btn-square hura-btn-outline">
<i data-lucide="pencil" class="size-3"></i>
</a>
<a href="" class="btn btn-soft btn-xs btn-square btn-error">
<i data-lucide="trash-2" class="size-3"></i>
</a>
</div>
</td>
</tr>
<tr>
<td> 4 </td>
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
<td> 28/11/2023 </td>
<td>
<div class="badge badge-info badge-sm badge-soft whitespace-nowrap">Đang triển khai
</div>
</td>
<td>
<div class="flex items-center gap-2">
<a href="" class="btn btn-soft btn-xs btn-square hura-btn-outline">
<i data-lucide="pencil" class="size-3"></i>
</a>
<a href="" class="btn btn-soft btn-xs btn-square btn-error">
<i data-lucide="trash-2" class="size-3"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ghi chú -->
<div class="bg-white shadow p-3 rounded-sm mt-3">
<div class="flex items-center gap-2 mb-3">
<i data-lucide="notebook-pen" class="size-5"></i>
<b>Ghi chú nhanh</b>
</div>
<textarea id="noteInput" class="textarea textarea-bordered w-full" placeholder="Nhập ghi chú..."></textarea>
<button class="btn btn-sm hura-btn-active mt-2">
+ Thêm
</button>
<div class="border overflow-x-auto border-base-200 mt-3 rounded-sm">
<table class="table table-sm">
<thead>
<tr class="bg-base-300 text-black font-bold">
<td class="w-[50px]">STT</td>
<td>Ghi chú</td>
<td class="w-[80px]">Công cụ</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nội dung ghi chú</td>
<td>
<div class="flex items-center gap-2">
<a href="" class="btn btn-soft btn-xs btn-square btn-hura-outline">
<i data-lucide="pencil" class="size-3"></i>
</a>
<a href="" class="btn btn-soft btn-xs btn-square btn-error">
<i data-lucide="trash-2" class="size-3"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Ticket -->
<div class="bg-white shadow p-3 rounded-sm mt-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 mb-3">
<i data-lucide="life-buoy" class="size-5"></i>
<b>Hỗ trợ từ Hurasoft</b>
</div>
<button type="button" class="btn btn-sm hura-btn-active"
onclick="document.getElementById('form-support')?.showModal()">
<i data-lucide="plus-circle" class="size-3"></i>
<span>Tạo hỗ trợ</span>
</button>
</div>
<div class="mt-3 border-base-300 border rounded-sm overflow-x-auto whitespace-nowrap">
<table class="table table-sm">
<thead>
<tr class="bg-base-300 font-bold text-black">
<td>STT</td>
<td>Yêu cầu</td>
<td>Phản hồi cuối</td>
<td>Trạng thái</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<div class="flex gap-2">
<p>[Tk001]</p>
<a href="" class="hura-text-blue underline font-bold">Sửa lỗi hiển thị web</a>
<a href="" class="text-red-500">[2 phản hồi]</a>
</div>
</td>
<td>
<div class="flex gap-2">
<p class="text-green-700">[Hura]</p>
<b>Hồng</b>
</div>
<p>
<p>15-12-2025, 10:10 am (0 ngày)</p>
</p>
</td>
<td>
<div class="flex gap-2">
<select name="" id="" class="select select-sm w-[100px]">
<option value="">Trạng thái</option>
<option value="">Đã xong</option>
<option value="">Đang làm</option>
<option value="">Chờ duyệt</option>
<option value="">Cần làm lại</option>
<option value="">Hủy bỏ</option>
</select>
<a href="" class="btn btn-sm hura-btn-active">xem</a>
</div>
</td>
</tr>
<tr>
<td>1</td>
<td>
<div class="flex gap-2">
<p>[Tk001]</p>
<a href="" class="hura-text-blue underline font-bold">Sửa lỗi hiển thị web</a>
<a href="" class="text-red-500">[2 phản hồi]</a>
</div>
</td>
<td>
<div class="flex gap-2">
<p class="text-green-700">[Hura]</p>
<b>Ngọc</b>
</div>
<p>15-12-2025, 10:10 am (0 ngày)</p>
</td>
<td>
<div class="flex gap-2">
<select name="" id="" class="select select-sm w-[100px]">
<option value="">Trạng thái</option>
<option value="">Đã xong</option>
<option value="">Đang làm</option>
<option value="">Chờ duyệt</option>
<option value="">Cần làm lại</option>
<option value="">Hủy bỏ</option>
</select>
<a href="" class="btn btn-sm hura-btn-active">xem</a>
</div>
</td>
</tr>
<tr>
<td>1</td>
<td>
<div class="flex gap-2">
<p>[Tk001]</p>
<a href="" class="hura-text-blue underline font-bold">Sửa lỗi hiển thị web</a>
<a href="" class="text-red-500">[2 phản hồi]</a>
</div>
</td>
<td>
<div class="flex gap-2">
<p class="text-red-500">[KH]</p>
<b>Kh@gmail.com</b>
</div>
<p>15-12-2025, 10:10 am (0 ngày)</p>
</td>
<td>
<div class="flex gap-2">
<select name="" id="" class="select select-sm w-[100px]">
<option value="">Trạng thái</option>
<option value="">Đã xong</option>
<option value="">Đang làm</option>
<option value="">Chờ duyệt</option>
<option value="">Cần làm lại</option>
<option value="">Hủy bỏ</option>
</select>
<a href="" class="btn btn-sm hura-btn-active">xem</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- box form hỗ trợ -->
<dialog id="form-support" class="modal p-0">
<div class="modal-box bg-transparent p-0 shadow-none max-w-2xl">
<div class="bg-base-100 rounded-box p-4">
<div class="flex items-center justify-between">
<b class="text-lg">Thêm hỗ trợ</b>
<form method="dialog">
<button class="btn btn-xs btn-circle btn-ghost" aria-label="Close">
<i data-lucide="x" class="text-base-content/80 size-4"></i>
</button>
</form>
</div>
<div class="mt-5">
<label for="" class="block font-bold">Tên hỗ trợ <span class="text-red-500">*</span></label>
<input type="text" value="Test" placeholder="Tên hỗ trợ"
class="input mt-3 shadow w-full rounded-sm">
</div>
<div class="mt-5">
<label for="" class="block font-bold">Mô tả hỗ trợ <span
class="text-red-500">*</span></label>
<textarea type="text" value="Test" placeholder="Mô tả hỗ trợ"
class="textarea mt-3 shadow w-full h-[100px] rounded-sm"></textarea>
</div>
<div class="mt-5">
<div class="flex items-center gap-3">
<label for="" class="font-bold">Tải file đính kèm</label>
<div class="box-note tooltip">
<i data-lucide="circle-question-mark"
class="size-4 cursor-pointer text-orange-400"></i>
<div class="tooltip-content">
Quý khách hàng nên tải file đính kèm mô tả chi tiết công việc cần hỗ trợ, sẽ
giúp chúng tôi hỗ trợ quý khách giải quyết vấn đề nhanh hơn.!
</div>
</div>
</div>
<div id="uploadfile-support" class="mt-3"></div>
</div>
<div class="mt-5">
<button type="submit" class="btn btn-sm hura-btn-active"><i data-lucide="send"
class="size-3"></i>
Gửi hỗ trợ</button>
</div>
</div>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</div>
<!-- liên kết nhanh -->
<div class="bg-white shadow p-3 rounded-sm mt-3">
<div class="flex items-center gap-2 justify-between">
<b class="">Liên kết nhanh</b>
<button type="button" class="btn btn-sm hura-btn-active"
onclick="document.getElementById('form-quickLink')?.showModal()">
<i data-lucide="plus-circle" class="size-3"></i>
<span>Thêm link</span>
</button>
</div>
<div class="mt-5 border border-base-300 rounded-sm">
<table class="">
</table>
</div>
<div class="mt-5 grid grid-cols-1 gap-3">
<div class="p-2 flex items-center justify-between bg-base-100 rounded-box hura-shadow-blue shadow-lg">
<a href="/order" class="flex items-center gap-2">
<i data-lucide="store" class="size-4"></i>
<span>Danh sách đơn hàng</span>
</a>
<div class="flex items-center gap-2">
<a href="" class="btn btn-soft btn-xs btn-square hura-btn-outline">
<i data-lucide="pencil" class="size-3"></i>
</a>
<a href="" class="btn btn-soft btn-xs btn-square btn-error">
<i data-lucide="trash-2" class="size-3"></i>
</a>
</div>
</div>
<div class="p-2 flex items-center justify-between bg-base-100 rounded-box hura-shadow-blue shadow-lg">
<a href="/product" class="flex items-center gap-2">
<i data-lucide="package" class="size-4"></i>
<span>Danh sách sản phẩm</span>
</a>
<div class="flex items-center gap-2">
<a href="" class="btn btn-soft btn-xs btn-square hura-btn-outline">
<i data-lucide="pencil" class="size-3"></i>
</a>
<a href="" class="btn btn-soft btn-xs btn-square btn-error">
<i data-lucide="trash-2" class="size-3"></i>
</a>
</div>
</div>
<div class="p-2 flex items-center justify-between bg-base-100 rounded-box hura-shadow-blue shadow-lg">
<a href="/customer" class="flex items-center gap-2">
<i data-lucide="user" class="size-4"></i>
<span>Danh sách khách hàng</span>
</a>
<div class="flex items-center gap-2">
<a href="" class="btn btn-soft btn-xs btn-square hura-btn-outline">
<i data-lucide="pencil" class="size-3"></i>
</a>
<a href="" class="btn btn-soft btn-xs btn-square btn-error">
<i data-lucide="trash-2" class="size-3"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>