refactor: update author type to TAuthorResponse in news author component

app/apis/admin/create-subscribe-plan.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
-import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
+import type { TSubscribePlanSchema } from '~/pages/form-subscribe-plan'
 
 const subscribePlanResponseSchema = z.object({
   data: z.object({
@@ -16,9 +16,13 @@ type TParameters = {
 export const createSubscribePlanRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
   try {
+    const transformedPayload = {
+      ...payload,
+      status: Number(payload.status),
+    }
     const { data } = await HttpServer(restParameters).post(
       '/api/subscribe-plan/create',
-      payload,
+      transformedPayload,
     )
     return subscribePlanResponseSchema.parse(data)
   } catch (error) {

app/apis/admin/delete-subscribe-plan.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
-import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
+import type { TSubscribePlanSchema } from '~/pages/form-subscribe-plan'
 
 const subscribePlanResponseSchema = z.object({
   data: z.object({
@@ -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`,

app/apis/admin/delete-tags.ts

@@ -14,7 +14,7 @@ type TParameters = {
   payload: TTagsId
 } & THttpServer
 
-export type TDeleteTagsSchema = z.infer<typeof deleteTagsResponseSchema>
+export type TDeleteTagsResponse = z.infer<typeof deleteTagsResponseSchema>
 export const deleteTagsRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
   const { id } = payload

app/apis/admin/update-subscribe-plan.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
-import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
+import type { TSubscribePlanSchema } from '~/pages/form-subscribe-plan'
 
 const subscribePlanResponseSchema = z.object({
   data: z.object({
@@ -17,9 +17,13 @@ export const updateSubscribePlanRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
   const { id, ...restPayload } = payload
   try {
+    const transformedPayload = {
+      ...restPayload,
+      status: Number(payload.status),
+    }
     const { data } = await HttpServer(restParameters).put(
       `/api/subscribe-plan/${id}/update`,
-      restPayload,
+      transformedPayload,
     )
     return subscribePlanResponseSchema.parse(data)
   } catch (error) {

app/apis/common/get-news.ts

@@ -29,7 +29,7 @@ const dataResponseSchema = z.object({
 })
 
 export type TNewsResponse = z.infer<typeof newsResponseSchema>
-export type TAuthor = z.infer<typeof authorSchema>
+export type TAuthorResponse = z.infer<typeof authorSchema>
 type TParameters = {
   categories?: string[]
   tags?: string[]

app/apis/common/get-subscribe-plan.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const subscribePlanSchema = z.object({
+  id: z.string(),
+  code: z.string(),
+  name: z.string(),
+  length: z.number(),
+  price: z.number(),
+  status: z.number(),
+})
+
+const subscribePlanResponseSchema = z.object({
+  data: z.array(subscribePlanSchema),
+})
+
+export type TSubscribePlanResponse = z.infer<typeof subscribePlanSchema>
+
+export const getSubscribePlan = async (parameters?: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/subscribe-plan`)
+    return subscribePlanResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/common/get-subscriptions.ts

@@ -1,26 +0,0 @@
-import { z } from 'zod'
-
-import { HttpServer, type THttpServer } from '~/libs/http-server'
-
-const subscriptionResponseSchema = z.object({
-  data: z.array(
-    z.object({
-      id: z.string(),
-      code: z.string(),
-      name: z.string(),
-      length: z.number().optional(),
-      price: z.number().optional(),
-      status: z.number().optional(),
-    }),
-  ),
-})
-
-export const getSubscriptions = async (parameters?: THttpServer) => {
-  try {
-    const { data } = await HttpServer(parameters).get(`/api/subscribe-plan`)
-    return subscriptionResponseSchema.parse(data)
-  } catch (error) {
-    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
-    return Promise.reject(error)
-  }
-}

app/components/popup/success-modal.tsx

@@ -117,7 +117,7 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
                         setIsSubscribeOpen(true)
                       }}
                     >
-                      Select Subscription
+                      Select Subscribe Plan
                     </Button>
                   ) : (
                     <Button

app/components/ui/button.tsx

@@ -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:

app/components/ui/card-report.tsx

@@ -16,7 +16,7 @@ type CardReportProperty = {
 export const CardReport = (properties: CardReportProperty) => {
   const { title, amount, icon: Icon, counter, currency } = properties
   return (
-    <div className="rounded bg-white px-4 py-6 shadow-sm">
+    <div className="rounded-xl bg-white px-4 py-6 shadow-sm">
       <div className="flex items-center">
         <Icon
           className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"

app/components/ui/input.tsx

@@ -63,8 +63,9 @@ export const Input = <TFormValues extends Record<string, unknown>>(
       <HeadlessInput
         type={inputType}
         className={twMerge(
-          'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2 pr-8',
+          'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
           className,
+          type === 'password' ? 'pr-8' : '',
         )}
         placeholder={inputType === 'password' ? '******' : placeholder}
         {...register(name, rules)}

app/components/ui/news-author.tsx

@@ -1,9 +1,9 @@
-import type { TAuthor } from '~/apis/common/get-news'
+import type { TAuthorResponse } from '~/apis/common/get-news'
 import { ProfileIcon } from '~/components/icons/profile'
 import { formatDate } from '~/utils/formatter'
 
 type TDetailNewsAuthor = {
-  author?: TAuthor
+  author?: TAuthorResponse
   live_at?: string
   text?: string
 }

app/components/ui/select.tsx

@@ -0,0 +1,98 @@
+import { Field, Label, Select as HeadlessSelect } from '@headlessui/react'
+import { type ComponentProps, type ReactNode } from 'react'
+import {
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+  Controller,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+type TSelectProperties<T extends FieldValues> = Omit<
+  ComponentProps<'select'>,
+  'size'
+> & {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  containerClassName?: string
+  labelClassName?: string
+  placeholder?: string
+  options?: {
+    name: string
+    value: string | number
+  }[]
+}
+
+export const Select = <TFormValues extends Record<string, unknown>>(
+  properties: TSelectProperties<TFormValues>,
+) => {
+  const {
+    id,
+    label,
+    name,
+    rules,
+    disabled,
+    placeholder,
+    options,
+    className,
+    labelClassName,
+    containerClassName,
+    ...restProperties
+  } = properties
+  const {
+    control,
+    formState: { errors },
+  } = useRemixFormContext()
+
+  const error: FieldError = get(errors, name)
+
+  return (
+    <Field
+      className={twMerge('relative', containerClassName)}
+      disabled={disabled}
+      id={id}
+    >
+      <Label className={twMerge('mb-1 block text-gray-700', labelClassName)}>
+        {label} {error && <span className="text-red-500">{error.message}</span>}
+      </Label>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field }) => (
+          <HeadlessSelect
+            value={field.value}
+            onChange={field.onChange}
+            disabled={disabled}
+            className={twMerge(
+              'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
+              className,
+            )}
+            {...restProperties}
+          >
+            <option
+              value=""
+              disabled
+              selected={!field.value}
+            >
+              {placeholder}
+            </option>
+            {options?.map(({ value, name }) => (
+              <option
+                key={value}
+                value={value}
+              >
+                {name}
+              </option>
+            ))}
+          </HeadlessSelect>
+        )}
+      />
+    </Field>
+  )
+}

app/layouts/news/default.tsx

@@ -11,7 +11,7 @@ import { FormRegister } from '~/layouts/news/form-register'
 
 import { FooterLinks } from './footer-links'
 import { FooterNewsletter } from './footer-newsletter'
-import FormSubscription from './form-subscription'
+import { FormSubscribePlan } from './form-subscribe-plan'
 import { HeaderMenu } from './header-menu'
 import { HeaderTop } from './header-top'
 
@@ -74,9 +74,9 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
       <PopupModal
         isOpen={isSubscribeOpen}
         onClose={() => setIsSubscribeOpen(false)}
-        description="Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!"
+        description="Selamat Datang, silakan Pilih Subscribe Plan Anda untuk melanjutkan!"
       >
-        <FormSubscription />
+        <FormSubscribePlan />
       </PopupModal>
 
       <SuccessModal

app/layouts/news/form-register.tsx

@@ -26,7 +26,7 @@ export const registerSchema = z
       .optional()
       .nullable()
       .refine((data) => !!data, {
-        message: 'Please select a subscription',
+        message: 'Please select a Subscribe Plan',
       }),
   })
   .refine((field) => field.password === field.rePassword, {
@@ -42,7 +42,7 @@ export const FormRegister = () => {
   const [error, setError] = useState<string>()
   const fetcher = useFetcher()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const { subscriptionsData: subscriptions } = loaderData || {}
+  const { subscribePlanData: subscribePlan } = loaderData || {}
 
   const formMethods = useRemixForm<TRegisterSchema>({
     mode: 'onSubmit',
@@ -107,9 +107,9 @@ export const FormRegister = () => {
             <Combobox
               id="subscribe_plan"
               name="subscribe_plan"
-              label="Subscription"
-              placeholder="Pilih Subscription"
-              options={subscriptions}
+              label="Subscribe Plan"
+              placeholder="Pilih Subscribe Plan"
+              options={subscribePlan}
             />
 
             {error && (

app/layouts/news/form-subscribe-plan.tsx

@@ -25,12 +25,12 @@ export const subscribeSchema = z.object({
 
 export type TSubscribeSchema = z.infer<typeof subscribeSchema>
 
-export default function FormSubscription() {
+export const FormSubscribePlan = () => {
   const { setIsSubscribeOpen, setIsSuccessOpen } = useNewsContext()
   const fetcher = useFetcher()
   const [error, setError] = useState<string>()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const { subscriptionsData: subscriptions } = loaderData || {}
+  const { subscribePlanData: subscribePlan } = loaderData || {}
 
   const formMethods = useRemixForm<TSubscribeSchema>({
     mode: 'onSubmit',
@@ -64,9 +64,9 @@ export default function FormSubscription() {
           <Combobox
             id="subscribe_plan"
             name="subscribe_plan"
-            label="Subscription"
-            placeholder="Pilih Subscription"
-            options={subscriptions}
+            label="Subscribe Plan"
+            placeholder="Pilih Subscribe Plan"
+            options={subscribePlan}
           />
 
           {error && (

app/layouts/news/header-menu-mobile.tsx

@@ -13,7 +13,7 @@ type THeaderMenuMobile = {
   menu?: TCategoriesResponse['data']
 }
 
-export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
+export const HeaderMenuMobile = (properties: THeaderMenuMobile) => {
   const { menu } = properties
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const { setIsLoginOpen } = useNewsContext()

app/layouts/news/header-menu.tsx

@@ -1,7 +1,7 @@
 import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
-import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
+import { HeaderMenuMobile } from '~/layouts/news/header-menu-mobile'
 import type { loader } from '~/routes/_news'
 
 import { HeaderSearch } from './header-search'

app/pages/dashboard-advertisements/dialog-delete.tsx

@@ -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

app/pages/dashboard-advertisements/index.tsx

@@ -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>
   )

app/pages/dashboard-categories/index.tsx

@@ -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>

app/pages/dashboard-contents/index.tsx

@@ -3,7 +3,7 @@ import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
-import type { TAuthor } from '~/apis/common/get-news'
+import type { TAuthorResponse } from '~/apis/common/get-news'
 import type { TTagResponse } from '~/apis/common/get-tags'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
@@ -58,7 +58,7 @@ export const ContentsPage = () => {
   ]
   const dataSlot: DataTableSlots = {
     1: (value: string) => formatDate(value),
-    2: (value: TAuthor) => (
+    2: (value: TAuthorResponse) => (
       <div>
         <div>{value.name}</div>
         <div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
@@ -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>

app/pages/dashboard-subscribe-plan/dialog-delete.tsx

@@ -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>
+  )
+}

app/pages/dashboard-subscribe-plan/index.tsx

@@ -1,7 +1,14 @@
+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'
 import { Button } from '~/components/ui/button'
 import { getStatusBadge, type TColorBadge } from '~/components/ui/color-badge'
 import { UiTable } from '~/components/ui/table'
@@ -9,13 +16,17 @@ 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 { subscriptionsData: dataTable } = loaderData || {}
+  const { subscribePlanData: dataTable } = loaderData || {}
 
   const dataColumns = [
     {
@@ -42,7 +53,7 @@ export const SubscribePlanPage = () => {
       data: 'length',
     },
     {
-      title: 'Price',
+      title: 'Harga',
       data: 'price',
     },
     {
@@ -65,16 +76,30 @@ export const SubscribePlanPage = () => {
         {value === 1 ? 'Active' : 'Inactive'}
       </span>
     ),
-    6: (value: string) => (
-      <Button
-        as="a"
-        href={`/lg-admin/subscribe-plan/update/${value}`}
-        className="text-md rounded-md"
-        size="sm"
-      >
-        Update Subscribe Plan
-      </Button>
-    ),
+    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 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 (
     <div className="relative">
@@ -84,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>
 
@@ -103,6 +128,11 @@ export const SubscribePlanPage = () => {
         }}
         title=" Daftar Subscribe Plan"
       />
+
+      <DialogDelete
+        selectedItem={selectedSubscribePlan}
+        setSelectedItem={setSelectedSubscribePlan}
+      />
     </div>
   )
 }

app/pages/dashboard-tags/index.tsx

@@ -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>

app/pages/dashboard/chart-bar.tsx

@@ -7,12 +7,11 @@ import {
   LinearScale,
   BarElement,
   Title,
-  type ChartOptions,
   type ChartEvent,
   type ActiveElement,
 } from 'chart.js'
 import { useState } from 'react'
-import { Bar, Doughnut, Pie } from 'react-chartjs-2'
+import { Bar } from 'react-chartjs-2'
 ChartJS.register(
   ArcElement,
   CategoryScale,
@@ -25,64 +24,7 @@ ChartJS.register(
 
 type HandleChartClick = (event: ChartEvent, elements: ActiveElement[]) => void
 
-export const UiChartPie = () => {
-  const data = {
-    labels: [
-      'Pidana',
-      'Perdata',
-      'Perceraian',
-      'Surat Bisnis',
-      'Surat Tanah',
-      'Lainnya',
-    ],
-    datasets: [
-      {
-        data: [33.7, 13, 22.8, 9.3, 9.3, 21.2],
-        backgroundColor: [
-          '#FFB300',
-          '#4CAF50',
-          '#3F51B5',
-          '#F44336',
-          '#2196F3',
-          '#FF9800',
-        ],
-        hoverOffset: 4,
-      },
-    ],
-  }
-
-  const options: ChartOptions<'pie'> = {
-    maintainAspectRatio: true,
-    responsive: false,
-    plugins: {
-      legend: {
-        position: 'right',
-        labels: {
-          usePointStyle: true,
-          pointStyle: 'circle',
-          padding: 20,
-        },
-      },
-    },
-    layout: {
-      padding: 0,
-    },
-  }
-
-  return (
-    <div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 text-center">
-      <h2 className="text-xl font-bold">Top 5 Artikel</h2>
-      <Pie
-        height={225}
-        width={450}
-        data={data}
-        options={options}
-      />
-    </div>
-  )
-}
-
-export const UiChartBar = () => {
+export const ChartBar = () => {
   const yearlyData = {
     labels: ['2022', '2023', '2024'],
     datasets: [
@@ -151,7 +93,7 @@ export const UiChartBar = () => {
   }
 
   return (
-    <div className="rounded-xl bg-white p-6 shadow-lg">
+    <div className="rounded-xl bg-white p-6 shadow-sm">
       <div className="mb-4 flex items-center justify-between">
         <h2 className="text-xl font-bold">
           {view === 'year'
@@ -177,51 +119,3 @@ export const UiChartBar = () => {
     </div>
   )
 }
-
-export const ChartSubscription = () => {
-  const data = {
-    labels: ['Selesai', 'Belum Selesai'],
-    datasets: [
-      {
-        data: [70, 30],
-        backgroundColor: ['#1e3a8a', '#e5e7eb'],
-        borderWidth: 0,
-        cutout: '70%',
-        circumference: 180,
-        rotation: 270,
-      },
-    ],
-  }
-
-  const options: ChartOptions<'doughnut'> = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: 'right',
-        labels: {
-          usePointStyle: true,
-          pointStyle: 'circle',
-          boxWidth: 10,
-        },
-      },
-      tooltip: {
-        enabled: false,
-      },
-    },
-  }
-
-  return (
-    <div className="rounded-xl bg-white p-6 shadow-lg">
-      <h2 className="mb-4 text-[20px]">Subscription Selesai</h2>
-      <div className="flex items-center justify-between">
-        <div style={{ height: 'auto', width: '100%' }}>
-          <Doughnut
-            data={data}
-            options={options}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}

app/pages/dashboard/chart-donut.tsx

@@ -0,0 +1,69 @@
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  type ChartOptions,
+} from 'chart.js'
+import { Doughnut } from 'react-chartjs-2'
+ChartJS.register(
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+)
+
+export const ChartDonut = () => {
+  const data = {
+    labels: ['Selesai', 'Belum Selesai'],
+    datasets: [
+      {
+        data: [70, 30],
+        backgroundColor: ['#1e3a8a', '#e5e7eb'],
+        borderWidth: 0,
+        cutout: '70%',
+        circumference: 180,
+        rotation: 270,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'doughnut'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: 'right',
+        labels: {
+          usePointStyle: true,
+          pointStyle: 'circle',
+          boxWidth: 10,
+        },
+      },
+      tooltip: {
+        enabled: false,
+      },
+    },
+  }
+
+  return (
+    <div className="rounded-xl bg-white p-6 shadow-sm">
+      <h2 className="mb-4 text-[20px]">Subscription Selesai</h2>
+      <div className="flex items-center justify-between">
+        <div style={{ height: 'auto', width: '100%' }}>
+          <Doughnut
+            data={data}
+            options={options}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

app/pages/dashboard/chart-pie.tsx

@@ -0,0 +1,78 @@
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  type ChartOptions,
+} from 'chart.js'
+import { Pie } from 'react-chartjs-2'
+ChartJS.register(
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+)
+
+export const ChartPie = () => {
+  const data = {
+    labels: [
+      'Pidana',
+      'Perdata',
+      'Perceraian',
+      'Surat Bisnis',
+      'Surat Tanah',
+      'Lainnya',
+    ],
+    datasets: [
+      {
+        data: [33.7, 13, 22.8, 9.3, 9.3, 21.2],
+        backgroundColor: [
+          '#FFB300',
+          '#4CAF50',
+          '#3F51B5',
+          '#F44336',
+          '#2196F3',
+          '#FF9800',
+        ],
+        hoverOffset: 4,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'pie'> = {
+    maintainAspectRatio: true,
+    responsive: false,
+    plugins: {
+      legend: {
+        position: 'right',
+        labels: {
+          usePointStyle: true,
+          pointStyle: 'circle',
+          padding: 20,
+        },
+      },
+    },
+    layout: {
+      padding: 0,
+    },
+  }
+
+  return (
+    <div className="h-[300px] w-full items-center justify-center rounded-xl bg-white p-5 text-center shadow-sm">
+      <h2 className="text-xl font-bold">Top 5 Artikel</h2>
+      <Pie
+        height={225}
+        width={450}
+        data={data}
+        options={options}
+      />
+    </div>
+  )
+}

app/pages/dashboard/index.tsx

@@ -1,10 +1,8 @@
 import { CardReport } from '~/components/ui/card-report'
-import {
-  ChartSubscription,
-  UiChartBar,
-  UiChartPie,
-} from '~/components/ui/chart'
 
+import { ChartBar } from './chart-bar'
+import { ChartDonut } from './chart-donut'
+import { ChartPie } from './chart-pie'
 import { HISTORY, REPORT } from './data'
 export const DashboardPage = () => {
   return (
@@ -46,20 +44,16 @@ export const DashboardPage = () => {
           />
         ))}
         <div className="max-h-[300px] sm:col-span-2 sm:col-start-2 sm:row-span-2 sm:row-start-1">
-          <UiChartPie />
+          <ChartPie />
         </div>
       </div>
 
       <div className="flex flex-wrap gap-5 py-5 sm:flex-nowrap">
         <div className="h-full w-full sm:w-[60%]">
-          <div className="shadow-sm">
-            <UiChartBar />
-          </div>
+          <ChartBar />
         </div>
         <div className="w-ful h-full sm:w-[40%]">
-          <div className="shadow-sm">
-            <ChartSubscription />
-          </div>
+          <ChartDonut />
         </div>
       </div>
     </div>

app/pages/form-subscribe-plan/index.tsx

@@ -1,4 +1,4 @@
-import { Field, Label, Select } from '@headlessui/react'
+import { DevTool } from '@hookform/devtools'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect } from 'react'
 import toast from 'react-hot-toast'
@@ -6,8 +6,10 @@ import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
+import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
+import { Select } from '~/components/ui/select'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import { urlFriendlyCode } from '~/utils/formatter'
 
@@ -15,13 +17,13 @@ export const subscribePlanSchema = z.object({
   id: z.string().optional(),
   name: z.string().min(3, 'Nama minimal 3 karakter'),
   code: z.string(),
-  length: z.preprocess(Number, z.number().optional()),
-  price: z.preprocess(Number, z.number().optional()),
-  status: z.number().optional(),
+  length: z.preprocess(Number, z.number().min(1, 'Length minimal 1')),
+  price: z.preprocess(Number, z.number().min(1, 'Harga minimal 1')),
+  status: z.string().min(1, 'Status is required'),
 })
 export type TSubscribePlanSchema = z.infer<typeof subscribePlanSchema>
 type TProperties = {
-  subscribePlanData?: TSubscribePlanSchema
+  subscribePlanData?: TSubscribePlanResponse
 }
 
 export const FormSubscribePlanPage = (properties: TProperties) => {
@@ -36,13 +38,13 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
       id: subscribePlanData?.id || undefined,
       code: subscribePlanData?.code || '',
       name: subscribePlanData?.name || '',
-      length: subscribePlanData?.length || undefined,
-      price: subscribePlanData?.price || undefined,
-      status: subscribePlanData?.status || undefined,
+      length: subscribePlanData?.length || 0,
+      price: subscribePlanData?.price || 0,
+      status: subscribePlanData?.status.toString() || '',
     },
   })
 
-  const { handleSubmit, watch, setValue } = formMethods
+  const { handleSubmit, watch, setValue, control } = formMethods
   const watchName = watch('name')
 
   useEffect(() => {
@@ -122,8 +124,8 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
               />
               <Input
                 id="price"
-                label="Price"
-                placeholder="Masukkan Price"
+                label="Harga"
+                placeholder="Masukkan Harga"
                 type="number"
                 name="price"
                 className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
@@ -131,22 +133,25 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
                 containerClassName="flex-1"
               />
 
-              <Field className={'flex-1'}>
-                <Label className="mb-2 block text-sm font-medium">Status</Label>
-                <Select
-                  name="status"
-                  id="status"
-                  className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                >
-                  <option disabled>Pilih Status</option>
-                  <option value={1}>Aktif</option>
-                  <option value={0}>Nonaktif</option>
-                </Select>
-              </Field>
+              <Select
+                id="status"
+                name="status"
+                label="Status"
+                placeholder="Pilih Status"
+                options={[
+                  { value: 1, name: 'Aktif' },
+                  { value: 0, name: 'Nonaktif' },
+                ]}
+                className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+              />
             </div>
           </fetcher.Form>
         </RemixFormProvider>
       </div>
+
+      <DevTool control={control} />
     </div>
   )
 }

app/routes/_admin.lg-admin._dashboard.subscribe-plan._index.tsx

@@ -1,13 +1,13 @@
 import { isRouteErrorResponse } from 'react-router'
 
-import { getSubscriptions } from '~/apis/common/get-subscriptions'
-import { SubscribePlanPage } from '~/pages/dashboard-plan-subscribe'
+import { getSubscribePlan } from '~/apis/common/get-subscribe-plan'
+import { SubscribePlanPage } from '~/pages/dashboard-subscribe-plan'
 
 import type { Route } from './+types/_admin.lg-admin._dashboard.subscribe-plan._index'
 
 export const loader = async ({}: Route.LoaderArgs) => {
-  const { data: subscriptionsData } = await getSubscriptions()
-  return { subscriptionsData }
+  const { data: subscribePlanData } = await getSubscribePlan()
+  return { subscribePlanData }
 }
 
 export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {

app/routes/_admin.lg-admin._dashboard.subscribe-plan.create.tsx

@@ -1,4 +1,4 @@
-import { FormSubscribePlanPage } from '~/pages/form-subscriptions-plan'
+import { FormSubscribePlanPage } from '~/pages/form-subscribe-plan'
 
 const DashboardSubscribePlanCreateLayout = () => <FormSubscribePlanPage />
 export default DashboardSubscribePlanCreateLayout

app/routes/_admin.lg-admin._dashboard.subscribe-plan.update.$id.tsx

@@ -1,12 +1,12 @@
 import { isRouteErrorResponse } from 'react-router'
 
-import { getSubscriptions } from '~/apis/common/get-subscriptions'
-import { FormSubscribePlanPage } from '~/pages/form-subscriptions-plan'
+import { getSubscribePlan } from '~/apis/common/get-subscribe-plan'
+import { FormSubscribePlanPage } from '~/pages/form-subscribe-plan'
 
 import type { Route } from './+types/_admin.lg-admin._dashboard.subscribe-plan.update.$id'
 
 export const loader = async ({ params }: Route.LoaderArgs) => {
-  const { data: subscribePlansData } = await getSubscriptions()
+  const { data: subscribePlansData } = await getSubscribePlan()
   const { id } = params
   const subscribePlanData = subscribePlansData.find(
     (subscribePlan) => subscribePlan.id === id,

app/routes/_news.tsx

@@ -3,7 +3,7 @@ import { XiorError } from 'xior'
 
 import { getAds } from '~/apis/common/get-ads'
 import { getCategories } from '~/apis/common/get-categories'
-import { getSubscriptions } from '~/apis/common/get-subscriptions'
+import { getSubscribePlan } from '~/apis/common/get-subscribe-plan'
 import { getUser } from '~/apis/news/get-user'
 import { NewsProvider } from '~/contexts/news'
 import { NewsDefaultLayout } from '~/layouts/news/default'
@@ -25,13 +25,13 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
       }
     }
   }
-  const { data: subscriptionsData } = await getSubscriptions()
+  const { data: subscribePlanData } = await getSubscribePlan()
   const { data: categoriesData } = await getCategories()
   const { data: adsData } = await getAds()
 
   return {
     userData,
-    subscriptionsData,
+    subscribePlanData,
     categoriesData,
     adsData,
   }

app/routes/actions.admin.subscribe-plan.create.ts

@@ -8,7 +8,7 @@ import { handleCookie } from '~/libs/cookies'
 import {
   subscribePlanSchema,
   type TSubscribePlanSchema,
-} from '~/pages/form-subscriptions-plan'
+} from '~/pages/form-subscribe-plan'
 
 import type { Route } from './+types/actions.admin.subscribe-plan.create'
 

app/routes/actions.admin.subscribe-plan.delete.$id.ts

@@ -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 },
+    )
+  }
+}

app/routes/actions.admin.subscribe-plan.update.ts

@@ -8,7 +8,7 @@ import { handleCookie } from '~/libs/cookies'
 import {
   subscribePlanSchema,
   type TSubscribePlanSchema,
-} from '~/pages/form-subscriptions-plan'
+} from '~/pages/form-subscribe-plan'
 
 import type { Route } from './+types/actions.admin.subscribe-plan.update'
 

app/routes/actions.subscribe.ts

@@ -7,7 +7,7 @@ import { getUser } from '~/apis/news/get-user'
 import {
   subscribeSchema,
   type TSubscribeSchema,
-} from '~/layouts/news/form-subscription'
+} from '~/layouts/news/form-subscribe-plan'
 import { handleCookie } from '~/libs/cookies'
 
 import type { Route } from './+types/actions.subscribe'