143 lines
3.8 KiB
TypeScript
143 lines
3.8 KiB
TypeScript
import {
|
|
PencilSquareIcon,
|
|
PlusIcon,
|
|
TrashIcon,
|
|
} from '@heroicons/react/24/solid'
|
|
import type { ConfigColumns } from 'datatables.net-dt'
|
|
import type { DataTableSlots } from 'datatables.net-react'
|
|
import { useState } from 'react'
|
|
import { Link, useRouteLoaderData } from 'react-router'
|
|
|
|
import type { TAdResponse } from '~/apis/common/get-ads'
|
|
import { DialogDelete } from '~/components/dialog/delete'
|
|
import { Button } from '~/components/ui/button'
|
|
import { UiTable } from '~/components/ui/table'
|
|
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
|
import type { loader } from '~/routes/_admin.lg-admin._dashboard.advertisements._index'
|
|
import { formatDate, formatNumberWithPeriods } from '~/utils/formatter'
|
|
|
|
export const AdvertisementsPage = () => {
|
|
const loaderData = useRouteLoaderData<typeof loader>(
|
|
'routes/_admin.lg-admin._dashboard.advertisements._index',
|
|
)
|
|
const { adsData: dataTable } = loaderData || {}
|
|
const [selectedAds, setSelectedAds] = useState<TAdResponse>()
|
|
|
|
const dataColumns: ConfigColumns[] = [
|
|
{
|
|
title: 'No',
|
|
render: (
|
|
_data: unknown,
|
|
_type: unknown,
|
|
_row: unknown,
|
|
meta: { row: number },
|
|
) => {
|
|
return meta.row + 1
|
|
},
|
|
},
|
|
{ title: 'Banner', data: 'image_url' },
|
|
{ title: 'Link', data: 'url' },
|
|
{
|
|
title: 'Tanggal Mulai',
|
|
data: 'start_date',
|
|
render: (data: string) => {
|
|
return formatDate(data)
|
|
},
|
|
},
|
|
{
|
|
title: 'Tanggal Berakhir',
|
|
data: 'end_date',
|
|
render: (data: string) => {
|
|
return formatDate(data)
|
|
},
|
|
},
|
|
{
|
|
title: 'Jumlah Klik',
|
|
data: 'clicked',
|
|
},
|
|
{
|
|
title: 'Action',
|
|
data: 'id',
|
|
},
|
|
]
|
|
const dataSlot: DataTableSlots = {
|
|
1: (value: string) => {
|
|
return (
|
|
<img
|
|
src={value}
|
|
alt={value}
|
|
className="aspect-[150/1] h-[50px] rounded object-contain"
|
|
/>
|
|
)
|
|
},
|
|
5: (value: number) => formatNumberWithPeriods(value),
|
|
6: (value: string, _type: unknown, data: TAdResponse) => (
|
|
<div className="flex space-x-2">
|
|
<Button
|
|
as="a"
|
|
href={`/lg-admin/advertisements/update/${value}`}
|
|
size="icon"
|
|
title="Update Spanduk Iklan"
|
|
>
|
|
<PencilSquareIcon className="size-4" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="icon"
|
|
variant="danger"
|
|
onClick={() => setSelectedAds(data)}
|
|
title="Hapus Spanduk Iklan"
|
|
>
|
|
<TrashIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
),
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<TitleDashboard title="Spanduk Iklan" />
|
|
|
|
<div className="mb-8 flex items-end justify-between gap-5">
|
|
<div className="flex-1">{/* TODO: Filter */}</div>
|
|
<Button
|
|
as={Link}
|
|
to="/lg-admin/advertisements/create"
|
|
size="lg"
|
|
className="text-md h-[42px] px-4"
|
|
>
|
|
<PlusIcon className="size-8" /> Buat Spanduk Iklan
|
|
</Button>
|
|
</div>
|
|
|
|
<UiTable
|
|
data={dataTable}
|
|
columns={dataColumns}
|
|
slots={dataSlot}
|
|
title="Daftar Spanduk Iklan"
|
|
/>
|
|
|
|
<DialogDelete
|
|
selectedId={selectedAds?.id}
|
|
close={() => setSelectedAds(undefined)}
|
|
title="Spanduk iklan"
|
|
fetcherAction={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
|
|
>
|
|
<img
|
|
src={selectedAds?.image_url}
|
|
alt={selectedAds?.image_url}
|
|
className="aspect-[150/1] h-[50px] rounded object-contain"
|
|
/>
|
|
<Button
|
|
as={Link}
|
|
to={selectedAds?.url || ''}
|
|
variant="link"
|
|
size="fit"
|
|
>
|
|
{selectedAds?.url}
|
|
</Button>
|
|
</DialogDelete>
|
|
</div>
|
|
)
|
|
}
|