legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: update button styles and improve delete dialog properties in dashboard pages

Browse Source
This commit is contained in:
Ardeman 2025-03-13 07:29:03 +08:00
parent 6878da0db2
commit d77ea01c59
10 changed files with 195 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/apis/admin/delete-subscribe-plan.ts
View File

@ -9,14 +9,12 @@ const subscribePlanResponseSchema = z.object({
}),
})
type TTSubscribePlanId = Pick<TSubscribePlanSchema, 'id'>
type TParameters = {
payload: TTSubscribePlanId
id: TSubscribePlanSchema['id']
} & THttpServer
export const deleteSubscribePlanRequest = async (parameters: TParameters) => {
const { payload, ...restParameters } = parameters
const { id } = payload
const { id, ...restParameters } = parameters
try {
const { data } = await HttpServer(restParameters).delete(
`/api/subscribe-plan/${id}/delete`,

2
app/components/ui/button.tsx
View File

@ -12,7 +12,7 @@ const buttonVariants = cva(
newsPrimary:
'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]',
newsDanger:
'bg-red-500 text-white text-lg hover:bg-red-600 hover:shadow transition active:bg-red-700',
'bg-[#EF4444] text-white text-lg hover:shadow transition active:bg-[#FEE2E2] hover:bg-[#FCA5A5]',
newsPrimaryOutline:
'border-[3px] bg-[#2E2F7C] border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
newsSecondary:

22
app/pages/dashboard-advertisements/dialog-delete.tsx
View File

@ -13,12 +13,12 @@ import type { TAdResponse } from '~/apis/common/get-ads'
import { Button } from '~/components/ui/button'
type TProperties = {
selectedAds?: TAdResponse
setSelectedAds: Dispatch<SetStateAction<TAdResponse | undefined>>
selectedItem?: TAdResponse
setSelectedItem: Dispatch<SetStateAction<TAdResponse | undefined>>
}
export const DialogDelete = (properties: TProperties) => {
const { selectedAds, setSelectedAds } = properties || {}
const { selectedItem, setSelectedItem } = properties || {}
const fetcher = useFetcher()
useEffect(() => {
@ -28,7 +28,7 @@ export const DialogDelete = (properties: TProperties) => {
}
if (fetcher.data?.success === true) {
setSelectedAds(undefined)
setSelectedItem(undefined)
toast.success('Banner iklan berhasil dihapus!')
return
}
@ -37,10 +37,10 @@ export const DialogDelete = (properties: TProperties) => {
return (
<Dialog
open={!!selectedAds}
open={!!selectedItem}
onClose={() => {
if (fetcher.state === 'idle') {
setSelectedAds(undefined)
setSelectedItem(undefined)
}
}}
className="relative z-50"
@ -60,23 +60,23 @@ export const DialogDelete = (properties: TProperties) => {
</DialogTitle>
<Description className="space-y-1 text-center text-[#565658]">
<img
src={selectedAds?.image_url}
alt={selectedAds?.image_url}
src={selectedItem?.image_url}
alt={selectedItem?.image_url}
className="aspect-[150/1] h-[50px] rounded object-contain"
/>
<Button
as={Link}
to={selectedAds?.url || ''}
to={selectedItem?.url || ''}
variant="link"
size="fit"
>
{selectedAds?.url}
{selectedItem?.url}
</Button>
</Description>
<div className="flex justify-end">
<fetcher.Form
method="POST"
action={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
action={`/actions/admin/advertisements/delete/${selectedItem?.id}`}
className="grid"
>
<Button

6
app/pages/dashboard-advertisements/index.tsx
View File

@ -57,7 +57,6 @@ export const AdvertisementsPage = () => {
<Button
as="a"
href={`/lg-admin/advertisements/update/${value}`}
className=""
size="icon"
title="Update Banner Iklan"
>
@ -86,6 +85,7 @@ export const AdvertisementsPage = () => {
as={Link}
to="/lg-admin/advertisements/create"
size="lg"
className="text-md h-[42px] px-4"
>
<PlusIcon className="h-8 w-8" /> Buat Banner Iklan
</Button>
@ -99,8 +99,8 @@ export const AdvertisementsPage = () => {
/>
<DialogDelete
selectedAds={selectedAds}
setSelectedAds={setSelectedAds}
selectedItem={selectedAds}
setSelectedItem={setSelectedAds}
/>
</div>
)

2
app/pages/dashboard-categories/index.tsx
View File

@ -81,8 +81,8 @@ export const CategoriesPage = () => {
<Button
as={Link}
to="/lg-admin/categories/create"
className="text-md h-[42px] rounded-md"
size="lg"
className="text-md h-[42px] px-4"
>
Buat Kategori
</Button>

2
app/pages/dashboard-contents/index.tsx
View File

@ -107,8 +107,8 @@ export const ContentsPage = () => {
<Button
as={Link}
to="/lg-admin/contents/create"
className="text-md h-[42px] rounded-md"
size="lg"
className="text-md h-[42px] px-4"
>
Buat Artikel
</Button>

90
app/pages/dashboard-subscribe-plan/dialog-delete.tsx Normal file
View File

@ -0,0 +1,90 @@
import {
Description,
Dialog,
DialogBackdrop,
DialogPanel,
DialogTitle,
} from '@headlessui/react'
import { useEffect, type Dispatch, type SetStateAction } from 'react'
import toast from 'react-hot-toast'
import { useFetcher } from 'react-router'
import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
import { Button } from '~/components/ui/button'
import { formatNumberWithPeriods } from '~/utils/formatter'
type TProperties = {
selectedItem?: TSubscribePlanResponse
setSelectedItem: Dispatch<SetStateAction<TSubscribePlanResponse | undefined>>
}
export const DialogDelete = (properties: TProperties) => {
const { selectedItem, setSelectedItem } = properties || {}
const fetcher = useFetcher()
useEffect(() => {
if (fetcher.data?.success === false) {
toast.error(fetcher.data?.message)
return
}
if (fetcher.data?.success === true) {
setSelectedItem(undefined)
toast.success('Subscribe plan berhasil dihapus!')
return
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher.data])
return (
<Dialog
open={!!selectedItem}
onClose={() => {
if (fetcher.state === 'idle') {
setSelectedItem(undefined)
}
}}
className="relative z-50"
transition
>
<DialogBackdrop
className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
transition
/>
<div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
<DialogPanel
transition
className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
>
<DialogTitle className="relative flex justify-start text-xl font-bold">
Anda akan menghapus subscribe plan berikut?
</DialogTitle>
<Description className="space-y-1 text-center text-[#565658]">
<p>{selectedItem?.name}</p>
<p>Length: {selectedItem?.length}</p>
<p>
Harga: Rp. {formatNumberWithPeriods(selectedItem?.price || 0)}
</p>
</Description>
<div className="flex justify-end">
<fetcher.Form
method="POST"
action={`/actions/admin/subscribe-plan/delete/${selectedItem?.id}`}
className="grid"
>
<Button
type="submit"
variant="newsDanger"
className="text-md h-[42px] rounded-md"
disabled={fetcher.state !== 'idle'}
isLoading={fetcher.state !== 'idle'}
>
Hapus
</Button>
</fetcher.Form>
</div>
</DialogPanel>
</div>
</Dialog>
)
}

48
app/pages/dashboard-subscribe-plan/index.tsx
View File

@ -1,5 +1,11 @@
import {
PencilSquareIcon,
PlusIcon,
TrashIcon,
} from '@heroicons/react/20/solid'
import DT from 'datatables.net-dt'
import DataTable from 'datatables.net-react'
import { useState } from 'react'
import { Link, useRouteLoaderData } from 'react-router'
import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
@ -10,10 +16,14 @@ import { TitleDashboard } from '~/components/ui/title-dashboard'
import type { loader } from '~/routes/_admin.lg-admin._dashboard.subscribe-plan._index'
import { formatNumberWithPeriods } from '~/utils/formatter'
import { DialogDelete } from './dialog-delete'
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 || {}
@ -43,7 +53,7 @@ export const SubscribePlanPage = () => {
data: 'length',
},
{
title: 'Price',
title: 'Harga',
data: 'price',
},
{
@ -70,14 +80,25 @@ export const SubscribePlanPage = () => {
data.code === 'basic' ? (
''
) : (
<Button
as="a"
href={`/lg-admin/subscribe-plan/update/${value}`}
className="text-md rounded-md"
size="sm"
>
Update Subscribe Plan
</Button>
<div className="flex space-x-2">
<Button
as="a"
href={`/lg-admin/subscribe-plan/update/${value}`}
size="icon"
title="Update Subscribe Plan"
>
<PencilSquareIcon className="h-4 w-4" />
</Button>
<Button
type="button"
size="icon"
variant="newsDanger"
onClick={() => setSelectedSubscribePlan(data)}
title="Hapus Subscribe Plan"
>
<TrashIcon className="h-4 w-4" />
</Button>
</div>
),
}
return (
@ -88,10 +109,10 @@ export const SubscribePlanPage = () => {
<Button
as={Link}
to="/lg-admin/subscribe-plan/create"
className="text-md h-[42px] rounded-md"
size="lg"
className="text-md h-[42px] px-4"
>
Buat Subscribe Plan
<PlusIcon className="h-8 w-8" /> Buat Subscribe Plan
</Button>
</div>
@ -107,6 +128,11 @@ export const SubscribePlanPage = () => {
}}
title=" Daftar Subscribe Plan"
/>
<DialogDelete
selectedItem={selectedSubscribePlan}
setSelectedItem={setSelectedSubscribePlan}
/>
</div>
)
}

2
app/pages/dashboard-tags/index.tsx
View File

@ -66,8 +66,8 @@ export const TagsPage = () => {
<Button
as={Link}
to="/lg-admin/tags/create"
className="text-md h-[42px] rounded-md"
size="lg"
className="text-md h-[42px] px-4"
>
Buat Tag
</Button>

48
app/routes/actions.admin.subscribe-plan.delete.$id.ts Normal file
View File

@ -0,0 +1,48 @@
import { data } from 'react-router'
import { XiorError } from 'xior'
import { deleteSubscribePlanRequest } from '~/apis/admin/delete-subscribe-plan'
import { handleCookie } from '~/libs/cookies'
import type { Route } from './+types/actions.admin.advertisements.create'
export const action = async ({ request, params }: Route.ActionArgs) => {
const { staffToken: accessToken } = await handleCookie(request)
const { id } = params
try {
const { data: subscribePlanData } = await deleteSubscribePlanRequest({
accessToken,
id,
})
return data(
{
success: true,
subscribePlanData,
},
{
status: 200,
statusText: 'OK',
},
)
} catch (error) {
if (error instanceof XiorError) {
return data(
{
success: false,
message: error?.response?.data?.error?.message || error.message,
},
{
status: error?.response?.status || 500,
},
)
}
return data(
{
success: false,
message: 'Internal server error',
},
{ status: 500 },
)
}
}