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-subscribe-plan'
+import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
 
 const subscribePlanResponseSchema = z.object({
   data: z.object({
@@ -16,13 +16,9 @@ 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',
-      transformedPayload,
+      payload,
     )
     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-subscribe-plan'
+import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
 
 const subscribePlanResponseSchema = z.object({
   data: z.object({
@@ -9,12 +9,14 @@ const subscribePlanResponseSchema = z.object({
   }),
 })
 
+type TTSubscribePlanId = Pick<TSubscribePlanSchema, 'id'>
 type TParameters = {
-  id: TSubscribePlanSchema['id']
+  payload: TTSubscribePlanId
 } & THttpServer
 
 export const deleteSubscribePlanRequest = async (parameters: TParameters) => {
-  const { id, ...restParameters } = parameters
+  const { payload, ...restParameters } = parameters
+  const { id } = payload
   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 TDeleteTagsResponse = z.infer<typeof deleteTagsResponseSchema>
+export type TDeleteTagsSchema = 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-subscribe-plan'
+import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
 
 const subscribePlanResponseSchema = z.object({
   data: z.object({
@@ -17,13 +17,9 @@ 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`,
-      transformedPayload,
+      restPayload,
     )
     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 TAuthorResponse = z.infer<typeof authorSchema>
+export type TAuthor = z.infer<typeof authorSchema>
 type TParameters = {
   categories?: string[]
   tags?: string[]

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

@@ -1,28 +0,0 @@
-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

@@ -0,0 +1,26 @@
+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 Subscribe Plan
+                      Select Subscription
                     </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-[#EF4444] text-white text-lg hover:shadow transition active:bg-[#FEE2E2] hover:bg-[#FCA5A5]',
+          'bg-red-500 text-white text-lg hover:bg-red-600 hover:shadow transition active:bg-red-700',
         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-xl bg-white px-4 py-6 shadow-sm">
+    <div className="rounded 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/chart.tsx

@@ -7,11 +7,12 @@ import {
   LinearScale,
   BarElement,
   Title,
+  type ChartOptions,
   type ChartEvent,
   type ActiveElement,
 } from 'chart.js'
 import { useState } from 'react'
-import { Bar } from 'react-chartjs-2'
+import { Bar, Doughnut, Pie } from 'react-chartjs-2'
 ChartJS.register(
   ArcElement,
   CategoryScale,
@@ -24,7 +25,64 @@ ChartJS.register(
 
 type HandleChartClick = (event: ChartEvent, elements: ActiveElement[]) => void
 
-export const ChartBar = () => {
+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 = () => {
   const yearlyData = {
     labels: ['2022', '2023', '2024'],
     datasets: [
@@ -93,7 +151,7 @@ export const ChartBar = () => {
   }
 
   return (
-    <div className="rounded-xl bg-white p-6 shadow-sm">
+    <div className="rounded-xl bg-white p-6 shadow-lg">
       <div className="mb-4 flex items-center justify-between">
         <h2 className="text-xl font-bold">
           {view === 'year'
@@ -119,3 +177,51 @@ export const ChartBar = () => {
     </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/components/ui/input.tsx

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

app/components/ui/news-author.tsx

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

app/components/ui/select.tsx

@@ -1,98 +0,0 @@
-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 { FormSubscribePlan } from './form-subscribe-plan'
+import FormSubscription from './form-subscription'
 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 Subscribe Plan Anda untuk melanjutkan!"
+        description="Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!"
       >
-        <FormSubscribePlan />
+        <FormSubscription />
       </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 Subscribe Plan',
+        message: 'Please select a subscription',
       }),
   })
   .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 { subscribePlanData: subscribePlan } = loaderData || {}
+  const { subscriptionsData: subscriptions } = loaderData || {}
 
   const formMethods = useRemixForm<TRegisterSchema>({
     mode: 'onSubmit',
@@ -107,9 +107,9 @@ export const FormRegister = () => {
             <Combobox
               id="subscribe_plan"
               name="subscribe_plan"
-              label="Subscribe Plan"
+              label="Subscription"
-              placeholder="Pilih Subscribe Plan"
+              placeholder="Pilih Subscription"
-              options={subscribePlan}
+              options={subscriptions}
             />
 
             {error && (

app/layouts/news/form-subscription.tsx

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

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

@@ -13,7 +13,7 @@ type THeaderMenuMobile = {
   menu?: TCategoriesResponse['data']
 }
 
-export const HeaderMenuMobile = (properties: THeaderMenuMobile) => {
+export default function 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 = {
-  selectedItem?: TAdResponse
+  selectedAds?: TAdResponse
-  setSelectedItem: Dispatch<SetStateAction<TAdResponse | undefined>>
+  setSelectedAds: Dispatch<SetStateAction<TAdResponse | undefined>>
 }
 
 export const DialogDelete = (properties: TProperties) => {
-  const { selectedItem, setSelectedItem } = properties || {}
+  const { selectedAds, setSelectedAds } = properties || {}
   const fetcher = useFetcher()
 
   useEffect(() => {
@@ -28,7 +28,7 @@ export const DialogDelete = (properties: TProperties) => {
     }
 
     if (fetcher.data?.success === true) {
-      setSelectedItem(undefined)
+      setSelectedAds(undefined)
       toast.success('Banner iklan berhasil dihapus!')
       return
     }
@@ -37,10 +37,10 @@ export const DialogDelete = (properties: TProperties) => {
 
   return (
     <Dialog
-      open={!!selectedItem}
+      open={!!selectedAds}
       onClose={() => {
         if (fetcher.state === 'idle') {
-          setSelectedItem(undefined)
+          setSelectedAds(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={selectedItem?.image_url}
+              src={selectedAds?.image_url}
-              alt={selectedItem?.image_url}
+              alt={selectedAds?.image_url}
               className="aspect-[150/1] h-[50px] rounded object-contain"
             />
             <Button
               as={Link}
-              to={selectedItem?.url || ''}
+              to={selectedAds?.url || ''}
               variant="link"
               size="fit"
             >
-              {selectedItem?.url}
+              {selectedAds?.url}
             </Button>
           </Description>
           <div className="flex justify-end">
             <fetcher.Form
               method="POST"
-              action={`/actions/admin/advertisements/delete/${selectedItem?.id}`}
+              action={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
               className="grid"
             >
               <Button

app/pages/dashboard-advertisements/index.tsx

@@ -57,6 +57,7 @@ export const AdvertisementsPage = () => {
         <Button
           as="a"
           href={`/lg-admin/advertisements/update/${value}`}
+          className=""
           size="icon"
           title="Update Banner Iklan"
         >
@@ -85,7 +86,6 @@ 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
-        selectedItem={selectedAds}
+        selectedAds={selectedAds}
-        setSelectedItem={setSelectedAds}
+        setSelectedAds={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 { TAuthorResponse } from '~/apis/common/get-news'
+import type { TAuthor } 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: TAuthorResponse) => (
+    2: (value: TAuthor) => (
       <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-plan-subscribe/index.tsx

@@ -1,14 +1,7 @@
-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'
@@ -16,17 +9,13 @@ 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 || {}
+  const { subscriptionsData: dataTable } = loaderData || {}
 
   const dataColumns = [
     {
@@ -53,7 +42,7 @@ export const SubscribePlanPage = () => {
       data: 'length',
     },
     {
-      title: 'Harga',
+      title: 'Price',
       data: 'price',
     },
     {
@@ -76,29 +65,15 @@ export const SubscribePlanPage = () => {
         {value === 1 ? 'Active' : 'Inactive'}
       </span>
     ),
-    6: (value: string, _type: unknown, data: TSubscribePlanResponse) =>
+    6: (value: string) => (
-      data.code === 'basic' ? (
-        ''
-      ) : (
-        <div className="flex space-x-2">
       <Button
         as="a"
         href={`/lg-admin/subscribe-plan/update/${value}`}
-            size="icon"
+        className="text-md rounded-md"
-            title="Update Subscribe Plan"
+        size="sm"
       >
-            <PencilSquareIcon className="h-4 w-4" />
+        Update Subscribe Plan
       </Button>
-          <Button
-            type="button"
-            size="icon"
-            variant="newsDanger"
-            onClick={() => setSelectedSubscribePlan(data)}
-            title="Hapus Subscribe Plan"
-          >
-            <TrashIcon className="h-4 w-4" />
-          </Button>
-        </div>
     ),
   }
   return (
@@ -109,10 +84,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"
         >
-          <PlusIcon className="h-8 w-8" /> Buat Subscribe Plan
+          Buat Subscribe Plan
         </Button>
       </div>
 
@@ -128,11 +103,6 @@ export const SubscribePlanPage = () => {
         }}
         title=" Daftar Subscribe Plan"
       />
-
-      <DialogDelete
-        selectedItem={selectedSubscribePlan}
-        setSelectedItem={setSelectedSubscribePlan}
-      />
     </div>
   )
 }

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

@@ -1,90 +0,0 @@
-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-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-donut.tsx

@@ -1,69 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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,8 +1,10 @@
 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 (
@@ -44,16 +46,20 @@ export const DashboardPage = () => {
           />
         ))}
         <div className="max-h-[300px] sm:col-span-2 sm:col-start-2 sm:row-span-2 sm:row-start-1">
-          <ChartPie />
+          <UiChartPie />
         </div>
       </div>
 
       <div className="flex flex-wrap gap-5 py-5 sm:flex-nowrap">
         <div className="h-full w-full sm:w-[60%]">
-          <ChartBar />
+          <div className="shadow-sm">
+            <UiChartBar />
+          </div>
         </div>
         <div className="w-ful h-full sm:w-[40%]">
-          <ChartDonut />
+          <div className="shadow-sm">
+            <ChartSubscription />
+          </div>
         </div>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import { DevTool } from '@hookform/devtools'
+import { Field, Label, Select } from '@headlessui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect } from 'react'
 import toast from 'react-hot-toast'
@@ -6,10 +6,8 @@ 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'
 
@@ -17,13 +15,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().min(1, 'Length minimal 1')),
+  length: z.preprocess(Number, z.number().optional()),
-  price: z.preprocess(Number, z.number().min(1, 'Harga minimal 1')),
+  price: z.preprocess(Number, z.number().optional()),
-  status: z.string().min(1, 'Status is required'),
+  status: z.number().optional(),
 })
 export type TSubscribePlanSchema = z.infer<typeof subscribePlanSchema>
 type TProperties = {
-  subscribePlanData?: TSubscribePlanResponse
+  subscribePlanData?: TSubscribePlanSchema
 }
 
 export const FormSubscribePlanPage = (properties: TProperties) => {
@@ -38,13 +36,13 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
       id: subscribePlanData?.id || undefined,
       code: subscribePlanData?.code || '',
       name: subscribePlanData?.name || '',
-      length: subscribePlanData?.length || 0,
+      length: subscribePlanData?.length || undefined,
-      price: subscribePlanData?.price || 0,
+      price: subscribePlanData?.price || undefined,
-      status: subscribePlanData?.status.toString() || '',
+      status: subscribePlanData?.status || undefined,
     },
   })
 
-  const { handleSubmit, watch, setValue, control } = formMethods
+  const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
 
   useEffect(() => {
@@ -124,8 +122,8 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
               />
               <Input
                 id="price"
-                label="Harga"
+                label="Price"
-                placeholder="Masukkan Harga"
+                placeholder="Masukkan Price"
                 type="number"
                 name="price"
                 className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
@@ -133,25 +131,22 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
                 containerClassName="flex-1"
               />
 
+              <Field className={'flex-1'}>
+                <Label className="mb-2 block text-sm font-medium">Status</Label>
                 <Select
-                id="status"
                   name="status"
-                label="Status"
+                  id="status"
-                placeholder="Pilih Status"
+                  className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                options={[
+                >
-                  { value: 1, name: 'Aktif' },
+                  <option disabled>Pilih Status</option>
-                  { value: 0, name: 'Nonaktif' },
+                  <option value={1}>Aktif</option>
-                ]}
+                  <option value={0}>Nonaktif</option>
-                className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                </Select>
-                labelClassName="text-sm font-medium text-[#363636]"
+              </Field>
-                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 { getSubscribePlan } from '~/apis/common/get-subscribe-plan'
+import { getSubscriptions } from '~/apis/common/get-subscriptions'
-import { SubscribePlanPage } from '~/pages/dashboard-subscribe-plan'
+import { SubscribePlanPage } from '~/pages/dashboard-plan-subscribe'
 
 import type { Route } from './+types/_admin.lg-admin._dashboard.subscribe-plan._index'
 
 export const loader = async ({}: Route.LoaderArgs) => {
-  const { data: subscribePlanData } = await getSubscribePlan()
+  const { data: subscriptionsData } = await getSubscriptions()
-  return { subscribePlanData }
+  return { subscriptionsData }
 }
 
 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-subscribe-plan'
+import { FormSubscribePlanPage } from '~/pages/form-subscriptions-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 { getSubscribePlan } from '~/apis/common/get-subscribe-plan'
+import { getSubscriptions } from '~/apis/common/get-subscriptions'
-import { FormSubscribePlanPage } from '~/pages/form-subscribe-plan'
+import { FormSubscribePlanPage } from '~/pages/form-subscriptions-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 getSubscribePlan()
+  const { data: subscribePlansData } = await getSubscriptions()
   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 { getSubscribePlan } from '~/apis/common/get-subscribe-plan'
+import { getSubscriptions } from '~/apis/common/get-subscriptions'
 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: subscribePlanData } = await getSubscribePlan()
+  const { data: subscriptionsData } = await getSubscriptions()
   const { data: categoriesData } = await getCategories()
   const { data: adsData } = await getAds()
 
   return {
     userData,
-    subscribePlanData,
+    subscriptionsData,
     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-subscribe-plan'
+} from '~/pages/form-subscriptions-plan'
 
 import type { Route } from './+types/actions.admin.subscribe-plan.create'
 

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

@@ -1,48 +0,0 @@
-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-subscribe-plan'
+} from '~/pages/form-subscriptions-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-subscribe-plan'
+} from '~/layouts/news/form-subscription'
 import { handleCookie } from '~/libs/cookies'
 
 import type { Route } from './+types/actions.subscribe'