146 lines
4.0 KiB
TypeScript
146 lines
4.0 KiB
TypeScript
import {
|
|
PencilSquareIcon,
|
|
PlusIcon,
|
|
TrashIcon,
|
|
} from '@heroicons/react/24/solid'
|
|
import DT, { type ConfigColumns } from 'datatables.net-dt'
|
|
import DataTable, { type DataTableSlots } from 'datatables.net-react'
|
|
import { useState } from 'react'
|
|
import { Link, useRouteLoaderData } from 'react-router'
|
|
|
|
import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
|
|
import { DialogDelete } from '~/components/dialog/delete'
|
|
import { Button } from '~/components/ui/button'
|
|
import { getStatusBadge, type TColorBadge } from '~/components/ui/color-badge'
|
|
import { UiTable } from '~/components/ui/table'
|
|
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
|
import type { loader } from '~/routes/_admin.lg-admin._dashboard.subscribe-plan._index'
|
|
import { formatNumberWithPeriods } from '~/utils/formatter'
|
|
|
|
export const SubscribePlanPage = () => {
|
|
const loaderData = useRouteLoaderData<typeof loader>(
|
|
'routes/_admin.lg-admin._dashboard.subscribe-plan._index',
|
|
)
|
|
const [selectedSubscribePlan, setSelectedSubscribePlan] =
|
|
useState<TSubscribePlanResponse>()
|
|
|
|
DataTable.use(DT)
|
|
const { subscribePlanData: dataTable } = loaderData || {}
|
|
|
|
const dataColumns: ConfigColumns[] = [
|
|
{
|
|
title: 'No',
|
|
render: (
|
|
_data: unknown,
|
|
_type: unknown,
|
|
_row: unknown,
|
|
meta: { row: number },
|
|
) => {
|
|
return meta.row + 1
|
|
},
|
|
},
|
|
{
|
|
title: 'Nama',
|
|
data: 'name',
|
|
},
|
|
{
|
|
title: 'Kode',
|
|
data: 'code',
|
|
},
|
|
{
|
|
title: 'Durasi',
|
|
data: 'length',
|
|
},
|
|
{
|
|
title: 'Harga',
|
|
data: 'price',
|
|
className: 'dt-type-numeric',
|
|
},
|
|
{
|
|
title: 'Status',
|
|
data: 'status',
|
|
},
|
|
{
|
|
title: 'Action',
|
|
data: 'id',
|
|
},
|
|
]
|
|
const dataSlot: DataTableSlots = {
|
|
4: (value: number) => `Rp. ${formatNumberWithPeriods(value)}`,
|
|
5: (value: number) => (
|
|
<span
|
|
className={`rounded-lg px-2 text-sm ${getStatusBadge(value as TColorBadge)}`}
|
|
>
|
|
{value === 1 ? 'Active' : 'Inactive'}
|
|
</span>
|
|
),
|
|
6: (value: string, _type: unknown, data: TSubscribePlanResponse) =>
|
|
data.code === 'basic' ? (
|
|
''
|
|
) : (
|
|
<div className="flex space-x-2">
|
|
<Button
|
|
as="a"
|
|
href={`/lg-admin/subscribe-plan/update/${value}`}
|
|
size="icon"
|
|
title="Update Paket Berlangganan"
|
|
>
|
|
<PencilSquareIcon className="size-4" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="icon"
|
|
variant="danger"
|
|
onClick={() => setSelectedSubscribePlan(data)}
|
|
title="Hapus Paket Berlangganan"
|
|
>
|
|
<TrashIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
),
|
|
}
|
|
return (
|
|
<div className="relative">
|
|
<TitleDashboard title="Paket Berlangganan" />
|
|
<div className="mb-8 flex items-end justify-between">
|
|
<div className="flex-1">{/* TODO: Filter */}</div>
|
|
<Button
|
|
as={Link}
|
|
to="/lg-admin/subscribe-plan/create"
|
|
size="lg"
|
|
className="text-md h-[42px] px-4"
|
|
>
|
|
<PlusIcon className="size-8" /> Buat Paket Berlangganan
|
|
</Button>
|
|
</div>
|
|
|
|
<UiTable
|
|
data={dataTable || []}
|
|
columns={dataColumns}
|
|
slots={dataSlot}
|
|
options={{
|
|
paging: true,
|
|
searching: true,
|
|
ordering: true,
|
|
info: true,
|
|
}}
|
|
title=" Daftar Paket Berlangganan"
|
|
/>
|
|
|
|
<DialogDelete
|
|
selectedId={selectedSubscribePlan?.id}
|
|
close={() => setSelectedSubscribePlan(undefined)}
|
|
title="Paket Berlangganan"
|
|
fetcherAction={`/actions/admin/subscribe-plan/delete/${selectedSubscribePlan?.id}`}
|
|
>
|
|
<p>{selectedSubscribePlan?.name}</p>
|
|
<p>Length: {selectedSubscribePlan?.length}</p>
|
|
<p>
|
|
Harga: Rp.{' '}
|
|
{formatNumberWithPeriods(selectedSubscribePlan?.price || 0)}
|
|
</p>
|
|
</DialogDelete>
|
|
</div>
|
|
)
|
|
}
|