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

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 {

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

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

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

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 {
+  const { editor, setIsPlainHTML, category, disabled = false } = properties
-    editor,
+  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
-    setIsPlainHTML,
+    useAdminContext()
-    // category,
+  const [isOpenImage, setIsOpenImage] = useState(false)
-    disabled = false,
+  const [imageUrl, setImageUrl] = useState('')
-  } = properties
-  // const [isOpenImage, setIsOpenImage] = useState(false)
   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 items-start justify-between gap-4 px-4 py-3">
+      <div className="flex divide-x">
-        <div className="flex divide-x">
+        <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
-          <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()}
+              onClick={() => setIsOpenColor(true)}
-              disabled={
+              title="Text Color"
-                disabled || !editor.can().chain().focus().toggleBold().run()
+              style={{
-              }
+                color: rgbColor,
-              isActive={editor.isActive('bold')}
+              }}
-              title="Bold"
+              isActive={true}
+              disabled={disabled}
             >
-              <BoldIcon />
+              <SwatchIcon />
             </EditorButton>
-            <EditorButton
+            {isOpenColor && (
-              onClick={() => editor.chain().focus().toggleItalic().run()}
+              <div
-              disabled={
+                className="border-md absolute top-8 left-0"
-                disabled || !editor.can().chain().focus().toggleItalic().run()
+                ref={popover}
-              }
-              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}
               >
-                <SwatchIcon />
+                <HexColorPicker
-              </EditorButton>
+                  className="z-10 rounded-lg shadow"
-              {isOpenColor && (
+                  color={rgbColor}
-                <div
+                  onChange={handleChangeColor}
-                  className="border-md absolute top-8 left-0"
+                />
-                  ref={popover}
+                <div className="">
-                >
+                  <HexColorInput
-                  <HexColorPicker
-                    className="z-10"
                     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>
-            </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 className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
+          <EditorButton
-            <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('left').run()}
-              onClick={() =>
+            disabled={
-                editor.chain().focus().toggleHeading({ level: 1 }).run()
+              disabled ||
-              }
+              !editor.can().chain().focus().setTextAlign('left').run()
-              isActive={editor.isActive('heading', { level: 1 })}
+            }
-              title="Heading 1"
+            isActive={editor.isActive({ textAlign: 'left' })}
-              disabled={disabled}
+            title="Align Left"
-            >
+          >
-              <H1Icon />
+            <Bars3BottomLeftIcon />
-            </EditorButton>
+          </EditorButton>
-            <EditorButton
+          <EditorButton
-              onClick={() =>
+            onClick={() => editor.chain().focus().setTextAlign('center').run()}
-                editor.chain().focus().toggleHeading({ level: 2 }).run()
+            disabled={
-              }
+              disabled ||
-              isActive={editor.isActive('heading', { level: 2 })}
+              !editor.can().chain().focus().setTextAlign('center').run()
-              title="Heading 2"
+            }
-              disabled={disabled}
+            isActive={editor.isActive({ textAlign: 'center' })}
-            >
+            title="Align Center"
-              <H2Icon />
+          >
-            </EditorButton>
+            <Bars3Icon />
-            <EditorButton
+          </EditorButton>
-              onClick={() =>
+          <EditorButton
-                editor.chain().focus().toggleHeading({ level: 3 }).run()
+            onClick={() => editor.chain().focus().setTextAlign('right').run()}
-              }
+            disabled={
-              isActive={editor.isActive('heading', { level: 3 })}
+              disabled ||
-              title="Heading 3"
+              !editor.can().chain().focus().setTextAlign('right').run()
-              disabled={disabled}
+            }
-            >
+            isActive={editor.isActive({ textAlign: 'right' })}
-              <H3Icon />
+            title="Align Right"
-            </EditorButton>
+          >
-            {/* <EditorButton
+            <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
+          <EditorButton
-              onClick={() => editor.chain().focus().toggleBulletList().run()}
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
-              isActive={editor.isActive('bulletList')}
+            isActive={editor.isActive('bulletList')}
-              title="Bullet List"
+            title="Bullet List"
-              disabled={disabled}
+            disabled={disabled}
-            >
+          >
-              <ListBulletIcon />
+            <ListBulletIcon />
-            </EditorButton>
+          </EditorButton>
-            <EditorButton
+          <EditorButton
-              onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
-              isActive={editor.isActive('orderedList')}
+            isActive={editor.isActive('orderedList')}
-              title="Ordered List"
+            title="Ordered List"
-              disabled={disabled}
+            disabled={disabled}
-            >
+          >
-              <NumberedListIcon />
+            <NumberedListIcon />
-            </EditorButton>
+          </EditorButton>
-            <EditorButton
+          <EditorButton
-              onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-              isActive={editor.isActive('codeBlock')}
+            isActive={editor.isActive('codeBlock')}
-              title="Code Block"
+            title="Code Block"
-              disabled={disabled}
+            disabled={disabled}
-            >
+          >
-              <CodeBracketIcon />
+            <CodeBracketIcon />
-            </EditorButton>
+          </EditorButton>
-          </div>
+        </div>
-          {/* <div className="flex items-start gap-1 px-1">
+        {/* <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
+            {isOpenImage && (
-              onClick={() => setLink()}
+              <div
-              disabled={
+                className="border-md absolute top-8 left-0 w-50"
-                disabled ||
+                ref={popover}
-                !editor
+              >
-                  .can()
+                <div className="relative">
-                  .chain()
+                  <Input
-                  .focus()
+                    placeholder="Masukkan URL Gambar"
-                  .extendMarkRange('link')
+                    color={rgbColor}
-                  .setLink({ href: '' })
+                    onChange={(event) => {
-                  .run()
+                      setImageUrl(event.target.value)
-              }
+                    }}
-              isActive={editor.isActive('link')}
+                    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"
-              title="Set Link"
+                  />
-            >
+                  <Button
-              <LinkIcon />
+                    type="button"
-            </EditorButton>
+                    variant="icon"
-            <EditorButton
+                    size="fit"
-              onClick={() => editor.chain().focus().unsetLink().run()}
+                    className="absolute top-0 right-3 h-[42px]"
-              disabled={disabled || !editor.isActive('link')}
+                    onClick={() => {
-              title="Unset Link"
+                      setIsUploadOpen('content')
-            >
+                    }}
-              <LinkSlashIcon />
+                  >
-            </EditorButton>
+                    <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
-          </div>
+                  </Button>
-          <div className="flex items-start gap-1 px-1">
+                </div>
-            <EditorButton
+              </div>
-              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>
+          <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 items-start gap-1 px-1">
-          <div className="flex gap-1 px-1">
+          <EditorButton
-            <EditorButton
+            onClick={() => editor.chain().focus().undo().run()}
-              onClick={() => setIsPlainHTML(true)}
+            disabled={disabled || !editor.can().chain().focus().undo().run()}
-              title="Switch to Plain Text"
+            title="Undo"
-            >
+          >
-              <DocumentTextIcon />
+            <ArrowUturnLeftIcon />
-            </EditorButton>
+          </EditorButton>
-          </div>
+          <EditorButton
+            onClick={() => editor.chain().focus().redo().run()}
+            disabled={disabled || !editor.can().chain().focus().redo().run()}
+            title="Redo"
+          >
+            <ArrowUturnRightIcon />
+          </EditorButton>
         </div>
       </div>
-
+      <div>
-      {/* <Dialog
+        <div className="flex gap-1 px-1">
-        isOpen={isOpenImage}
+          <EditorButton
-        setIsOpen={setIsOpenImage}
+            onClick={() => setIsPlainHTML(true)}
-        title="Insert Image"
+            title="Switch to Plain Text"
-        showCloseButton={true}
+          >
-      >
+            <DocumentTextIcon />
-        <UploadProvider
+          </EditorButton>
-          data={{
+        </div>
-            onCancel: () => setIsOpenImage(false),
+      </div>
-            onSave: (file) => {
+    </div>
-              addImage(file)
-              setIsOpenImage(false)
-            },
-            category: category,
-            maxFileSize: 300,
-            selectedFile: '',
-          }}
-        >
-          <Upload />
-        </UploadProvider>
-      </Dialog> */}
-    </>
   )
 }

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()}

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" />

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

app/contexts/admin.tsx

@@ -6,17 +6,19 @@ import {
   type Dispatch,
   type SetStateAction,
 } from 'react'
+import { z } from 'zod'
 
-type TUpload =
+export const uploadCategorySchema = z
-  | 'featured_image'
+  .enum(['featured_image', 'ads', 'content', 'profile_picture'])
-  | 'ads'
+  .optional()
-  | 'content'
+
-  | 'profile_picture'
+export type TUpload = z.infer<typeof uploadCategorySchema>
-  | undefined
 
 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}

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>

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

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,
       },
     ],
   },

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

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

app/utils/render.tsx

@@ -24,6 +24,6 @@ export const getPremiumAttribute = (parameters: TGetPremiumAttribute) => {
 
   return {
     as: Link,
-    to: `/detail/${slug}`,
+    to: `/detail/${encodeURIComponent(slug)}`,
   }
 }