.vscode/settings.json

@@ -25,8 +25,6 @@
     "labelClassName",
     "buttonClassName",
     "leftNodeClassName",
-    "rightNodeClassName",
+    "rightNodeClassName"
-    "buttonVariants",
-    "cva"
   ]
 }

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

@@ -1,28 +0,0 @@
-import { z } from 'zod'
-
-import { HttpServer, type THttpServer } from '~/libs/http-server'
-import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
-
-const subscribePlanResponseSchema = z.object({
-  data: z.object({
-    Message: z.string(),
-  }),
-})
-
-type TParameters = {
-  payload: TSubscribePlanSchema
-} & THttpServer
-
-export const createSubscribePlanRequest = async (parameters: TParameters) => {
-  const { payload, ...restParameters } = parameters
-  try {
-    const { data } = await HttpServer(restParameters).post(
-      '/api/subscribe-plan/create',
-      payload,
-    )
-    return subscribePlanResponseSchema.parse(data)
-  } catch (error) {
-    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
-    return Promise.reject(error)
-  }
-}

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

@@ -1,29 +0,0 @@
-import { z } from 'zod'
-
-import { HttpServer, type THttpServer } from '~/libs/http-server'
-import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
-
-const subscribePlanResponseSchema = z.object({
-  data: z.object({
-    Message: z.string(),
-  }),
-})
-
-type TParameters = {
-  payload: TSubscribePlanSchema
-} & THttpServer
-
-export const updateSubscribePlanRequest = async (parameters: TParameters) => {
-  const { payload, ...restParameters } = parameters
-  const { id, ...restPayload } = payload
-  try {
-    const { data } = await HttpServer(restParameters).put(
-      `/api/subscribe-plan/${id}/update`,
-      restPayload,
-    )
-    return subscribePlanResponseSchema.parse(data)
-  } catch (error) {
-    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
-    return Promise.reject(error)
-  }
-}

app/components/ui/button.tsx

@@ -1,5 +1,4 @@
 import { Button as HeadlessButton } from '@headlessui/react'
-import { ArrowPathIcon } from '@heroicons/react/20/solid'
 import { cva, type VariantProps } from 'class-variance-authority'
 import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
 import { twMerge } from 'tailwind-merge'
@@ -9,14 +8,11 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        newsPrimary:
+        newsPrimary: 'bg-[#2E2F7C] text-white text-lg',
-          'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]',
+        newsPrimaryOutline: 'border-[3px] border-white text-white text-lg',
-        newsPrimaryOutline:
+        newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
-          'border-[3px] bg-[#2E2F7C]  border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
-        newsSecondary:
-          'border-[3px] bg-white hover:shadow-lg active:shadow-2xl border-[#2E2F7C] text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] text-lg hover:border-[#4C5CA0] transition active:border-[#6970B4]',
         icon: '',
-        link: 'font-semibold text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] transition',
+        link: '',
       },
       size: {
         default: 'h-[50px] w-[150px]',
@@ -39,7 +35,6 @@ type ButtonBaseProperties = {
   variant?: VariantProps<typeof buttonVariants>['variant']
   size?: VariantProps<typeof buttonVariants>['size']
   className?: string
-  isLoading?: boolean
 }
 
 type PolymorphicReference<C extends ElementType> =
@@ -50,27 +45,22 @@ type ButtonProperties<C extends ElementType> = ButtonBaseProperties & {
   ref?: PolymorphicReference<C>
 } & Omit<ComponentPropsWithoutRef<C>, keyof ButtonBaseProperties>
 
-export const Button = <C extends ElementType = 'button'>(
+export const Button = <C extends ElementType = 'button'>({
-  properties: ButtonProperties<C>,
+  as,
-) => {
+  children,
-  const {
+  variant,
-    as,
+  size,
-    children,
+  className,
-    variant,
+  ...properties
-    size,
+}: ButtonProperties<C>) => {
-    className,
-    isLoading = false,
-    ...restProperties
-  } = properties
   const Component = as || HeadlessButton
   const classes = twMerge(buttonVariants({ variant, size, className }))
 
   return (
     <Component
       className={classes}
-      {...restProperties}
+      {...properties}
     >
-      {isLoading && <ArrowPathIcon className="animate-spin" />}
       {children}
     </Component>
   )

app/layouts/news/form-forgot-password.tsx

@@ -22,7 +22,7 @@ export const FormForgotPassword = () => {
           </div>
 
           {/* Tombol Masuk */}
-          <Button className="mt-5 w-full rounded-md py-2">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Reset Password
           </Button>
         </form>

app/layouts/news/form-login.tsx

@@ -24,6 +24,7 @@ export const FormLogin = () => {
   } = useNewsContext()
   const fetcher = useFetcher()
   const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
 
   const formMethods = useRemixForm<TLoginSchema>({
     mode: 'onSubmit',
@@ -36,9 +37,11 @@ export const FormLogin = () => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
+      setDisabled(false)
       return
     }
 
+    setDisabled(true)
     setError(undefined)
     setIsLoginOpen(false)
 
@@ -84,6 +87,7 @@ export const FormLogin = () => {
                   setIsLoginOpen(false)
                   setIsForgetOpen(true)
                 }}
+                className="font-semibold text-[#2E2F7C]"
                 variant="link"
                 size="fit"
               >
@@ -92,10 +96,9 @@ export const FormLogin = () => {
             </div>
 
             <Button
-              isLoading={fetcher.state !== 'idle'}
+              disabled={disabled}
-              disabled={fetcher.state !== 'idle'}
               type="submit"
-              className="w-full rounded-md py-2"
+              className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
             >
               Masuk
             </Button>
@@ -110,6 +113,7 @@ export const FormLogin = () => {
               setIsLoginOpen(false)
               setIsRegisterOpen(true)
             }}
+            className="font-semibold text-[#2E2F7C]"
             variant="link"
             size="fit"
           >

app/layouts/news/form-register.tsx

@@ -40,6 +40,7 @@ export const FormRegister = () => {
   const { setIsLoginOpen, setIsRegisterOpen, setIsSuccessOpen } =
     useNewsContext()
   const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
   const fetcher = useFetcher()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { subscriptionsData: subscriptions } = loaderData || {}
@@ -55,9 +56,11 @@ export const FormRegister = () => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
+      setDisabled(false)
       return
     }
 
+    setDisabled(true)
     setError(undefined)
     setIsRegisterOpen(false)
     setIsSuccessOpen('register')
@@ -117,10 +120,9 @@ export const FormRegister = () => {
             )}
 
             <Button
-              isLoading={fetcher.state !== 'idle'}
+              disabled={disabled}
-              disabled={fetcher.state !== 'idle'}
               type="submit"
-              className="w-full rounded-md py-2"
+              className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
             >
               Daftar
             </Button>
@@ -135,6 +137,7 @@ export const FormRegister = () => {
               setIsLoginOpen(true)
               setIsRegisterOpen(false)
             }}
+            className="font-semibold text-[#2E2F7C]"
             variant="link"
             size="fit"
           >

app/layouts/news/form-subscription.tsx

@@ -29,6 +29,7 @@ export default function FormSubscription() {
   const { setIsSubscribeOpen, setIsSuccessOpen } = useNewsContext()
   const fetcher = useFetcher()
   const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { subscriptionsData: subscriptions } = loaderData || {}
 
@@ -43,9 +44,11 @@ export default function FormSubscription() {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
+      setDisabled(false)
       return
     }
 
+    setDisabled(true)
     setError(undefined)
     setIsSubscribeOpen(false)
     setIsSuccessOpen('payment')
@@ -74,10 +77,9 @@ export default function FormSubscription() {
           )}
 
           <Button
-            isLoading={fetcher.state !== 'idle'}
+            disabled={disabled}
-            disabled={fetcher.state !== 'idle'}
             type="submit"
-            className="mt-5 w-full rounded-md py-2"
+            className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
           >
             Lanjutkan
           </Button>

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

@@ -71,7 +71,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
                 >
                   <Button
                     variant="newsSecondary"
-                    className="w-full px-[35px] py-3 text-center sm:hidden"
+                    className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
                     type="submit"
                   >
                     Logout
@@ -80,7 +80,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
               ) : (
                 <Button
                   variant="newsSecondary"
-                  className="w-full px-[35px] py-3 text-center sm:hidden"
+                  className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
                   onClick={() => {
                     setIsMenuOpen(false)
                     setIsLoginOpen(true)

app/layouts/news/header-menu.tsx

@@ -1,6 +1,5 @@
 import { Link, useRouteLoaderData } from 'react-router'
 
-import { Button } from '~/components/ui/button'
 import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
 import type { loader } from '~/routes/_news'
 
@@ -18,17 +17,15 @@ export const HeaderMenu = () => {
     <>
       <div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
         {menu?.map((item) => (
-          <Button
+          <Link
-            as={Link}
             key={item.id}
             to={`/category/${item.code}`}
-            size="fit"
             className={
-              'flex h-full items-center justify-center border-r border-white px-[35px] text-xl'
+              'flex h-full items-center justify-center border-r border-white px-[35px]'
             }
           >
             {item.name}
-          </Button>
+          </Link>
         ))}
         <HeaderSearch />
       </div>

app/layouts/news/header-top.tsx

@@ -34,10 +34,8 @@ export const HeaderTop = () => {
           >
             <Button
               variant="newsSecondary"
-              className="hidden sm:flex"
+              className="hidden sm:block"
               type="submit"
-              disabled={fetcher.state !== 'idle'}
-              isLoading={fetcher.state !== 'idle'}
             >
               Logout
             </Button>

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

@@ -1,109 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
-import { useFetcher, useNavigate } from 'react-router'
-import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/components/ui/button'
-import { Input } from '~/components/ui/input'
-import { TitleDashboard } from '~/components/ui/title-dashboard'
-import { urlFriendlyCode } from '~/utils/formatter'
-
-export const createSubscribePlanSchema = z.object({
-  id: z.string().optional(),
-  name: z.string().min(3, 'Nama minimal 3 karakter'),
-  code: z.string(),
-})
-export type TSubscribePlanSchema = z.infer<typeof createSubscribePlanSchema>
-type TProperties = {
-  subscribePlanData?: TSubscribePlanSchema
-}
-
-export const FormSubscribePlanPage = (properties: TProperties) => {
-  const { subscribePlanData } = properties || {}
-  const fetcher = useFetcher()
-  const navigate = useNavigate()
-  const formMethods = useRemixForm<TSubscribePlanSchema>({
-    mode: 'onSubmit',
-    fetcher,
-    resolver: zodResolver(createSubscribePlanSchema),
-    values: {
-      id: subscribePlanData?.id || undefined,
-      code: subscribePlanData?.code || '',
-      name: subscribePlanData?.name || '',
-    },
-  })
-  const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
-
-  const { handleSubmit, watch, setValue } = formMethods
-  const watchName = watch('name')
-
-  useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
-      setDisabled(false)
-      return
-    }
-    navigate('/lg-admin/subscribe-plan')
-    setDisabled(true)
-    setError(undefined)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
-
-  useEffect(() => {
-    setValue('code', urlFriendlyCode(watchName))
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [watchName])
-
-  return (
-    <div className="relative">
-      <TitleDashboard
-        title={`${subscribePlanData ? 'Update' : 'Buat'} Subscribe Plan`}
-      />
-      <div>
-        <RemixFormProvider {...formMethods}>
-          <fetcher.Form
-            method="post"
-            onSubmit={handleSubmit}
-            action={`/actions/admin/subscribe-plan/${subscribePlanData ? 'update' : 'create'}`}
-            className="space-y-4"
-          >
-            {error && (
-              <div className="text-sm text-red-500 capitalize">{error}</div>
-            )}
-            <div className="flex items-end justify-between gap-4">
-              <Input
-                id="name"
-                label="Subscribe Plan"
-                placeholder="Masukkan Nama Subscribe Plan"
-                name="name"
-                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
-                labelClassName="text-sm font-medium text-[#363636]"
-                containerClassName="flex-1"
-              />
-              <Input
-                id="code"
-                label="Kode"
-                placeholder="Masukkan Kode Subscribe Plan"
-                readOnly
-                name="code"
-                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
-                labelClassName="text-sm font-medium text-[#363636]"
-                containerClassName="flex-1"
-              />
-              <Button
-                disabled={disabled}
-                type="submit"
-                size="lg"
-                className="text-md h-[42px] rounded-md"
-              >
-                Save
-              </Button>
-            </div>
-          </fetcher.Form>
-        </RemixFormProvider>
-      </div>
-    </div>
-  )
-}

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

@@ -1,4 +0,0 @@
-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,20 +0,0 @@
-import { getSubscriptions } from '~/apis/common/get-subscriptions'
-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 getSubscriptions()
-  const subscribePlanData = subscribePlansData.find(
-    (subscribePlan) => subscribePlan.id === params.id,
-  )
-  return { subscribePlanData }
-}
-
-const DashboardSubscribePlanUpdateLayout = ({
-  loaderData,
-}: Route.ComponentProps) => {
-  const { subscribePlanData } = loaderData || {}
-  return <FormSubscribePlanPage subscribePlanData={subscribePlanData} />
-}
-export default DashboardSubscribePlanUpdateLayout

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

@@ -1,67 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { data } from 'react-router'
-import { getValidatedFormData } from 'remix-hook-form'
-import { XiorError } from 'xior'
-
-import { createSubscribePlanRequest } from '~/apis/admin/create-subscribe-plan'
-import { handleCookie } from '~/libs/cookies'
-import {
-  createSubscribePlanSchema,
-  type TSubscribePlanSchema,
-} from '~/pages/form-subscriptions-plan'
-
-import type { Route } from './+types/actions.register'
-
-export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
-  try {
-    const {
-      errors,
-      data: payload,
-      receivedValues: defaultValues,
-    } = await getValidatedFormData<TSubscribePlanSchema>(
-      request,
-      zodResolver(createSubscribePlanSchema),
-      false,
-    )
-
-    if (errors) {
-      return data({ success: false, errors, defaultValues }, { status: 400 })
-    }
-
-    const { data: tagsData } = await createSubscribePlanRequest({
-      accessToken: staffToken,
-      payload,
-    })
-
-    return data(
-      {
-        success: true,
-        tagsData,
-      },
-      {
-        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

@@ -1,65 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { data } from 'react-router'
-import { getValidatedFormData } from 'remix-hook-form'
-import { XiorError } from 'xior'
-
-import { updateSubscribePlanRequest } from '~/apis/admin/update-subscribe-plan'
-import { handleCookie } from '~/libs/cookies'
-import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
-import { createTagSchema } from '~/pages/form-tag'
-
-import type { Route } from './+types/actions.register'
-
-export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
-  try {
-    const {
-      errors,
-      data: payload,
-      receivedValues: defaultValues,
-    } = await getValidatedFormData<TSubscribePlanSchema>(
-      request,
-      zodResolver(createTagSchema),
-      false,
-    )
-
-    if (errors) {
-      return data({ success: false, errors, defaultValues }, { status: 400 })
-    }
-
-    const { data: tagData } = await updateSubscribePlanRequest({
-      accessToken: staffToken,
-      payload,
-    })
-
-    return data(
-      {
-        success: true,
-        tagData,
-      },
-      {
-        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 },
-    )
-  }
-}