Merge remote-tracking branch 'origin/master' into feature/slicing

2025-03-11 00:22:40 +07:00 · 2025-03-11 00:22:40 +07:00 · 438d1d40db
commit 438d1d40db
parent 9a5bddef6a 7f7526783f
15 changed files with 532 additions and 373 deletions
--- a/app/apis/admin/get-users.ts
+++ b/app/apis/admin/get-users.ts
@ -26,9 +26,7 @@ const usersResponseSchema = z.object({
  data: z.array(userResponseSchema),
 })

-export type TSubscribePlanRespon = z.infer<typeof subscribePlanResponseSchema>
 export type TUserResponse = z.infer<typeof userResponseSchema>
-export type TSubscribeResponse = z.infer<typeof subscribeResponseSchema>

 export const getUsers = async (parameters: THttpServer) => {
  try {
--- a/app/apis/admin/upload-file.ts
+++ b/app/apis/admin/upload-file.ts
@ -0,0 +1,37 @@
+import { z } from 'zod'
+
+import type { TUploadSchema } from '~/layouts/admin/form-upload'
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const uploadResponseSchema = z.object({
+  data: z.object({
+    message: z.string(),
+    data: z.object({
+      file_path: z.string(),
+      file_url: z.string(),
+    }),
+  }),
+})
+
+type TParameter = {
+  payload: TUploadSchema & {
+    file: File
+  }
+} & THttpServer
+
+export const uploadFileRequest = async (parameters: TParameter) => {
+  const { payload, ...restParameters } = parameters
+  const formdata = new FormData()
+  formdata.append('file', payload.file)
+
+  try {
+    const { data } = await HttpServer(restParameters).post(
+      '/api/file',
+      formdata,
+    )
+    return uploadResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}
--- a/app/apis/common/get-news-by-slug.ts
+++ b/app/apis/common/get-news-by-slug.ts
@ -14,7 +14,9 @@ type TParameters = {
 export const getNewsBySlug = async (parameters: TParameters) => {
  const { slug, ...restParameters } = parameters
  try {
-    const { data } = await HttpServer(restParameters).get(`/api/news/${slug}`)
+    const { data } = await HttpServer(restParameters).get(
+      `/api/news/${encodeURIComponent(slug)}`,
+    )
    return dataResponseSchema.parse(data)
  } catch (error) {
    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
--- a/app/components/icons/chevron-double.tsx
+++ b/app/components/icons/chevron-double.tsx
@ -1,28 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-
-/**
- * Note: `ChevronDoubleIcon` default mengarah ke kiri.
- * Gunakan class `rotate-xx` untuk mengubah arah ikon.
- */
-export const ChevronDoubleIcon = (
-  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-) => {
-  return (
-    <svg
-      width={20}
-      height={20}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={properties.className}
-      {...properties}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.512 4.427l-2.984 3.58 2.877 3.575a.667.667 0 01-1.04.836l-3.218-4a.667.667 0 01.007-.844l3.334-4a.667.667 0 011.024.853zm-5.69-.853a.667.667 0 011.023.853l-2.984 3.58 2.877 3.575a.667.667 0 01-1.039.836l-3.218-4a.666.666 0 01.007-.844l3.333-4z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
--- a/app/components/text-editor/editor-menubar.tsx
+++ b/app/components/text-editor/editor-menubar.tsx
@ -1,3 +1,4 @@
+import { Input } from '@headlessui/react'
 import {
  ArrowUturnLeftIcon,
  ArrowUturnRightIcon,
@ -6,6 +7,7 @@ import {
  Bars3Icon,
  Bars4Icon,
  BoldIcon,
+  CloudArrowUpIcon,
  CodeBracketIcon,
  DocumentTextIcon,
  H1Icon,
@ -27,9 +29,12 @@ import {
  useState,
  useRef,
  useCallback,
+  useEffect,
 } from 'react'
 import { HexColorInput, HexColorPicker } from 'react-colorful'

+import { Button } from '~/components/ui/button'
+import { useAdminContext } from '~/contexts/admin'
 import { useClickOutside } from '~/hooks/use-click-outside'
 import { isHexCompatible, rgbToHex } from '~/utils/color'

@ -43,16 +48,30 @@ type TProperties = {
 }

 export const EditorMenuBar = (properties: TProperties) => {
-  const {
-    editor,
-    setIsPlainHTML,
-    // category,
-    disabled = false,
-  } = properties
-  // const [isOpenImage, setIsOpenImage] = useState(false)
+  const { editor, setIsPlainHTML, category, disabled = false } = properties
+  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
+    useAdminContext()
+  const [isOpenImage, setIsOpenImage] = useState(false)
+  const [imageUrl, setImageUrl] = useState('')
  const [isOpenColor, setIsOpenColor] = useState(false)
  const popover = useRef<HTMLDivElement>(null)
-  const close = useCallback(() => setIsOpenColor(false), [])
+  const close = useCallback(() => {
+    setIsOpenColor(false)
+    setIsOpenImage(false)
+    if (imageUrl) {
+      addImage(imageUrl)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageUrl])
+
+  useEffect(() => {
+    if (uploadedFile && isUploadOpen === category) {
+      addImage(uploadedFile)
+      setUploadedFile(undefined)
+      setIsUploadOpen(undefined)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploadedFile])

  useClickOutside(popover, close)

@ -96,167 +115,150 @@ export const EditorMenuBar = (properties: TProperties) => {
    }
  }

-  const uploadEnabled = false
-  const toggleUpload = () => {
-    if (uploadEnabled) {
-      // setIsOpenImage(true)
-    } else {
-      const urlImage = globalThis.prompt('URL')
-      if (urlImage) {
-        addImage(urlImage)
-      }
-    }
-  }
-
  return (
-    <>
-      <div className="flex items-start justify-between gap-4 px-4 py-3">
-        <div className="flex divide-x">
-          <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
+    <div className="flex items-start justify-between gap-4 px-4 py-3">
+      <div className="flex divide-x">
+        <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            disabled={
+              disabled || !editor.can().chain().focus().toggleBold().run()
+            }
+            isActive={editor.isActive('bold')}
+            title="Bold"
+          >
+            <BoldIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            disabled={
+              disabled || !editor.can().chain().focus().toggleItalic().run()
+            }
+            isActive={editor.isActive('italic')}
+            title="Italic"
+          >
+            <ItalicIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+            disabled={
+              disabled || !editor.can().chain().focus().toggleStrike().run()
+            }
+            isActive={editor.isActive('strike')}
+            title="Strike"
+          >
+            <StrikethroughIcon />
+          </EditorButton>
+          <div className="relative">
            <EditorButton
-              onClick={() => editor.chain().focus().toggleBold().run()}
-              disabled={
-                disabled || !editor.can().chain().focus().toggleBold().run()
-              }
-              isActive={editor.isActive('bold')}
-              title="Bold"
+              onClick={() => setIsOpenColor(true)}
+              title="Text Color"
+              style={{
+                color: rgbColor,
+              }}
+              isActive={true}
+              disabled={disabled}
            >
-              <BoldIcon />
+              <SwatchIcon />
            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleItalic().run()}
-              disabled={
-                disabled || !editor.can().chain().focus().toggleItalic().run()
-              }
-              isActive={editor.isActive('italic')}
-              title="Italic"
-            >
-              <ItalicIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleStrike().run()}
-              disabled={
-                disabled || !editor.can().chain().focus().toggleStrike().run()
-              }
-              isActive={editor.isActive('strike')}
-              title="Strike"
-            >
-              <StrikethroughIcon />
-            </EditorButton>
-            <div className="relative">
-              <EditorButton
-                onClick={() => setIsOpenColor(true)}
-                title="Text Color"
-                style={{
-                  color: rgbColor,
-                }}
-                isActive={true}
-                disabled={disabled}
+            {isOpenColor && (
+              <div
+                className="border-md absolute top-8 left-0"
+                ref={popover}
              >
-                <SwatchIcon />
-              </EditorButton>
-              {isOpenColor && (
-                <div
-                  className="border-md absolute top-8 left-0"
-                  ref={popover}
-                >
-                  <HexColorPicker
-                    className="z-10"
+                <HexColorPicker
+                  className="z-10 rounded-lg shadow"
+                  color={rgbColor}
+                  onChange={handleChangeColor}
+                />
+                <div className="">
+                  <HexColorInput
                    color={rgbColor}
                    onChange={handleChangeColor}
+                    prefixed
+                    className="relative z-10 mt-1 flex w-full rounded-lg border-0 bg-white px-3 py-2 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
                  />
-                  <div className="">
-                    <HexColorInput
-                      color={rgbColor}
-                      onChange={handleChangeColor}
-                      prefixed
-                      className="relative z-10 mt-1 flex w-full rounded-lg border px-3 py-2 text-sm focus:ring-0 focus-visible:outline-0"
-                    />
-                  </div>
                </div>
-              )}
-            </div>
-            <EditorButton
-              onClick={() => editor.chain().focus().setTextAlign('left').run()}
-              disabled={
-                disabled ||
-                !editor.can().chain().focus().setTextAlign('left').run()
-              }
-              isActive={editor.isActive({ textAlign: 'left' })}
-              title="Align Left"
-            >
-              <Bars3BottomLeftIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() =>
-                editor.chain().focus().setTextAlign('center').run()
-              }
-              disabled={
-                disabled ||
-                !editor.can().chain().focus().setTextAlign('center').run()
-              }
-              isActive={editor.isActive({ textAlign: 'center' })}
-              title="Align Center"
-            >
-              <Bars3Icon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().setTextAlign('right').run()}
-              disabled={
-                disabled ||
-                !editor.can().chain().focus().setTextAlign('right').run()
-              }
-              isActive={editor.isActive({ textAlign: 'right' })}
-              title="Align Right"
-            >
-              <Bars3BottomRightIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() =>
-                editor.chain().focus().setTextAlign('justify').run()
-              }
-              disabled={
-                disabled ||
-                !editor.can().chain().focus().setTextAlign('justify').run()
-              }
-              isActive={editor.isActive({ textAlign: 'justify' })}
-              title="Align Justify"
-            >
-              <Bars4Icon />
-            </EditorButton>
+              </div>
+            )}
          </div>
-          <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
-            <EditorButton
-              onClick={() =>
-                editor.chain().focus().toggleHeading({ level: 1 }).run()
-              }
-              isActive={editor.isActive('heading', { level: 1 })}
-              title="Heading 1"
-              disabled={disabled}
-            >
-              <H1Icon />
-            </EditorButton>
-            <EditorButton
-              onClick={() =>
-                editor.chain().focus().toggleHeading({ level: 2 }).run()
-              }
-              isActive={editor.isActive('heading', { level: 2 })}
-              title="Heading 2"
-              disabled={disabled}
-            >
-              <H2Icon />
-            </EditorButton>
-            <EditorButton
-              onClick={() =>
-                editor.chain().focus().toggleHeading({ level: 3 }).run()
-              }
-              isActive={editor.isActive('heading', { level: 3 })}
-              title="Heading 3"
-              disabled={disabled}
-            >
-              <H3Icon />
-            </EditorButton>
-            {/* <EditorButton
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('left').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('left').run()
+            }
+            isActive={editor.isActive({ textAlign: 'left' })}
+            title="Align Left"
+          >
+            <Bars3BottomLeftIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('center').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('center').run()
+            }
+            isActive={editor.isActive({ textAlign: 'center' })}
+            title="Align Center"
+          >
+            <Bars3Icon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('right').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('right').run()
+            }
+            isActive={editor.isActive({ textAlign: 'right' })}
+            title="Align Right"
+          >
+            <Bars3BottomRightIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('justify').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('justify').run()
+            }
+            isActive={editor.isActive({ textAlign: 'justify' })}
+            title="Align Justify"
+          >
+            <Bars4Icon />
+          </EditorButton>
+        </div>
+        <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
+          <EditorButton
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 1 }).run()
+            }
+            isActive={editor.isActive('heading', { level: 1 })}
+            title="Heading 1"
+            disabled={disabled}
+          >
+            <H1Icon />
+          </EditorButton>
+          <EditorButton
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 2 }).run()
+            }
+            isActive={editor.isActive('heading', { level: 2 })}
+            title="Heading 2"
+            disabled={disabled}
+          >
+            <H2Icon />
+          </EditorButton>
+          <EditorButton
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 3 }).run()
+            }
+            isActive={editor.isActive('heading', { level: 3 })}
+            title="Heading 3"
+            disabled={disabled}
+          >
+            <H3Icon />
+          </EditorButton>
+          {/* <EditorButton
              onClick={() => editor.chain().focus().setParagraph().run()}
              isActive={editor.isActive('paragraph')}
              title="Paragraph"
@ -264,32 +266,32 @@ export const EditorMenuBar = (properties: TProperties) => {
            >
              <RiParagraph />
            </EditorButton> */}
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleBulletList().run()}
-              isActive={editor.isActive('bulletList')}
-              title="Bullet List"
-              disabled={disabled}
-            >
-              <ListBulletIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleOrderedList().run()}
-              isActive={editor.isActive('orderedList')}
-              title="Ordered List"
-              disabled={disabled}
-            >
-              <NumberedListIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-              isActive={editor.isActive('codeBlock')}
-              title="Code Block"
-              disabled={disabled}
-            >
-              <CodeBracketIcon />
-            </EditorButton>
-          </div>
-          {/* <div className="flex items-start gap-1 px-1">
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            isActive={editor.isActive('bulletList')}
+            title="Bullet List"
+            disabled={disabled}
+          >
+            <ListBulletIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            isActive={editor.isActive('orderedList')}
+            title="Ordered List"
+            disabled={disabled}
+          >
+            <NumberedListIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            isActive={editor.isActive('codeBlock')}
+            title="Code Block"
+            disabled={disabled}
+          >
+            <CodeBracketIcon />
+          </EditorButton>
+        </div>
+        {/* <div className="flex items-start gap-1 px-1">
            <EditorButton
              onClick={() => editor.chain().focus().toggleBlockquote().run()}
              isActive={editor.isActive('blockquote')}
@ -306,7 +308,7 @@ export const EditorMenuBar = (properties: TProperties) => {
              <RiSeparator />
            </EditorButton>
          </div> */}
-          {/* <div className="flex items-start gap-1 px-1">
+        {/* <div className="flex items-start gap-1 px-1">
            <EditorButton
              onClick={() => editor.chain().focus().setHardBreak().run()}
              title="Hard Break"
@ -325,89 +327,96 @@ export const EditorMenuBar = (properties: TProperties) => {
              <RiFormatClear />
            </EditorButton>
          </div> */}
-          <div className="flex items-start gap-1 px-1">
+        <div className="flex items-start gap-1 px-1">
+          <div className="relative">
            <EditorButton
-              onClick={() => toggleUpload()}
+              onClick={() => setIsOpenImage(true)}
              title="Insert Image"
              disabled={disabled}
            >
              <PhotoIcon />
            </EditorButton>
-            <EditorButton
-              onClick={() => setLink()}
-              disabled={
-                disabled ||
-                !editor
-                  .can()
-                  .chain()
-                  .focus()
-                  .extendMarkRange('link')
-                  .setLink({ href: '' })
-                  .run()
-              }
-              isActive={editor.isActive('link')}
-              title="Set Link"
-            >
-              <LinkIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().unsetLink().run()}
-              disabled={disabled || !editor.isActive('link')}
-              title="Unset Link"
-            >
-              <LinkSlashIcon />
-            </EditorButton>
-          </div>
-          <div className="flex items-start gap-1 px-1">
-            <EditorButton
-              onClick={() => editor.chain().focus().undo().run()}
-              disabled={disabled || !editor.can().chain().focus().undo().run()}
-              title="Undo"
-            >
-              <ArrowUturnLeftIcon />
-            </EditorButton>
-            <EditorButton
-              onClick={() => editor.chain().focus().redo().run()}
-              disabled={disabled || !editor.can().chain().focus().redo().run()}
-              title="Redo"
-            >
-              <ArrowUturnRightIcon />
-            </EditorButton>
+            {isOpenImage && (
+              <div
+                className="border-md absolute top-8 left-0 w-50"
+                ref={popover}
+              >
+                <div className="relative">
+                  <Input
+                    placeholder="Masukkan URL Gambar"
+                    color={rgbColor}
+                    onChange={(event) => {
+                      setImageUrl(event.target.value)
+                    }}
+                    className="z-10 flex h-[42px] w-full rounded-lg border-0 bg-white p-2 pr-8 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
+                  />
+                  <Button
+                    type="button"
+                    variant="icon"
+                    size="fit"
+                    className="absolute top-0 right-3 h-[42px]"
+                    onClick={() => {
+                      setIsUploadOpen('content')
+                    }}
+                  >
+                    <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
+                  </Button>
+                </div>
+              </div>
+            )}
          </div>
+          <EditorButton
+            onClick={() => setLink()}
+            disabled={
+              disabled ||
+              !editor
+                .can()
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .setLink({ href: '' })
+                .run()
+            }
+            isActive={editor.isActive('link')}
+            title="Set Link"
+          >
+            <LinkIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().unsetLink().run()}
+            disabled={disabled || !editor.isActive('link')}
+            title="Unset Link"
+          >
+            <LinkSlashIcon />
+          </EditorButton>
        </div>
-        <div>
-          <div className="flex gap-1 px-1">
-            <EditorButton
-              onClick={() => setIsPlainHTML(true)}
-              title="Switch to Plain Text"
-            >
-              <DocumentTextIcon />
-            </EditorButton>
-          </div>
+        <div className="flex items-start gap-1 px-1">
+          <EditorButton
+            onClick={() => editor.chain().focus().undo().run()}
+            disabled={disabled || !editor.can().chain().focus().undo().run()}
+            title="Undo"
+          >
+            <ArrowUturnLeftIcon />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().redo().run()}
+            disabled={disabled || !editor.can().chain().focus().redo().run()}
+            title="Redo"
+          >
+            <ArrowUturnRightIcon />
+          </EditorButton>
        </div>
      </div>
-
-      {/* <Dialog
-        isOpen={isOpenImage}
-        setIsOpen={setIsOpenImage}
-        title="Insert Image"
-        showCloseButton={true}
-      >
-        <UploadProvider
-          data={{
-            onCancel: () => setIsOpenImage(false),
-            onSave: (file) => {
-              addImage(file)
-              setIsOpenImage(false)
-            },
-            category: category,
-            maxFileSize: 300,
-            selectedFile: '',
-          }}
-        >
-          <Upload />
-        </UploadProvider>
-      </Dialog> */}
-    </>
+      <div>
+        <div className="flex gap-1 px-1">
+          <EditorButton
+            onClick={() => setIsPlainHTML(true)}
+            title="Switch to Plain Text"
+          >
+            <DocumentTextIcon />
+          </EditorButton>
+        </div>
+      </div>
+    </div>
  )
 }
--- a/app/components/text-editor/index.tsx
+++ b/app/components/text-editor/index.tsx
@ -140,7 +140,7 @@ export const TextEditor = <TFormValues extends Record<string, unknown>>(
            editor={editor}
            id={id ?? generatedId}
            className={twMerge(
-              'prose prose-headings:my-0.5 prose-p:my-0.5 max-h-96 max-w-none cursor-text overflow-y-auto rounded-b-md p-2',
+              'prose prose-headings:my-0.5 prose-p:my-0.5 max-w-none cursor-text overflow-y-auto rounded-b-md p-2',
              inputClassName,
            )}
            onClick={() => editor?.commands.focus()}
--- a/app/components/ui/input-file.tsx
+++ b/app/components/ui/input-file.tsx
@ -1,6 +1,6 @@
 import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
 import { CloudArrowUpIcon } from '@heroicons/react/20/solid'
-import { type ComponentProps, type ReactNode } from 'react'
+import { useEffect, type ComponentProps, type ReactNode } from 'react'
 import {
  get,
  type FieldError,
@ -11,7 +11,7 @@ import {
 import { useRemixFormContext } from 'remix-hook-form'
 import { twMerge } from 'tailwind-merge'

-import { useAdminContext } from '~/contexts/admin'
+import { useAdminContext, type TUpload } from '~/contexts/admin'

 import { Button } from './button'

@ -42,15 +42,26 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
    labelClassName,
    ...restProperties
  } = properties
-  const { setIsUploadOpen } = useAdminContext()
+  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
+    useAdminContext()

  const {
    register,
    formState: { errors },
+    setValue,
  } = useRemixFormContext()

  const error: FieldError = get(errors, name)

+  useEffect(() => {
+    if (uploadedFile && isUploadOpen === name) {
+      setValue(name as string, uploadedFile)
+      setUploadedFile(undefined)
+      setIsUploadOpen(undefined)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploadedFile])
+
  return (
    <Field
      className={twMerge('relative', containerClassName)}
@ -75,7 +86,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
        size="fit"
        className="absolute right-3 h-[42px]"
        onClick={() => {
-          setIsUploadOpen('featured_image')
+          setIsUploadOpen(name as TUpload)
        }}
      >
        <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
--- a/app/components/ui/pagination.tsx
+++ b/app/components/ui/pagination.tsx
@ -1,66 +0,0 @@
-import React from 'react'
-
-import { ChevronIcon } from '~/components/icons/chevron'
-import { ChevronDoubleIcon } from '~/components/icons/chevron-double'
-
-type PaginationProperties = {
-  currentPage: number
-  totalPages: number
-  onPageChange: (page: number) => void
-}
-
-export const Pagination: React.FC<PaginationProperties> = ({
-  currentPage = 1,
-  totalPages,
-  onPageChange,
-}) => {
-  const renderPageNumbers = () => {
-    const pages = []
-    for (let index = 1; index <= totalPages; index++) {
-      pages.push(
-        <button
-          key={index}
-          onClick={() => onPageChange(index)}
-          className={`rounded-lg px-3 py-1 ${
-            currentPage === index ? 'bg-[#2E2F7C] text-white' : 'text-gray-500'
-          }`}
-        >
-          {index}
-        </button>,
-      )
-    }
-    return pages
-  }
-
-  return (
-    <div className="flex items-center justify-center space-x-2 text-[#2E2F7C]">
-      <button
-        onClick={() => onPageChange(1)}
-        disabled={currentPage === 1}
-      >
-        <ChevronDoubleIcon />
-      </button>
-      <button
-        onClick={() => onPageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-      >
-        <ChevronIcon className="rotate-90" />
-      </button>
-
-      {renderPageNumbers()}
-
-      <button
-        onClick={() => onPageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-      >
-        <ChevronIcon className="rotate-270" />
-      </button>
-      <button
-        onClick={() => onPageChange(totalPages)}
-        disabled={currentPage === totalPages}
-      >
-        <ChevronDoubleIcon className="rotate-180" />
-      </button>
-    </div>
-  )
-}
--- a/app/contexts/admin.tsx
+++ b/app/contexts/admin.tsx
@ -6,17 +6,19 @@ import {
  type Dispatch,
  type SetStateAction,
 } from 'react'
+import { z } from 'zod'

-type TUpload =
-  | 'featured_image'
-  | 'ads'
-  | 'content'
-  | 'profile_picture'
-  | undefined
+export const uploadCategorySchema = z
+  .enum(['featured_image', 'ads', 'content', 'profile_picture'])
+  .optional()
+
+export type TUpload = z.infer<typeof uploadCategorySchema>

 type AdminContextProperties = {
  isUploadOpen: TUpload
  setIsUploadOpen: Dispatch<SetStateAction<TUpload>>
+  uploadedFile?: string
+  setUploadedFile: Dispatch<SetStateAction<string | undefined>>
 }

 const AdminContext = createContext<AdminContextProperties | undefined>(
@ -25,12 +27,15 @@ const AdminContext = createContext<AdminContextProperties | undefined>(

 export const AdminProvider = ({ children }: PropsWithChildren) => {
  const [isUploadOpen, setIsUploadOpen] = useState<TUpload>()
+  const [uploadedFile, setUploadedFile] = useState<string | undefined>()

  return (
    <AdminContext.Provider
      value={{
        isUploadOpen,
        setIsUploadOpen,
+        uploadedFile,
+        setUploadedFile,
      }}
    >
      {children}
--- a/app/layouts/admin/dashboard.tsx
+++ b/app/layouts/admin/dashboard.tsx
@ -3,6 +3,7 @@ import type { PropsWithChildren } from 'react'

 import { useAdminContext } from '~/contexts/admin'

+import { FormUpload } from './form-upload'
 import { Navbar } from './navbar'
 import { Sidebar } from './sidebar'

@ -34,7 +35,7 @@ export const AdminDashboardLayout = (properties: PropsWithChildren) => {
            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"
          >
-            Upload di mari {isUploadOpen}
+            <FormUpload />
          </DialogPanel>
        </div>
      </Dialog>
--- a/app/layouts/admin/form-upload.tsx
+++ b/app/layouts/admin/form-upload.tsx
@ -0,0 +1,122 @@
+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 { uploadCategorySchema, useAdminContext } from '~/contexts/admin'
+
+export const uploadSchema = z.object({
+  file: z.instanceof(File),
+  category: uploadCategorySchema,
+})
+
+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
+
+  const formMethods = useRemixForm<TUploadSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(uploadSchema),
+  })
+
+  const { handleSubmit, register, setValue } = formMethods
+
+  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])
+
+  const handleChange = async function (event: ChangeEvent<HTMLInputElement>) {
+    event.preventDefault()
+    if (event.target.files && event.target.files[0]) {
+      const files: File[] = [...event.target.files]
+
+      onChange(files, event)
+    }
+  }
+
+  const onChange = async function (
+    files: File[],
+    event: ChangeEvent<HTMLInputElement>,
+  ) {
+    const file = files[0]
+    const img = new Image()
+
+    if (!file.type.startsWith('image/')) {
+      setError('Please upload an image file.')
+      return
+    }
+
+    if (file.size > maxFileSize * 1024) {
+      setError(`File size is too big!`)
+      return
+    }
+
+    img.addEventListener('load', () => {
+      handleFiles(event)
+    })
+
+    img.src = URL.createObjectURL(file)
+  }
+
+  const handleFiles = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files
+    if (files && files.length > 0) {
+      const file = files[0]
+      setValue('file', file)
+    }
+  }
+
+  return (
+    <RemixFormProvider {...formMethods}>
+      <fetcher.Form
+        method="post"
+        onSubmit={handleSubmit}
+        className="space-y-4"
+        action="/actions/admin/upload"
+        encType="multipart/form-data"
+      >
+        {error && (
+          <div className="text-sm text-red-500 capitalize">{error}</div>
+        )}
+        <Input
+          type="file"
+          id="input-file-upload"
+          accept="image/*"
+          className="h-[42px] w-full cursor-pointer rounded-md border border-[#DFDFDF] p-2"
+          onChange={handleChange}
+        />
+        <input
+          type="hidden"
+          id="input-file-upload-type"
+          value={isUploadOpen}
+          {...register('category')}
+        />
+        <Button
+          disabled={disabled}
+          type="submit"
+          className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+        >
+          Upload
+        </Button>
+      </fetcher.Form>
+    </RemixFormProvider>
+  )
+}
--- a/app/layouts/admin/menu.ts
+++ b/app/layouts/admin/menu.ts
@ -1,4 +1,8 @@
-import { ClipboardDocumentCheckIcon, TagIcon } from '@heroicons/react/20/solid'
+import {
+  ClipboardDocumentCheckIcon,
+  DocumentCurrencyDollarIcon,
+  TagIcon,
+} from '@heroicons/react/20/solid'
 import type { SVGProps } from 'react'

 import { ChartIcon } from '~/components/icons/chart'
@ -62,7 +66,7 @@ export const MENU: TMenu[] = [
      {
        title: 'Subscribe Plan',
        url: '/lg-admin/subscribe-plan',
-        icon: TagIcon,
+        icon: DocumentCurrencyDollarIcon,
      },
    ],
  },
--- a/app/pages/dashboard-contents/index.tsx
+++ b/app/pages/dashboard-contents/index.tsx
@ -83,7 +83,7 @@ export const ContentsPage = () => {
    7: (value: string) => (
      <Button
        as="a"
-        href={`/lg-admin/contents/update/${value}`}
+        href={`/lg-admin/contents/update/${encodeURIComponent(value)}`}
        className="text-md rounded-md"
        size="sm"
      >
--- a/app/routes/actions.admin.upload.tsx
+++ b/app/routes/actions.admin.upload.tsx
@ -0,0 +1,64 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { uploadFileRequest } from '~/apis/admin/upload-file'
+import { uploadSchema, type TUploadSchema } from '~/layouts/admin/form-upload'
+import { handleCookie } from '~/libs/cookies'
+
+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<TUploadSchema>(
+      request,
+      zodResolver(uploadSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: uploadData } = await uploadFileRequest({
+      payload,
+      accessToken: staffToken,
+    })
+
+    return data(
+      {
+        success: true,
+        uploadData,
+      },
+      {
+        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 },
+    )
+  }
+}
--- a/app/utils/render.tsx
+++ b/app/utils/render.tsx
@ -24,6 +24,6 @@ export const getPremiumAttribute = (parameters: TGetPremiumAttribute) => {

  return {
    as: Link,
-    to: `/detail/${slug}`,
+    to: `/detail/${encodeURIComponent(slug)}`,
  }
 }