111 lines
3.7 KiB
TypeScript
111 lines
3.7 KiB
TypeScript
import { Field, Input, Label, Select } from '@headlessui/react'
|
|
|
|
import { SearchIcon } from '~/components/icons/search'
|
|
import { Pagination } from '~/components/ui/pagination'
|
|
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
|
|
|
import { USERS } from './data'
|
|
|
|
type TColorBadge = 'Baru' | 'Premium' | 'Pembayaran'
|
|
|
|
export const UsersPage = () => {
|
|
const getStatusBadge = (status: TColorBadge) => {
|
|
const statusColors = {
|
|
Baru: 'bg-[#DFE5FF] text-[#4C5CA0]',
|
|
Premium: 'bg-[#FFFCAF] text-[#DBCA6E]',
|
|
Pembayaran: 'bg-[#FEC4FF] text-[#CC6EDB]',
|
|
}
|
|
return statusColors[status] || 'bg-gray-200 text-gray-700'
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<TitleDashboard title="Users" />
|
|
{/* filter section */}
|
|
|
|
<div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
|
|
<div className="w-[400px]">
|
|
<Field>
|
|
<Label className="mb-2 block text-sm font-medium">Cari User</Label>
|
|
<div className="relative">
|
|
<Input
|
|
type="text"
|
|
placeholder="Cari Nama"
|
|
className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
|
|
/>
|
|
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
|
<SearchIcon className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="w-[235px]">
|
|
<Field>
|
|
<Label className="mb-2 block text-sm font-medium">Status</Label>
|
|
<Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
|
|
<option>Pilih Status</option>
|
|
<option>Aktif</option>
|
|
<option>Nonaktif</option>
|
|
</Select>
|
|
</Field>
|
|
</div>
|
|
</div>
|
|
|
|
{/* table */}
|
|
<div className="overflow-x-auto">
|
|
<div className="rounded-lg bg-white px-6 py-8 shadow-sm">
|
|
<h2 className="text-xl font-bold text-[#4C5CA0]">Daftar User</h2>
|
|
<table className="min-w-full p-3">
|
|
<thead className="my-5 border-b-3 border-[#C2C2C2]">
|
|
<tr>
|
|
<th className="p-3">No</th>
|
|
<th>Tanggal Daftar</th>
|
|
<th>Nama User</th>
|
|
<th>Email</th>
|
|
<th>Kategori</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{USERS.map((user, index) => (
|
|
<tr
|
|
key={user.id}
|
|
className="border-b-1 border-gray-200 text-center"
|
|
>
|
|
<td className="p-4">{index + 1}</td>
|
|
<td>{user.date}</td>
|
|
<td>
|
|
{user.name}
|
|
<div className="text-sm text-gray-500">
|
|
id: {user.idTransaction}
|
|
</div>
|
|
</td>
|
|
<td>{user.email}</td>
|
|
<td>{user.category}</td>
|
|
<td className="">
|
|
<span
|
|
className={`inline-block min-w-[100px] rounded-full px-2 py-1 text-sm ${getStatusBadge(user.status as TColorBadge)}`}
|
|
>
|
|
{user.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* pagination */}
|
|
<div className="float-end mt-6">
|
|
<Pagination
|
|
currentPage={1}
|
|
totalPages={5}
|
|
onPageChange={() => {}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|