<svelte:head>
<title>หน้าหลัก</title>
</svelte:head>
<header class="flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full text-sm">
<nav
class="mt-6 relative max-w-7xl w-full bg-white border border-gray-200 rounded-[36px] mx-2 py-3 px-4 md:flex md:items-center md:justify-between md:py-0 md:px-6 lg:px-8 xl:mx-auto dark:bg-gray-800 dark:border-gray-700"
aria-label="Global"
>
<div class="flex items-center justify-between">
<a class="flex-none text-xl font-semibold dark:text-white" href="#" aria-label="Brand"
>My Application</a
>
<div class="md:hidden">
<button
type="button"
class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-full border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800"
data-hs-collapse="#navbar-collapse-with-animation"
aria-controls="navbar-collapse-with-animation"
aria-label="Toggle navigation"
>
<svg
class="hs-collapse-open:hidden w-4 h-4"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
/>
</svg>
<svg
class="hs-collapse-open:block hidden w-4 h-4"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
/>
</svg>
</button>
</div>
</div>
<div
id="navbar-collapse-with-animation"
class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block"
>
<div
class="flex flex-col gap-y-4 gap-x-0 mt-5 md:flex-row md:items-center md:justify-end md:gap-y-0 md:gap-x-7 md:mt-0 md:pl-7"
>
<a class="font-medium text-blue-600 md:py-6 dark:text-blue-500" href="#">Home</a>
<a
class="flex items-center gap-x-2 font-medium text-gray-500 hover:text-blue-600 md:border-l md:border-gray-300 md:my-6 md:pl-6 dark:border-gray-700 dark:text-gray-400 dark:hover:text-blue-500"
href="#">
<svg
class="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"
/>
</svg>
Log out
</a>
</div>
</div>
</nav>
</header>
<!-- Table Section -->
<div class="max-w-[85rem] px-4 py-8 sm:px-6 lg:px-8 lg:py-8 mx-auto">
{#if isError}
<div class="bg-yellow-50 mb-4 border border-yellow-200 rounded-md p-4" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg
class="h-4 w-4 text-yellow-400 mt-0.5"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
/>
</svg>
</div>
<div class="ml-4">
<h3 class="text-sm text-yellow-800 font-semibold">เกิดข้อผิดพลาด</h3>
<div class="mt-1 text-sm text-yellow-700">
ไม่สามารถดำเนินการได้ กรุณาตรวจสอบข้อมูลแล้วลองใหม่อีกครั้ง.
</div>
</div>
</div>
</div>
{/if}
<!-- Chart -->
<div class="grid grid-cols-2 gap-4">
<div>
<div
class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7] mb-4"
>
<div class="p-4 md:p-5">
<div style="height: 40vh;">
<canvas id="chart" />
</div>
</div>
</div>
</div>
<div>
<div
class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7] mb-4"
>
<div class="p-4 md:p-5">
<div style="height:40vh;">
<canvas id="chart2" />
</div>
</div>
</div>
</div>
</div>
<!-- End Chart -->
<!-- Card -->
<div class="flex flex-col">
<div class="-m-1.5 overflow-x-auto">
<div class="p-1.5 min-w-full inline-block align-middle">
<div
class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden dark:bg-slate-900 dark:border-gray-700"
>
<!-- Header -->
<div
class="px-6 py-4 grid gap-3 md:flex md:justify-between md:items-center border-b border-gray-200 dark:border-gray-700"
>
<div>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Users</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Add users, edit and more.</p>
</div>
<div>
<div class="inline-flex gap-x-2">
<a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800"
href="#">
แสดงทั้งหมด
</a>
<div>
<select
class="py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400"
>
<option value="" selected>ทุกหน่วยงาน</option>
</select>
</div>
<div>
<label for="hs-trailing-button-add-on-with-icon" class="sr-only">ค้นหา</label>
<div class="flex rounded-md shadow-sm">
<input
type="text"
placeholder="ระบุคำค้นหา..."
id="hs-trailing-button-add-on-with-icon"
name="hs-trailing-button-add-on-with-icon"
class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-l-md text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400"
/>
<button
type="button"
class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] rounded-r-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all text-sm"
>
<svg
class="h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Header -->
<!-- Table -->
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-slate-800">
<tr>
<th scope="col" class="pl-6 pr-6 py-3 text-left">
<div class="flex items-center gap-x-2">
<span
class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200"
>
Username
</span>
</div>
</th>
<th scope="col" class="px-6 py-3 text-left">
<div class="flex items-center gap-x-2">
<span
class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200"
>
Name
</span>
</div>
</th>
<th scope="col" class="px-6 py-3 text-left">
<div class="flex items-center gap-x-2">
<span
class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200"
>
Department
</span>
</div>
</th>
<th scope="col" class="px-6 py-3 text-left">
<div class="flex items-center gap-x-2">
<span
class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200"
>
Status
</span>
</div>
</th>
<th scope="col" class="px-6 py-3 text-left">
<div class="flex items-center gap-x-2">
<span
class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200"
>
Role
</span>
</div>
</th>
<th scope="col" class="px-6 py-3 text-right" />
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="h-px w-px whitespace-nowrap">
<div class="pl-6 pr-6 py-3">
<div class="flex items-center gap-x-3">
<div class="grow">
<span class="block text-sm font-semibold text-gray-800 dark:text-gray-200"
></span
>
</div>
</div>
</div>
</td>
<td class="h-px w-72 whitespace-nowrap">
<div class="px-6 py-3">
<span class="block text-sm text-gray-800 dark:text-gray-200"
></span
>
</div>
</td>
<td class="h-px w-px whitespace-nowrap">
<div class="px-6 py-3">
</div>
</td>
<td class="h-px w-px whitespace-nowrap">
<div class="px-6 py-3">
<span class="text-sm text-gray-500 uppercase">
</span>
</div>
</td>
<td class="h-px w-px whitespace-nowrap">
<div class="px-6 py-3">
<span class="uppercase">{user.role}</span>
</div>
</td>
<td class="h-px w-px whitespace-nowrap">
<div class="px-6 py-1.5 text-center">
<div class="inline-flex rounded-md shadow-sm">
<button
type="button"
class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none transition-all text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400">
แก้ไข
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- End Table -->
<!-- Footer -->
<div
class="px-6 py-4 grid gap-3 md:flex md:justify-between md:items-center border-t border-gray-200 dark:border-gray-700"
>
<div>
<p class="text-sm text-gray-600 dark:text-gray-400">
<span class="font-semibold text-gray-800 dark:text-gray-200">{totalItems}</span> results
</p>
</div>
<div>
<div class="inline-flex gap-x-2">
<nav class="flex justify-end items-center space-x-2">
<button
class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md"
>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</button>
<button
class="w-10 h-10 text-gray-500 hover:text-blue-600 p-4 inline-flex items-center text-sm font-medium rounded-full">1</button
>
<button
class="text-gray-500 hover:text-blue-600 p-4 inline-flex items-center gap-2 rounded-md"
>
<span class="sr-only">Next</span>
<span aria-hidden="true">»</span>
</button>
</nav>
</div>
</div>
</div>
<!-- End Footer -->
</div>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Table Section -->
Created
October 14, 2023 15:34
-
-
Save siteslave/226daec11df5f1f981868e92ee5dcc76 to your computer and use it in GitHub Desktop.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment