app/layouts/admin/form-upload.tsx

@@ -1,11 +1,10 @@
-import { Input } from '@headlessui/react'
+import { Button, Input } from '@headlessui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState, type ChangeEvent } from 'react'
 import { useFetcher } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
-import { Button } from '~/components/ui/button'
 import { uploadCategorySchema, useAdminContext } from '~/contexts/admin'
 
 export const uploadSchema = z.object({
@@ -18,6 +17,7 @@ export type TUploadSchema = z.infer<typeof uploadSchema>
 export const FormUpload = () => {
   const { isUploadOpen, setUploadedFile } = useAdminContext()
   const fetcher = useFetcher()
+  const [disabled, setDisabled] = useState(false)
   const [error, setError] = useState<string>()
   const maxFileSize = 10 * 1024 // 10MB
 
@@ -32,11 +32,13 @@ export const FormUpload = () => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
+      setDisabled(false)
       return
     }
 
     setUploadedFile(fetcher.data.uploadData.data.file_url)
 
+    setDisabled(true)
     setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
@@ -108,10 +110,9 @@ export const FormUpload = () => {
           {...register('category')}
         />
         <Button
-          disabled={fetcher.state !== 'idle'}
+          disabled={disabled}
-          isLoading={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"
         >
           Upload
         </Button>

app/layouts/admin/navbar.tsx

@@ -1,9 +1,8 @@
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
 import { ChevronIcon } from '~/components/icons/chevron'
 import { ProfileIcon } from '~/components/icons/profile'
-import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
 import type { loader } from '~/routes/_admin.lg-admin'
 
@@ -53,10 +52,8 @@ export const Navbar = () => {
               className="grid"
             >
               <Button
-                disabled={fetcher.state !== 'idle'}
-                isLoading={fetcher.state !== 'idle'}
                 type="submit"
-                className="w-full rounded p-1"
+                className="cursor-pointer rounded p-1 hover:bg-[#707FDD]/10 hover:text-[#5363AB]"
               >
                 Logout
               </Button>

app/pages/form-category/index.tsx

@@ -39,6 +39,7 @@ export const FormCategoryPage = (properties: TProperties) => {
     },
   })
   const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
 
   const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
@@ -46,9 +47,11 @@ export const FormCategoryPage = (properties: TProperties) => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
+      setDisabled(false)
       return
     }
     navigate('/lg-admin/categories')
+    setDisabled(true)
     setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
@@ -93,8 +96,7 @@ export const FormCategoryPage = (properties: TProperties) => {
                 containerClassName="flex-1"
               />
               <Button
-                isLoading={fetcher.state !== 'idle'}
+                disabled={disabled}
-                disabled={fetcher.state !== 'idle'}
                 type="submit"
                 size="lg"
                 className="text-md h-[42px] rounded-md"

app/pages/form-contents/index.tsx

@@ -73,6 +73,7 @@ export const FormContentsPage = (properties: TProperties) => {
   const { categoriesData: categories } = loaderData || {}
   const { tagsData: tags } = loaderData || {}
   const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
 
   const formMethods = useRemixForm<TContentSchema>({
     mode: 'onSubmit',
@@ -99,10 +100,12 @@ export const FormContentsPage = (properties: TProperties) => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
+      setDisabled(false)
       return
     }
 
     navigate('/lg-admin/contents')
+    setDisabled(true)
     setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
@@ -141,8 +144,7 @@ export const FormContentsPage = (properties: TProperties) => {
               containerClassName="flex-1"
             />
             <Button
-              isLoading={fetcher.state !== 'idle'}
+              disabled={disabled}
-              disabled={fetcher.state !== 'idle'}
               type="submit"
               size="lg"
               className="text-md h-[42px] rounded-md"

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

@@ -34,6 +34,7 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
     },
   })
   const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
 
   const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
@@ -41,9 +42,11 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
   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])
@@ -90,8 +93,7 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
                 containerClassName="flex-1"
               />
               <Button
-                disabled={fetcher.state !== 'idle'}
+                disabled={disabled}
-                isLoading={fetcher.state !== 'idle'}
                 type="submit"
                 size="lg"
                 className="text-md h-[42px] rounded-md"

app/pages/form-tag/index.tsx

@@ -35,6 +35,7 @@ export const FormTagPage = (properties: TProperties) => {
     },
   })
   const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
 
   const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
@@ -42,9 +43,11 @@ export const FormTagPage = (properties: TProperties) => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
+      setDisabled(false)
       return
     }
     navigate('/lg-admin/tags')
+    setDisabled(true)
     setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
@@ -89,8 +92,7 @@ export const FormTagPage = (properties: TProperties) => {
                 containerClassName="flex-1"
               />
               <Button
-                isLoading={fetcher.state !== 'idle'}
+                disabled={disabled}
-                disabled={fetcher.state !== 'idle'}
                 type="submit"
                 size="lg"
                 className="text-md h-[42px] rounded-md"

app/pages/staff-login/index.tsx

@@ -23,12 +23,14 @@ export const AdminLoginPage = () => {
     resolver: zodResolver(loginSchema),
   })
   const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
 
   const { handleSubmit } = formMethods
 
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
+      setDisabled(false)
       return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -79,21 +81,18 @@ export const AdminLoginPage = () => {
               {/* Lupa Kata Sandi */}
               <div className="mb-4 flex justify-between">
                 <span className="text-gray-600">Lupa Kata Sandi?</span>
-                <Button
+                <Link
-                  as={Link}
-                  variant={'link'}
-                  size="fit"
                   to="/lg-admin/auth/reset-password"
+                  className="font-semibold text-[#2E2F7C]"
                 >
                   Reset Kata Sandi
-                </Button>
+                </Link>
               </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>